さて、今日もカスタマイズ記事をお届けします。
はてなブログの記事をひとつひとつを枠線で囲うカスタマイズです。
探していたけどなかなかなかったので、自分で作ってみました。
あっという間にできて簡単だったので、みなさんもぜひやってみてください。
カスタマイズ
さっそくカスタマイズしていきます。
カスタマイズコード【コピペOK 】
コードは以下の3行で終わり。
.archive-entry{
border: 1px solid ;
}
カスタマイズ場所
上のコードを下の場所に貼り付けてください。
ダッシュボード→デザイン→スパナマーク→デザインCSS
ダッシュボード→デザイン
カスタマイズ（スパナマーク）
デザインCSS
この赤枠にコードをペーストします。
カスタマイズ結果
カスタマイズ結果はこんな感じ。
一つ一つの記事がはっきり目立ち、存在感が出てきます。
ひとつひとつの記事が枠線に囲まれていると思います。
Before
After
使用しているテーマ
当ブログでは、テーマ【UnderShirt】を使用しています。
コード解説
はてなブログでは、記事のclassは「.archive-entry」となっています。
.archive-entry｛
｝
の｛｝内にコードを書いていくことになります。
細い線の枠を付ける
border
で枠線が指定されます。
枠線の太さ
１pxでは枠線の太さを指定しています。
太さはpx数を１ずつあげてお好みで調整してください。
枠線の色を指定する
今回はしていませんが、枠線の色を指定することも可能です。
.archive-entry{border: 1px solid #○○○○○○ ;
}
赤字の「#○○○○○○」の部分に好きな色を指定してあげれば変わります。
色探しはこちらのHPが秀逸です。
カスタマイズで見やすいTOPページを
以上が記事一覧のカスタマイズです。
おしゃれでなおかつ、みやすいTOPページを心掛けたいですね。
それでは。
その他のカスタマイズ
その他にもカスタマイズ記事ありますので、よかったら参考にしてください。
はてなスター機能を残したまま非表示にする
記事一覧のカスタマイズ
記事一覧を大きなカード型へ
記事を枠線で囲む
選択した記事を透けさせるカスタマイズ
サイドバーをカスタマイズ
サイドバーを見やすくする