目次
WordPressの見出しを変えたい
私たちは人気のあるWordpressのテーマSimplicity（小テーマ）を使用しています。Simplicityは、初期設定のうちは見出しもシンプルな状態ですが、このまま各記事を載せる時には少しイメージが弱いのではないかと思いました。このSimplicityは、後から自分の好きなスタイルやデザインへ変更・追加をしやすいメリットが沢山あります。私個人として、特に記事の見出しとサイドボードの見出しの部分を何とかオシャレにしてみたかったのです。今回は投稿の見出しについてです。
見出しをコピペで簡単にカスタマイズ
同じSimplicityを利用した各サイトのうち、オシャレで可愛いサイトがいくつかあり、とても羨ましいと思いました。ヘッダーや背景、見出し、SNSボタン、カテゴリーボタンなど、初期状態では考えられない独自のデザインに圧倒されるものばかりです。ダンナと一緒にどうすれば思い通りにカスタマイズができるのだろうかと。他の分かりやすい人気サイトなど参考にしながら試行錯誤をしました。その結果、私たちのような素人でも簡単にオリジナルが作れてしまうのです。それは初心者向けにコピペするだけで簡単にカスタマイズがしやすい、親切なサイトがあるからです。いくつかご紹介させていただきます。
♡おすすめサイト♡
- 第0版 CSSのみで作る見出しデザイン10個
- ひたすら楽してネットで稼ぐ。 Sinmplicityの見出しをカスタマイズしよう。コピペでできる5つのデザインを紹介
- ショップハンター CSSでかっこいいｈタグをつくろう
- Nx World シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のサンプルデザイン50
CSSコピペによって以下のように出来ました！
上記、ご紹介をしました”おすすめサイト”のうち、お気に入りCSSデザインをコピーした後、自分のWordpressのカスタマイズにあるテーマの編集『スタイルシート（style.css）』へペーストをしてファイルを更新するだけです。
※h3については、投稿内容によって見出しデザインを使い分けているためデフォルトのままです。
h2とh4のみCSSコピペでカスタマイズしたもの。
h2 花模様入り見出しCSS
/* 記事の花模様入りの見出しh2*/
h2{
padding: 10px 10px 10px 60px;
color: #D04255;
position: relative;
}
h2:before{
content: '＊*';
color: #FFF;
text-shadow: 0 0 5px #EAA8BF, 0 0 0.5px #EAA8BF;
font-size: 30px;
font-weight: bold;
margin-right: 10px;
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
}
h2:after{
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
border-bottom: 2px dotted #EAA8BF;
}
h4 ピンク色の四角ワンポイント見出しCSS
/* 可愛い四角のワンポイント見出しh4*/
.article h4 {
border-left: 15px solid #ff99cc;
border-bottom: 0px;
padding: 5px 0 5px 10px;
margin-bottom: 30px;
}
h3見出しのデザインについて
私の場合、ｈ3見出しについては投稿内容によって使い分けます。『Cafe』『料理』などその他で、そのタイトルやジャンルにぴったりのデザインにしています。例えば、『Cafe』なら落ち着いた茶系の色、『料理』なら食欲が注ぐようなオレンジ系にしています。これらを自由に変えることの出来るプラグインがあることをダンナが見つけてくれました。
Post Snippets
WordPresseのプラグインにPost Snippetsというものがあり、私たちをこれをよく使用しています。下記の図はPost Snippetsを使い、先程ご紹介しました”おすすめサイト”のうち、お気に入りｈ3見出しデザインのCSSをコピペして完成したものです。
詳しい使い方は次の参照をみて、作ってみて下さい。とても簡単です。
[su_label type=”info”]参照[/su_label]
あとがき
投稿の見出しだけではなく、サイドバーの見出しや投稿日時のバーにもお気に入りCSSをコピペすることによってお好みのデザインへカスタマイズが出来てしまいます。これについては次回にしたいと思います。また、Wordpressのカスタマイズにあるテーマ編集『スタイルシート』へすでに貼り付けたお気に入りデザインのCSSをさらに自分で色やサイズの調整も可能です。CSSのお好みカラー一覧などは、おすすめサイト中から見つけることが出来ます。
