恥ずかしながらブログ初心者の私がどうしても設定できなかった記事タイトルのカスタム。
ググって出てきた見出しカスタム用のcssをコピペして貼付けていたんですがうまく行きません。

 

 

画像のように見出し1(h1)タグを装飾すると、記事タイトル、ブログタイトル、、サイドバーまで全て同じ装飾になってしまってました。

それを無事?に今のブログの見た目のように別々に設定できましたので、その方法をここに記していきたいとおもいます。

※今の見た目もダサいというクレームはご遠慮下さい。それは私のセンスの問題なので物理的には治せません。ちなみに金運アップをイメージしてます。

使用しているワードプレスのテーマはSimplicity2です。

スタイルシートの内容と原因

この画像は先程の画像のスタイルシートです。

 

 

初心者目線ではおかしな所は特にないように思えます。

ググって出てきたカスタムコードをそのままコピペしただけなので…

スタイルシート自体、見出し用のコードしか書いていないので何かが重複してしまってるという事もないはずです。

あ、でもh2〜h4のコードは、h1の部分だけ書き換えました。

とりあえずそれぞれ順番に消して検証しようと思い、まず見出し1(h1)のコードのみ消してみました。

h1 {
padding: .5em .75m;
back-ground-color: #ccffcc;
border-left: 6px solid #008080;
}

の部分です。

 

消してみた結果、見出し1の装飾と共にブログタイトル、ブログ説明、サイドバーの装飾まで消えました。

 

 

一発目で原因が分かりました。ヨッ迷探偵

h2〜h4は気付く限りでは問題なさそうです。

 

見出し1とブログタイトル等が一緒にカスタムされてしまう原因

 

そこで一つの仮定を建てました。

どうして一緒に変更されてしてしまうのか、それはただ単純にブログタイトルとサイドバーも見出し1(h1)タグだからではないでしょうか。

でなければ影響しないはずですからね。

※詳しい理由は分かりませ割愛しますが、ワードプレスのテーマはブログタイトル等にh1タグを使用しているものが多いようです。

 

記事タイトルのみカスタムする方法

では、どうすれば解決するのかというと、

h1の部分の前に『.article』を付けるだけです。

これを付ける事により、記事のタイトルのみカスタムする事ができました。

それで出来上がったのが、

こんな感じです。

『.article h1』にした事で他の項目に影響しなくなりました。

 

※調べていたら完全に脱線してブログタイトルのロゴ作りにはまってしまい、なぜか解決するより先にロゴが完成してたのでブログタイトルの見た目も変わってます…

 

あと、背景の色が不揃いだったので統一しました。

ついでにサイドバーも個別に設定しました。

サイドバーは『#sidebar h3』でカスタムできます。

 

あいかわらず色のセンスが…金運アップをイメージしてます…

 

まとめ

実は凄く簡単でした。

一般的には簡単すぎる問題なのか、ググってもなかなか調べられずにかなりの時間を使ってしまいました。

おそらく調べ方が悪いのですが…

あと、気になるのは『.article h1』を使って問題無いのかという点ですが、この素晴らしいテーマ『simplicity2』の制作者であるわいひら氏が、Q&A返答時のコードがこれになっていたので問題無いと思われます。

 

と、いうか最初からQ&A見とけばよかったああああああ!

 

 

スポンサーリンク


ブログランキングに参加してます!
もしよければ清き一票(応援クリック)お願いします!
にほんブログ村 その他生活ブログ 借金・借金苦へ