2015年5月7日

投稿タイトルの色など、スタイルを変更する。

スポンサードリンク

 投稿タイトルの背景や、カーソルを合わせた時の動作を
指定します。

タイトルはある程度目立った方が、
ユーザーが分かりやすいのではないかと思います。


投稿のタイトルにCSSを指定


 テンプレートの中から、

<h3 class='post-title entry-title' itemprop='name'>

を探します。

これを

<h3 class='post-title entry-title' itemprop='name' title='この投稿を読みたい!'>

にしました。


 カーソルを合わせた時に、

「この投稿を読みたい!」が表示されます。


 つまり、これは投稿記事なのだと、
分かりやすくなりました。

リンクにタイトルをつけるのは、
コレ以外でもよく使います。

でも、色々つけすぎると
それはそれで見にくくなってくるので、
程よくに留めておきます。



 投稿タイトルは、テンプレート上でh3です。
他のブログサイトではh2の場合もあるのではないでしょうか?

まぁ、色々あるんですよね。
Bloggerでは、h3であるようです。



 ではCSS内の
post-title を見てみましょう。


h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
  border-bottom: 1px dotted #4e2800;
  padding: 0px 5px 5px 5px;
  background-image: url(好きなアイコン等のURL) ;
  background-repeat: no-repeat;
}


 このようになっています。
細かい指定は、テンプレートによって違います。



 フォントと色は、
テンプレートデザイナーで指定したものが入ります。

今回は、それ以外に追加しました。


 実際の自分のサイトを見ながら、要素をチェックして、
どこのCSSを変更したいのかを調べると
簡単にデザインできます。


 せっかくなので、
投稿タイトル以外も
色々いじってキレイにしたいですね。

見栄えを良くすると、
きっとまた訪問してくれる方が増えていくと思います。

頑張りましょう。



 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク