ブログ運営

Simplicuty2での見出し変更で困っている人へ

こんにちは。見出し改造マンのコバヤシモンドです。

 

コバヤシはwordpressを使ってブログサイトを運営しているのですが、テーマは「Simplicity2」を使用しております。

 

 

使い勝手もよく初めから便利な機能をたくさんつけてくれています。初心者から上級者までがっつり使い倒せるテーマだと思います。

 

これを無料で提供してくれている作者のわいひらさんはオリンポスの神々の一柱に列せられてもよいレベルではないでしょうか。

見出しのデザイン変更に挑戦

はじめの挑戦

そんな文句なしのSimplicity2ですが、コバヤシも初心者ながら見出しのデザインくらいは変更したいと思いました。h3の見出しを例とします。

デフォルトのデザイン

 

これが通常のデザインですね。これを初心者のくせに小賢しく変更しようとしたわけです。

 

いろいろなデザイン用cssコードを公開してくれているサイトがありますが、今回はこちらのサイトを利用させていただきました。

 

 

こちらのサイトもシンプルかつ文学的というか、素敵なデザインの見出しサンプルを公開してくれています。いや〜、世の中にはいい人たちが溢れているもんですね。

 

それでは、このシンプルな左ボーダーデザインをパクらせてリスペクトにアレンジを加えて応用させていただきます。サンプルの下にあるcssコードをコピペします。

 

ワードプレスのダッシュボードから、外観テーマの編集へ(カスタマイズ→追加cssでも可)

 

 

先ほどコピペしたcssコードを貼り付けます。コピペ元ではh1タグになっているので、今回の目的であるh3に変更しました。

 

これで更新!

変更、うまくいかず。

 

やってみたけど…

 

…あれ?

左ボーダーはついているけど、もともとのアンダーラインもつきっぱなしです。さらに…

 

関連記事のタイトルにも左ボーダーが…

 

うーん…思い通りにならないもんですな。

 

検証後、再挑戦。

 

コバヤシはcssとかの知識はあまりないのですが、関連記事の方もh3タグが使われているということですね。しかし、アンダーラインはない。

 

つまり、本文のh3には適用されて、関連記事のh3には適用されない別のコードがあるということですね。

 

そこで、他に紹介されているsimplicity2のカスタム例を調べると

.article h3 {

とかになっています。というわけで、マネしてみます。それに、下のボーダーを打ち消すコードも入れてみます。

 

 

さて、これでどうでしょう?

 

変更、成功。

 

無事成功。

あ。できた。

関連記事には影響なし。

 

なんとかうまくいったようです。

 

どうも、本文中の見出しタグはデフォルトで「.article」で囲まれているようですね。だから

.article h3

で本文中のh3にだけ指定のcssが適用されたということでしょうか。

 

ちなみに、h2タグも同様のやり方で無事変更できました。

スポンサーリンク


まとめ Simplicity2の見出しの変え方

Simplicity2テーマで見出しデザインを変えたい時は、

  1. 好みのデザインのcssコードをコピペ
  2. h2,h3などのセレクタを .article h2 またはh3  に変更する。
  3. デフォルトの装飾を打ち消すまたは上書きするコードを追加する。(h3ならborder-bottom: 0 none; で打ち消し)

わかる人にはすぐわかることなのかもしれませんが、コバヤシのようにcssはコピペするものと思っているどシロウトには、コピペだけでできないと小パニックになります。

 

願わくば、コバヤシと同じように困っている人の助けになりますように。。。

 

 

COMMENT

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください