Webノートデス

ヘディングタグに背景をつけたくて苦悩した俺の一日

      2015/10/25

WordPressテーマ「Chill (tcd016)」
Chill (tcd016)というワードプレステーマを使って完全趣味で運営しているブログがあるんですが、ヘディングタグに背景がついていなくてどうにもさっぱりしすぎでした。

軽い気持ちで背景をつけようと試みたところ、以外に手間取って休みが終ってしまったと言うお話。

Chill (tcd016)のヘディングタグに背景をつける

ある日曜の朝、珍しく子供と遊べる時間が取れそうな日、朝のうちに昨日やり残したブログのカスタマイズを片付けることにした。さっと終らして久しぶりに充実した休日になる予感…パソコンを起動する。

Hタグに背景~素材を探す

やり残したカスタマイズと言うのはHタグの背景をつけること。今使っているChill (tcd016)というワードプレステーマはH3、H4といったヘディングタグに背景が設定されていなかった。

Hタグの背景をつけた経験が無かったわけではないので、とりあえず使えそうな背景素材を探してみた。

 

テーマにマッチする背景素材をピックアップ。ダウンロードしてワードプレスのイメージフォルダにアップロード。cssを書き換えてモーニングコーヒーを用意したところで子供たちがようやく起きてきたようだ。

トップページ記事一覧のタイトルにH4が設定されている

子供たちは着替えもせずにテレビ朝日の番組に夢中だ。俺は何気なくブログをチェックしようとアクセス…なにかレイアウトがおかしくないか?

どうやらトップページ記事一覧のタイトルにはH4が使われているらしく、しかも今回使った背景は表示がテキストとずれていた。まったく使えない…どうしたものかと思案してる俺の眼前、テレビのチャンネルはCXのドラゴンボール改に変わっていた。

CSSだけで見出しを作成

大した知識もなくカスタマイズをして失敗したことに後悔しながらも、次の対策を調べる作業を開始。腹をすかせた子供たちが飢えた狼のような目で俺を見ている…この仕事が終ったら何か食べに行こうと約束してグーグルと対峙する。

画像を使わない見出しのサンプルを試してみた。

 

これならば問題ないはずとプレビューを確認。メインコンテンツのHタグは良かったのだが、サイドバーがおかしい…このテーマのサイドバーにはH3が多く使われていて、しかも今回の方法ではデザインが崩れまくっていた…時はすでに正午を回り、狼たちはおかしな唸り声を上げている。

Chill (tcd016)の公式マニュアルは無いのか?

良く解りもしないで動くよりも、マニュアルを見るのが最善だろう。Chill のマニュアルを探したのだが目的の情報はなかなか見つからない…ダウンロードサイトにはHタグについての説明は見当たらなかったが、「TCD」の公式サイトからChill のデモサイトでようやく辿り着いた。

 

Hタグのデザインについての記述があったので引用する。

他社のプラグインを導入した際にデザイン崩れが起こらないよう、ヘディングタグにはデザインを付けていません。ヘディングタグにデザインを付ける場合は、クラスで指定して行なうのが最適です。

調べてみたら、TCDのワードプレステーマはChill 以外でもヘディングタグにはデザインをつけていないものが多いようだ。それならそうともっと解りやすいインフォメーションがあっても良さそうなものだが、とりあえずクラス指定を試してみることにする…その前に餓えた狼たちとコンビニで買物だ。

Chill (tcd016)のH3・H4タグの記述

遅い昼食になった狼たちも少しは落ち着いたようだ。俺のほうはChillのテーマ編集画面からスタイルシート (style.css)をチェックする。

ざっと眺めていると「見出し」の記述を発見。

news_headline1とnews_headline2でクラス指定すれば良いということか。
実際の記述で「H3見出し」というテキストをH3にしていするとすれば、

上のように記述する…めんどくさい…今まで使っていなかったけど定型入力のプラグインを使わなくてはやってられないな…

時間はすでに15時を回っていた。あとで遊びに行く約束をした狼たちはゴロゴロしているが、まだ行かないのかと駄々をこねはじめた。スーパー競馬の大島麻衣を見てろと言うのだが興味が無いらしい。

競馬親父たちのアイドルを馬鹿にしやがって…

ワードプレスプラグイン「AddQuicktag」をインストール

H3とH4用のタグ入力を省力化するために、指定しておいたタグや定型分を簡単に入力できるプラグイン「AddQuicktag」を導入した。

 

プラグインをインストールしてH3とH4のタグを設定、テストしてみたら問題なく背景が表示できた。ちょうど中山のメインレースが確定、IPAT口座は底をつきかけている…

過去記事のヘディングタグを一括で置換したい

あとは今までに投稿した過去記事のメンテナンスだ。H3とH4タグをすべて書き換えなくてはならない。

こういうのは良いプラグインがあるだろうと検索したら簡単に見つかった。

 

このSearch Regexというプラグインを使えば簡単に作業が終了しそうに感じたが、失敗したときの手間を考えてしまった。

当然この種の作業を行う際には、データベースをはじめデータをきちんと保存しておかなくてはならない。失敗したときに復旧する為の保険だ。ところがこの復旧作業と言うのがけっこう大変で、過去に嫌な思い出がいくつもある…出来ればやりたくない。

「記事数も少ないし1記事づつやってみるか…」

Hタグもそんなに多く使うほうではないし、AddQuicktagを使えば置換自体はそんなに大変ではない。それは一括置換比べたら膨大な手間だが、あえてアナログな手法のほうがきっちり確認も出来るし安心だ。

50記事弱の記事更新が終ったころには、あたりは暗くなり始めていた。朝描いていた休日とはまったく違ったものになってしまい、Hタグの背景と引き換えに子供たちの信頼も失ってしまったに違いない。

リビングのTVからは休日の終わりを感じさせる「笑点のテーマ」が流れている…あの明るい曲調がなぜかせつないブルースのように心に染みた…

Hタグの背景設定は無事終了

今回の記事はネタがつまらないと感じたので、企画物としてアレンジしてみましたが、これはこれでつまらなかったですね。

せっかく書いたのでこのままアップしておきますが、個人的にはこういう自己満足の世界は大好きなんで、たまにはこんなのも書こうかなって思ってしまいました。

Chillは個人的にお気に入りのテーマなんですが、有料のわりに詰めが甘いところもあるんですよね。カスタマイズの知識が豊富な人には気にならないかもしれないですけどね。

興味のある人は使ってみてください→WordPressテーマ「Chill (tcd016)」

 - WordPress

ad

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

All In One WP Security & Firewallでワードプレスのセキュリティ強化

このブログも立ち上げて数ヶ月が経過、まだ記事数も少ないですがポツポツとコメントが …

ワードプレスにFacebookのPage Pluginを設置したときの備忘録

ワードプレスにFacebookのPage Pluginを設置 このブログではない …

無料のワードプレステーマ”STINGER5″を選んだ理由

STINGERを選んだ理由、それは… なんて大げさな理由は何もなくて、いろいろな …

コアサーバーにワードプレスをインストールするのが簡単になった

コアサーバーにワードプレスをインストール コアサーバーのPHPのセーフモードが解 …

ロリポップでWordPressログイン画面へのアクセス制限

ロリポップにインストールしていたワードプレスにログインしたら、いきなりこんなペー …

ワードプレスでサムネイル付きリンクを表示するのにやったこと

前記事の「ブログ開始でなぜかGIMPを使い始めたことについてのお話」にサムネイル …

さくらサーバーにワードプレスをクイックインストールしてみた

さくらサーバーでワードプレスをクイックインストール さくらサーバーのクイックイン …

WordPressインストール後、最初に設定したプラグイン

WordPressをインストールしてまず考えるのは、最初に何のプラグインを使えば …