サイドメニューの「最近の記事一覧」を読みやすくする
サイドメニューの「最近の記事一覧」には、最近の記事タイトルが10件並ぶようになっています。
デフォルト設定では、それぞれのタイトルの上下間隔が狭いので、大変見にくくなっています。
タイトルが長いと2行になるので、2行と1行が入り混じってゴチャゴチャな感じです。
【最近の記事一覧 カスタマイズ前】
これにそれぞれの上下間隔をあけてみます。
CSS変更箇所#recent_entries{
}
↓
#recent_entries li{
margin:0.75em 0;
}
上下の余白を0.75em分とっています。
emというのは、文字を基準とした単位で、0.75文字分になります。
例えばここの文字サイズの設定が12pxだとしたら、9pxの間隔があくことになります。
marginというのは指定した領域の外側の余白にあたる部分です。
上下に設定したら下の余白0.75emと上の余白0.75emを足したら1.5emになるんじゃないの？と思われると思いますが、marginの余白は相殺されるので0.75emになります。
【最近の記事一覧 カスタマイズ後】
ヘッダーのブログタイトルをテキストから画像にカスタマイズ
ブログに訪れた時に最初に目がいく部分でもある、ブログタイトルをテキストから画像へとカスタマイズします。
【ブログタイトルカスタマイズ前】
【ブログタイトルカスタマイズ前】
まず、最初にタイトル画像を作成し、画像フォルダにアップロードしてURLを取得しておきます。
ブログのタイトル部分はh1にあたりますので、h1のaタグに関するCSSを追記します。
リンク部分の背景として画像を表示させ、テキストにはマイナスのインデントをかけます。
#header h1 a{
text-indent:-9999px;
display:block;
width:350px;
height:30px;
background:url(タイトル画像のURL) no-repeat;
overflow:hidden;
}
この時displayでblock要素とし、width（幅）、height（高さ）で画像の表示領域を確保します。
overflow:hidden; というのは、その幅、高さからはみ出した部分を表示しないという記述です。
マイナスインデントをかけているのでリンクの枠線が左いっぱいまで広がってしまうため、
この記述を入れます。
ブログ記事の画像をポラロイド風にカスタマイズ
【画像枠カスタマイズ前】
【画像枠カスタマイズ後】
CSS変更箇所
.entry .contents a img{
margin-right:5px;
margin-left: 5px;
border: 1px solid #ccc;
border-right-width:3px;
border-bottom-width:2px;
padding: 15px 10px 40px;
}
ただし、このままだと
記事（エントリー）エリアにあるリンクのある画像全てに枠線がついてしまうため
ペタおねだりボタンなどは個別に設定が必要です。
例えば、よく使いまわすペタボタンなどに「peta」など独自のclass指定をしてあげます。
そして以下のCSSを追記します。
.entry .contents a img.peta{
border:0;
margin:0;
padding:0;
}
そして記事編集画面の「HTMLタグを表示」タブのほうでペタボタン部分を編集します。（classを追加）
この記述を追加することでペタボタンにもついてしまうボタンの枠線も消すことができます。
<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=●●●●&guid=ON">
<img height="50" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_09.gif " width="150" /></a>
↓
<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=●●●●&guid=ON">
<img height="50" alt="ペタしてね" src="http://stat.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_09.gif " width="150" class="peta" /></a>
※●●●●は、アメーバIDです。