効率165センチメートル

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

【コピペ】はてな記事一覧のカスタマイズ。一枚の大きなカードへ【UnderShirt】

f:id:k07_20:20191006112020j:plain

 はてなブログの記事一覧、いじっていますか?

 

このブログでは、流行りのカード型にしています。

 

これはこれで気に入っているのですが、

やっぱりドーンと大きい一枚のカード型もおしゃれだなあと思い、カスタマイズしてみます。

 

カスタマイズ準備

カスタマイズイメージ

カスタマイズイメージはこんな感じ。

一つ一つの記事が大きく目立ち、存在感が出てきます。

 

Before

 

f:id:k07_20:20191006111717p:plain

After

f:id:k07_20:20191006111708p:plain

 

使用しているテーマ

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

blog.hatena.ne.jp

カスタマイズ場所

カスタマイズ場所は以下の通り。

 

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

 

f:id:k07_20:20191005180659p:plain

 

f:id:k07_20:20191005180656p:plain

 

f:id:k07_20:20191005180658p:plain

この赤枠にコードをコピペ

 

カスタマイズ

さて、それでは実際に行っていきます。

 

といっても、以下のコードをコピー&ペーストで完了です。

コピペコード

 

.archive-entry{

width:100%;
}

 

さて、OKでしょうか?

イメージ通りになった方は、すぐに戻り、記事を書きましょう。

 

興味のある方は、解説も見ていってください。

 コード解説

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

 

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

記事を幅いっぱいに

「width:100%」で一覧表示の記事の横幅いっぱいに表示させているということです。

 

記事一覧をもっとカスタマイズ

オプションでこういったものもおすすめです。

 

文字を中央寄せに

text-align:center;

記事一覧のタイトル・説明文の文字が中央寄せになります。

デフォルトでは左づめになっているので、雰囲気が変わりますね。

 

これを指定していない場合は左づめとなっています。

 

高さを調整

height:〇〇px

これは一覧表示の際の1記事の高さです。

○○のところには50ずつくらい数字を入力して、お好みに合わせてください。

 

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

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

 

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

 

それでは。

その他のカスタマイズ

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

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

www.165-cm.com

記事一覧のカスタマイズ

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

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

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

www.165-cm.com

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

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

www.165-cm.com