LION BLOGのカスタマイズ。CSS追加で見出しやマーカーのデザインを変更する方法。

LION BLOGのカスタマイズ。CSS追加で見出しやマーカーのデザインを変更する方法。

高機能なのに無料のWordPressテーマ、LION BLOG。そのままのデザインで利用しているのもいいですが、少しはカスタマイズも楽しみたいところ。初歩的なブログのカスタマイズ、見出しやマーカーのデザインを変更してみましょう。

LINO BLOGをカスタマイズして楽しむ

WordPressの楽しみの一つはテーマを好きなようにカスタマイズすること。LION BLOGは初期状態でも満足のいくデザインですが、ちょっとは変更してみたいです。ブログでまずカスタマイズしたくなるので、見出しです。見出しのデザインを変えるだけで、雰囲気はガラッと変わります。

次に変更してみたいのが、マーカー。マーカーは記事内で多用するので、気に入ったデザインを使用したいです。今回は見出し、マーカー共にCSS追加でカスタマイズしてみます。

CSS追加の前にWAF機能をOFF

CSS追加してカスタマイズする前にサーバーのWAF機能をOFFにする必要があります。ロリポップのサーバーは前に記事にしてあるので、参考にしてください。他のサーバーはセキュリティを確認してください。


Advertisement

カスタマイズは子テーマで

CSS追加のカスタマイズは子テーマで行います。LION BLOGならLION BLOG Childです。親テーマのCSSもテーマの編集から変更できますが、アップデートした際に変更が消えてしまいます。親テーマのCSSはあくまで確認用です。

CSS追加しなくとも見出しは選べる

見出しを変更するには、「投稿スキン設定」をクリックします。ちなみに、見出しのカスタマイズですが、LION BLOGはCSS追加をしなくても、16種類のデザインが用意されているので、それを使用しても十分オリジナルなデザインになります。

カラーA(背景)とカラーB(文字)も変えることができます。CSSが苦手、まだ早いという人は16種類のデザインから選びましょう。

見出しのデザインをCSS追加で変更

16種類のデザインじゃない見出しにカスタマイズしたい際はCSS追加になります。やり方は簡単で、見出しのデザインを「00.オリジナルの見出しを作成」を選び、「オリジナル見出しをCSSを入力」にCSSを入力するだけです。

 

入力する際は下記のように入力します。

.content h2{ デザイン部分 }
.content h3{ デザイン部分 }

重要なのは前に.contentを付けることです。

 

見出しデザインの参考サイト

どのサイトでも紹介されていますが、サルワカさんの記事は非常に使えます。コピペだけでプロっぽくなります。オススメです。

 

マーカーのデザインを変更

マーカーのデザインはカスタマイズの一番下、CSS追加を選び、入力します。イエローマーカー、ピンクマーカー、ブルーマーカーのCSSは下記です。

ピンクマーカーをただの線や二重線にするには下記のように入力します。

マーカーのデザインは増やすこともできます。増やした場合は<span class=”markerPink”>のmarkerPinkを手動で入力する必要があります。

マーカーデザインの参考サイト

やはりサルワカさんが参考になります。マーカーは見出しほど派手にカスタマイズできないので、色だけ変更がいいかもしれません。

 

CSS追加でデザインはかなり変わる

LION BLOGのカスタマイズはCSS追加でデザインがかなり変わります。好きなデザインにすればブログに愛着も湧きますし、CSSの勉強にもなります。やって損をすることはないので、ぜひ見出しやマーカーのカスタマイズに挑戦してください。