効率165センチメートル

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

【コピペOK】はてなブログの記事一覧の文字を中央寄せ【カスタマイズ】

f:id:k07_20:20191020101130j:plain

今日はカスタマイズ記事をお届けします。

 

ブログの記事一覧の文字を中央寄せにするカスタマイズです。

 

デフォルトでは左づめになっていますので、中央寄せにすると結構印象が変わります。

 

今回もコピペで簡単にできます。みなさんもぜひやってみてください。

 

カスタマイズ

それではカスタマイズをしていきます。

 

まずはカスタマイズ完成図から。

カスタマイズ結果

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

 Before

f:id:k07_20:20191020095633p:plain

After

f:id:k07_20:20191020095637p:plain

Beforeでは、タイトルや日付やブクマなど全部左詰めですが、

Afterではすべて中央寄せになっていますね。

 

好みの話かもしれませんが、

個人的にはバランスが良くてAfterのほうが好きですね。

コード【コピペOK】

コードは以下の通り。

 

コピペOKです。

 

.archive-entry {
text-align:center;
}

 

カスタマイズ場所

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

 

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

 

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

f:id:k07_20:20191019092610p:plain

 

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

f:id:k07_20:20191005180656p:plain

 

デザインCSS

f:id:k07_20:20191019092600p:plain

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

使用しているテーマ

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

blog.hatena.ne.jp

コード解説

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

 

.archive-entry の{}内にコードを書いていっています。

中央寄せにする

以下のコードで中央寄せを意味しています。

 

text-align:center;

 

アクセントのある記事を

以上が、記事一覧の記事一覧の文字を中央寄せに変えるカスタマイズです。

 

バランスを意識するだけで、サイトの見栄えがグンと変わりますね。

その他のカスタマイズ

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

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

www.165-cm.com

記事一覧のカスタマイズ

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

www.165-cm.com

 

記事を枠線で囲む

www.165-cm.com

 

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

www.165-cm.com

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

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

www.165-cm.com