投稿の見出しデザインはCSSコピペでカスタマイズ

WordPressの見出しを変えたい

私たちは人気のあるWordpressのテーマSimplicity(小テーマ)を使用しています。Simplicityは、初期設定のうちは見出しもシンプルな状態ですが、このまま各記事を載せる時には少しイメージが弱いのではないかと思いました。このSimplicityは、後から自分の好きなスタイルやデザインへ変更・追加をしやすいメリットが沢山あります。私個人として、特に記事の見出しとサイドボードの見出しの部分を何とかオシャレにしてみたかったのです。今回は投稿の見出しについてです。

 見出しをコピペで簡単にカスタマイズ

同じSimplicityを利用した各サイトのうち、オシャレで可愛いサイトがいくつかあり、とても羨ましいと思いました。ヘッダーや背景、見出し、SNSボタン、カテゴリーボタンなど、初期状態では考えられない独自のデザインに圧倒されるものばかりです。ダンナと一緒にどうすれば思い通りにカスタマイズができるのだろうかと。他の分かりやすい人気サイトなど参考にしながら試行錯誤をしました。その結果、私たちのような素人でも簡単にオリジナルが作れてしまうのです。それは初心者向けにコピペするだけで簡単にカスタマイズがしやすい、親切なサイトがあるからです。いくつかご紹介させていただきます。

♡おすすめサイト♡

CSSコピペによって以下のように出来ました!

上記、ご紹介をしました”おすすめサイト”のうち、お気に入りCSSデザインをコピーした後、自分のWordpressのカスタマイズにあるテーマの編集『スタイルシート(style.css)』へペーストをしてファイルを更新するだけです。

自分で試して作ってみた見出し

※h3については、投稿内容によって見出しデザインを使い分けているためデフォルトのままです。

h2とh4のみCSSコピペでカスタマイズしたもの。

h2 花模様入り見出しCSS
h4 ピンク色の四角ワンポイント見出しCSS

h3見出しのデザインについて

私の場合、h3見出しについては投稿内容によって使い分けます。『Cafe』『料理』などその他で、そのタイトルやジャンルにぴったりのデザインにしています。例えば、『Cafe』なら落ち着いた茶系の色、『料理』なら食欲が注ぐようなオレンジ系にしています。これらを自由に変えることの出来るプラグインがあることをダンナが見つけてくれました。

Post Snippets

WordPresseのプラグインにPost Snippetsというものがあり、私たちをこれをよく使用しています。下記の図はPost Snippetsを使い、先程ご紹介しました”おすすめサイト”のうち、お気に入りh3見出しデザインのCSSをコピペして完成したものです。

3h見出しデザイン

詳しい使い方は次の参照をみて、作ってみて下さい。とても簡単です。

参照

あとがき

投稿の見出しだけではなく、サイドバーの見出しや投稿日時のバーにもお気に入りCSSをコピペすることによってお好みのデザインへカスタマイズが出来てしまいます。これについては次回にしたいと思います。また、Wordpressのカスタマイズにあるテーマ編集『スタイルシート』へすでに貼り付けたお気に入りデザインのCSSをさらに自分で色やサイズの調整も可能です。CSSのお好みカラー一覧などは、おすすめサイト中から見つけることが出来ます。

にほんブログ村 ライフスタイルブログへ
にほんブログ村
PVアクセスランキング にほんブログ村