【はてなブログ】最新記事、関連記事、注目記事を2列表示にカスタマイズする方法【簡単】

こんにちは祐(@yuu30810)です。

 

今回は『最新記事、関連記事、注目記事を2列表示にカスタマイズする方法』について、解説していきます。

 

下記が完成イメージです⇩

 

f:id:yuu304810:20210316132746j:image

 

とくに難しい作業は必要なく、コピペと、画像サイズを多少イジる程度で可能です。

 

ぜひ参考にしてみてください。

 

この記事で得られる情報

・最新記事、関連記事、注目記事を2列表示にする方法
・画像やタイトルが見切れてしまったときの対処法
・画像サイズの変更の方法

 

2列表示するまでの手順

 

①ダッシュボードの【デザイン】を選択

 

f:id:yuu304810:20210316131251j:image

 

②【スパナマーク】→【デザインCSS】の順で選択し、これから紹介するコードを枠内に貼り付ける

 

f:id:yuu304810:20210316131314j:image

 

2列表示にするCSSコード

 

.urllist-with-thumbnails {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.urllist-with-thumbnails li {
width: calc( 50% - 5px);
}
.urllist-with-thumbnails li:nth-child(2n) {
margin-left: 10px;
}
.urllist-with-thumbnails li .urllist-image {
margin: 0 0 4px;
}

 

上記のコードを、デザインCSSに貼り付けます。

 

これだけで、おおまかな作業は完了です。

 

当ブログでは、人気記事と、関連記事しか表示していないのですが、最新記事でも問題なく反映します。

 

◆注意点◆ お使いのテーマや、既存のCSSの干渉により、うまく表示できない場合がございます。

 

f:id:yuu304810:20210305065148p:plain
お姉さん
レスポンシブ設定なのですが、スマホのみ2列表示は可能ですか? 
可能ですよ。
下記のコードをコピペしてください。 
f:id:yuu304810:20210305065242p:plain

 

スマホのみ2列表示にするCSSコード

 

@media (max-width: 767px){
.urllist-with-thumbnails {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.urllist-with-thumbnails li {
width: calc( 50% - 5px);
}
.urllist-with-thumbnails li:nth-child(2n) {
margin-left: 10px;
}
.urllist-with-thumbnails li .urllist-image {
margin: 0 0 4px;
}
}

 

スマホ表示のみ2列にし、PC表示では1列のままにしたい方は、上記のコードをデザインCSSに貼り付けてください。

 

個別で表示の仕方を設定したい場合

 

最新記事や、注目記事、関連記事すべてに表示したいわけでなく「一部だけ2列表示したい」という方は、上記のCSSの.urllist-with-thumbnails部分を下記のセレクタに書き換えてください。

 

最新記事→.recent-entries

関連記事→.related-entries

注目記事→.entries-access-ranking

 

上記の通りに書き換えることで、それぞれの表示の仕方を調節することができます。

 

画像サイズの設定方法

 

恐らくコードを貼っただけの現段階では、画像が見切れてしまっていたり、タイトルのバランスが悪くなっていたりすると思います。

 

僕は、下記のようなデザインになっていました。

 

f:id:yuu304810:20210316152113j:image

 

というわけで、デザインを整えていきましょう。

 

画像サイズの変更手順

 

①ダッシュボードの【デザイン】を選択

 

f:id:yuu304810:20210316131836j:image

 

②【スパナマーク】→【サイドバー】の順で選択し、2列表示に設定した【関連記事(例)】を選択

 

f:id:yuu304810:20210316131802j:image

 

f:id:yuu304810:20210316132456j:image

 

デフォルトでは、画像サイズが100×100の正方形になっているので、お好みで調節します。

 

当ブログは170×105に設定しました。

 

f:id:yuu304810:20210316152128j:image

 

上記のようなデザインになり、完成です。

 

少しでも参考になれば嬉しいです。

 

 

参考元:https://www.fuji-blo.com/entry/hatena-module-2column

トップへ戻る