目立っていて気に入っています。
投稿タイトル部分だけ白にしたり、
明るくすると文字が読みやすいかもしれません。
投稿タイトルに色をつける
ということで、早速やってみましょう。
ブログ作成初心者でもできます。
他の文字の背景を変える際にも、
応用できると思います。
まずはテンプレートを開きます。
テンプレート編集へいきます。
h3.post-title
を探します。
このコードがCSS内にいくつかあります。
h3には
色々なCSS指定がされているわけですね。
その中で、
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
background-color: ;
border-radius: 5px;
padding: 1px 10px;
}
を見てみましょう。
h3.post-title a {
で探してみてください。
おそらくこのコードで見つかると思いますが、
テンプレートによって少し違っていたらすみません。
background-color: ; は背景の色、の意味。
こちらに
#FFFFFFを指定します。
これで背景が白になります。
テンプレートの色によって、
見やすいように変えてみてくださいね。
また、
padding: 1px 10px;
で背景の表示位置を指定できます。
つまり白くした部分を、ちょっと上下に広くしたり、
左右に広くしたり。
ついでに、
h3.post-title a:hover {
color: $(link.hover.color);
text-decoration: underline;
}
がすぐ下にあるかと思います。
なければ
h3.post-title a:hover {
で検索してみてください。
こちらの
text-decoration: underline;
についても変更できます。
underline はお好みで無くす事もできます。
通常リンクは、カーソルをあてると
下線が表示されますが、
それが気になるようであれば無くすのもOK。
私はそのままにしています。
アイコンを投稿タイトル前に設置する
さらに、
h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color);
border-bottom: 1px dotted #4e2800;
padding: 0px 5px 10px 15px;
background-image: url(https://) ;
background-repeat: no-repeat;
を見てみましょう。
h3.post-title, h4 {
で検索するとあると思います。
background-image: url(https://) ;
background-repeat: no-repeat;
のところに、URLを入力すれば、
タイトル前にアイコンを表示できます。
私のサイトではピンク色の棒みたいのがあります。
これはフリー素材のものです。
それを、ペイントで編集して
アレンジしています。
ウサギのイラスト等もあったのですが、
ダウンロード後、ペイントで編集をする時が
結構大変だったので、
シンプルなものを使っています。
ということで、投稿タイトルをキレイにすることができました。
難しそうに思いましたが、
色々できました。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク