こんにちは。本日はWordPressで更新しているブログの特定の記事のみ見出しデザインを変える方法を書いてみたいと思います。
ブログを運営したり、ウェブサイトで記事を更新していると「この記事のデザインだけ他のページと変えたいな」なんて思うことはないでしょうか？
このブログみたいに雑記を綴っていると、この記事はカチッとした色合いで、この記事はあったかい感じにしたい…とか思うことがあります。
そんな時、hタグなどの見出しを変えてあげるだけでグッと印象が変わります。
例えば僕のブログの場合、次の２つの記事ではh3見出しの色が変わっています。
青色見出しデザイン
宇宙兄弟の名言まとめ！夢を応援してくれる言葉
赤色見出しデザイン
《大阪》梅田駅周辺で打ち合わせやミーティングに使えるカフェ７選！
この場合は単純に色だけですが、いろいろデザインを変えると更新も楽しいですし、読者の方に与えたい印象なんかも柔軟に操作できますよね。
導入方法は簡単で、数分あれば実装可能です。
WordPressプラグイン「Custom CSS and JS」
実際にどのようにして個別の記事の見出しにCSSを指定していくかということなんですが、今回はプラグインの「Custom CSS and JS」を使いました。（他にもたくさん方法はググれば出てきますがひとまず）
このプラグインは個別の記事や固定ページで、そのページのみに適用される「CSS」や「JS」を書き込むことのできるプラグインです。
使用方法としては以下の流れです。
１）Custom CSS and JSをインストール
２）投稿ページのカスタムフィールドに「custom_css_code」という名前でcssを追記
フィールド名に下の一行を入れて、右側の空欄に追記したいcssを書き込みます。
custom_css_code
以上で個別の記事へのcssが追記できます。見出しのデザインを変えたい場合はh2やh3にcssを追記してあげれば良いというわけですね。
ちなみに上の写真の例では下記の内容のcssを追記してます。赤色のh2タグ表示のためのcssです。ご参考までに。
.single .entry-content h3{ border-left:3px solid; border-left-color:#ff7fbf; background-color:#fff4f9; padding:0.7em; margin-top:40px; }
おわりに
以上、「」についてでした。実装自体はほんとに簡単にできます。ふと「この記事だけちょっとcssいじりたい」と思った時に使ってみてはいかがでしょうか。
見出しのデザインについてコピペで実装できるcssコードの載っている記事がありましたので、こういう記事を参考にしていじってみてはいかがでしょうか。
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50
それでは、本日もここまでお読みいただきありがとうございました。楽しいブログ運営ができると良いですね。また何か役に立つスキルなどありましたらぜひぜひ情報交換させていただければ嬉しいです。今後ともどうぞよろしくお願いします。
コメント