効率165センチメートル

ちいさな体で効率的に生きていく

【コピペ】はてなブログ記事一覧を枠線で囲む【カスタマイズ】

f:id:k07_20:20191010233118j:plain

さて、今日もカスタマイズ記事をお届けします。

 

はてなブログの記事をひとつひとつを枠線で囲うカスタマイズです。

探していたけどなかなかなかったので、自分で作ってみました。

 

あっという間にできて簡単だったので、みなさんもぜひやってみてください。

カスタマイズ

さっそくカスタマイズしていきます。

 

カスタマイズコード【コピペOK 】

コードは以下の3行で終わり。

 

.archive-entry{
border: 1px  solid ;
}

 

カスタマイズ場所

上のコードを下の場所に貼り付けてください。

 

ダッシュボード→デザイン→スパナマーク→デザインCSS

 

ダッシュボード→デザイン

f:id:k07_20:20191019092610p:plain

 

カスタマイズ(スパナマーク)

f:id:k07_20:20191005180656p:plain

 

デザインCSS

f:id:k07_20:20191019092600p:plain

この赤枠にコードをペーストします。

カスタマイズ結果

カスタマイズ結果はこんな感じ。

一つ一つの記事がはっきり目立ち、存在感が出てきます。

 

ひとつひとつの記事が枠線に囲まれていると思います。

Before

f:id:k07_20:20191011224249p:plain

After

f:id:k07_20:20191011224255p:plain

使用しているテーマ

当ブログでは、テーマ【UnderShirt】を使用しています。

blog.hatena.ne.jp

コード解説

はてなブログでは、記事のclassは「.archive-entry」となっています。

 

.archive-entry{

 

 

の{}内にコードを書いていくことになります。

細い線の枠を付ける

border

 

で枠線が指定されます。

枠線の太さ

1pxでは枠線の太さを指定しています。

太さはpx数を1ずつあげてお好みで調整してください。

枠線の色を指定する

今回はしていませんが、枠線の色を指定することも可能です。

 

.archive-entry{

border: 1px  solid #○○○○○○ ;
}

 

赤字の「#○○○○○○」の部分に好きな色を指定してあげれば変わります。

 

色探しはこちらのHPが秀逸です。

www.colordic.org

カスタマイズで見やすいTOPページを

以上が記事一覧のカスタマイズです。

 

おしゃれでなおかつ、みやすいTOPページを心掛けたいですね。

 

それでは。

その他のカスタマイズ

その他にもカスタマイズ記事ありますので、よかったら参考にしてください。

 はてなスター機能を残したまま非表示にする

www.165-cm.com

記事一覧のカスタマイズ

 記事一覧を大きなカード型へ

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

 選択した記事を透けさせるカスタマイズ

www.165-cm.com

 サイドバーをカスタマイズ

サイドバーを見やすくする

www.165-cm.com