記事タイトルをカスタマイズする
このブログでは、テーマにSTINGER3を使用しておりますが、記事タイトル部にカスタマイズを施しております。
記事タイトル部とは、この記事の最初「記事タイトルのカスタマイズ(stinger3)」と書かれている部分です。
↓もともとは、こんな感じです
文字が大きくなるだけで、特に装飾されているわけではありません。
これを、今の形にカスタマイズした中身を公開いたします。
カスタマイズの方法
まず、カスタマイズの方法ですが、これはテーマの編集で行います。
テーマのスタイルシートを改造することにより、カスタマイズできます。
jetpackを入れている方は、「外観⇒CSS編集」からの変更が便利です。
スタイルシート内、entry-titleと書かれているところが該当箇所ですが、ここを上書き変更する必要はありません。
スタイルシートの特性上、より後に書かれた記述が優先される仕組みになっているため、スタイルシートの最後に書き加えれば大丈夫です。
こうしておけば、カスタマイズの結果が気にくわない時は、追加したものを消せば、元の表示に戻るので安心して変更できます。
カスタマイズコード
実際に私がカスタマイズしたコードを下記記載いたします
/* 記事タイトルのカスタマイズ */
.entry-title {
text-shadow: -.1px -.1px 0 #000000, .1px -.1px 0 #000000, .1px .1px 0 #000000, -.1px .1px 0 #000000;
margin-right: -10px;
margin-left: -10px;
padding: 20px 10px 7px;
border-bottom: ridge 5px #3cb371;
background-image: url(https://ここに画像のURL.gif);
background-repeat: no-repeat;
background-color: #ffc;
background-position: left center;
padding-left: 50px;
margin-left: -10px;
margin-right: -5px;
box-shadow: 0 12px 0 0 #ffc, 5px 17px 4px -3px rgba(0,0,0,0.2);
}
なお、このコード中のbackground-image url は、適宜画像のURLを入力いただければと思います。（この記事執筆時点では、マイケルがくるくる回っています）
他、各種パラメータ値をいろいろ変えてみて、ご自分のデザインを模索してみるのもオススメです♪
いつも応援頂きありがとう御座います
あなたに幸運が訪れます様に♪
