THE THOR のウィジェット [THE] 画像付き新着記事 をカスタマイズ。
[THE]画像付き新着記事は、新着記事を横幅いっぱいに表示することができます。
個人的に画像が大きすぎると感じました。特にPC表示で横幅いっぱいはかなりの大きさです。
画像が大きくてインパクト大！
好みの問題だな。
この記事ではCSSを使いウィジェット[THE]画像付き新着記事を横幅半分(約50%)にして2列表示に変更します。
※[THE]カテゴリ人気記事にも反映されます。
※追記1：最初の記事を1列で表示する方法を追記しました。
※追記2：メインカラムのみに適用させる（サイドカラム適用外）
※追記3：PC表示で3列にする場合を追記しました。
THE THOR
[THE] 画像付き新着記事 ウィジェットを2列表示
![THOR [THE]画像付き新着記事 2列](https://karaagebow.com/wp-content/uploads/2020/04/wi_new2.jpg)
2列表示にするには追加CSSを利用。
外観 → カスタマイズ → 追加CSS
追加CSSに以下のコードをコピペすると上記画像のような表示になります。
/* TOP新着記事の枠 */
/* TOP新着記事二分割 */
.widgetArchive {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li.widgetArchive__item{
width:calc(50% - 6px);
text-align: center;
background-color: #fff;
box-shadow: 0px 1px 3px 0px #ccc;
margin-bottom: 12px;
padding-bottom: 4px;
}
.widgetArchive .heading a{
font-weight: 400;
padding:0 4px;
}
※カスタマイズは自己責任でお願いします。
補足
2列表示をするメインのCSSは以下の通りです。
これ以外の部分は装飾なのでお好みに合わせて数値を変更したり行ごと削除してください。
.widgetArchive {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li.widgetArchive__item{
width:calc(50% - 6px);
}
横幅50％から6px引いた幅、
つまりカード間は12pxだ。
装飾変更サンプル
![THOR [THE]画像付き新着記事 装飾サンプル](https://karaagebow.com/wp-content/uploads/2020/04/wi_new2sample.jpg)
こんな表示も可能！
最初の記事だけ1列で表示する方法（追記）
コメントより質問を頂きましたので追記します。
2020年9月現在の当サイトでは、[THE]画像付き新着記事ウィジェットの 1記事目を大きく表示、2記事目以降は2列表示にしています。参考画像を御覧ください。
一番最初の記事だけ大きく表示しています。同じ大きさの画像が並んで単調にならないようにしつつ、一番最新/一番人気の記事を目立たせる配慮です。注意点としては記事数が奇数になるよう調整が必要です。
最初の記事だけ大きく表示するには以下のCSSを追加してください。
li.widgetArchive__item:first-child{
width:100%;
}
メインカラムのみに適用（追記）
またまた質問をいただきました。
もともとこのカスタマイズは他の記事一覧にも影響を及ぼすものでウィジェット[THE]画像付き新着記事のみに適用させるとこができません。「他の記事一覧に適用されても問題ない。むしろ一括で出来て便利」と考えていましたが、サイドカラムの記事一覧に影響が出ると見辛くなるのが判明（好みによる）メインカラムのみに適用されるようコードを追加しました。
2列表示をメインカラムのみに適用させたい場合は以下のコードを使用してください。
.l-main .widgetArchive {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.l-main li.widgetArchive__item{
width:calc(50% - 6px);
}
/*最初の1記事を大きく表示する場合は以下も記述*/
.l-main li.widgetArchive__item:first-child{
width:100%;
}
装飾が必要な場合は一番最初のコードを参考に適時追加してください。
以上です。
※カスタマイズは自己責任でお願いします。
PC表示で3列にする方法（追記）
質問をいただきました。ありがとうございます。
今回の問い合わせは、PC表示で3列にしたいとのこと。以下のCSSを使用することでPCで3列表示、スマホ(タブレット)では2列表示になります。お試しください。
.l-main .widgetArchive {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.l-main li.widgetArchive__item{
width:calc(50% - 6px);
}
@media only screen and (min-width: 768px){
.l-main li.widgetArchive__item{
width:calc(33% - 6px);
}
＼出来上がりサンプル／
以上です。
※カスタマイズは自己責任でお願いします。
スマホ1列表示 PC＆タブレット2列表示にする方法（追記）
こちらもお問い合わせをいただきました。ありがとうございます。
画像付き新着記事をスマホで1列、PC＆タブレットで2列に表示するカスタマイズです。
1列表示が標準仕様なのでスマホサイズの画面では何もせず、タブレット（ここでは720pxに想定）以上の画面サイズになると2列(50%)表示に変更しています。以下のコードをコピペしてご使用ください。
@media only screen and (min-width: 720px){
.widgetArchive {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li.widgetArchive__item{
width:calc(50% - 6px);
}
}
＼出来上がりサンプル／
-
- スマホ1列表示
-
- PC&TAB 2列表示
以上です。
※カスタマイズは自己責任でお願いします。
あとがき
当サイトではウィジェット[THE]画像付き新着記事をスマホでは1列（標準）、PCでは2列（CSS）で表示していました。
スマホでも2列表示をしたいという問い合わせを頂き、実際に2列表示をテストしたところ若干直帰率が改善されたのでPC/スマホともに2列表示を当サイトで採用することにしました。
質問や問い合わせを頂くとやる気に繋がり改善のきっかけにもなります。皆さんのご意見ご希望をお待ちしています。
コメント
コメント一覧 （27件）
こんにちは。
カスタマイズの記事を有難く参考にさせていただいております。
質問なのですが、ウィジェットの２列表示を「おすすめ記事」で利用させて頂いておりますが、これを記事タイトルを削除してアイキャッチの画像だけでカードのように表示したいです。記事タイトルはアイキャッチに入れているため不要で、画像だけ表示するにはどうしたら良いでしょうか。ご教示お願いいたします。
しまさん、コメントありがとうございます。
記事タイトルや抜粋を非表示にするには
.widget_fit_recommend_post_widget .widgetArchive__contents {display: none;}
で対応が可能です。非表示にしたくない部分も消えてしまう可能性があるのでよくチェックしてみてください。
メインページに2列で特定カテゴリの新着記事を設置できました！有難う御座います。
ところで、トップページではない固定ページに同じように新着カテゴリ記事を表示したいのですが、できますでしょうか？
よせふさん、コメントありがとうございます。
固定ページに新着カテゴリ記事を表示するにはphpのカスタマイズが必要になりますが恐らく可能です。
有難う御座います。
匿名さん、コメントありがとうございます。
役に立ったようでなによりです。
からあげ棒様
いつも大変参考にさせていただいております、ありがとうございます。
早速ですが、今回の記事のあとがきで
’’ 当サイトではウィジェット[THE]画像付き新着記事をスマホでは1列（標準）、PCでは2列（CSS）で表示していました。’’
と書かれておりますが、その方法ってどこかのページに記載されておりますでしょうか？
探したけれど見つからなくて。。。
私は、画像付き新着記事をスマホ1列PC2列にしたくて困っています。
もし記事の場所、もしくは方法を教えていただきたくお願いします。
ゆうさん、コメントありがとうございます。
1列＆2列表示の記事を書いていたつもりでしたが…ありませんでした！
この記事に追記を行いましたのでお試しください。
不具合等あればご連絡ください。よろしくおねがいします。
初めまして、いつも参考にさせていただいております。
ありがとうございます。
カスタマイズで気になってのですが、パソコンでは3列、スマホでは2列のようなカスタマイズも可能なのでしょうか。
宜しくお願い致します。
タバコさん、コメントありがとうございます。
PC3列、スマホ2列も可能だと思います。
画面サイズに合わせて50％と33％を設定すればOKのはずです。
時間があるときに追記したいと思います！
ご返信ありがとうございます。
お忙しいところ恐縮ですが、よろしくお願いします。
遅くなりましたが、追記しました。
まだ需要があればお試しください。
からあげ棒さん
Fukuと申します。別記事の「文字に左右のボーダーを入れる」件については、大変お世話になりました。
今回もご相談にのっていただきたく、ご連絡しました。
当記事の「最初の記事だけ1列で表示する方法」を試したところ、サイドバーに設置した「【THE】人気記事」も最初の
記事だけ1列、あとは2列で表示されるようになってしまいました。
サイドバーの「【THE】人気記事」は「最初の記事だけ1列で表示する方法」を試す前の「1列表示」にしたいのですが、どのようにしたらよいかご存知でしたら教えていただけないでしょうか。
お返事をお待ちしています。
コメントありがとうございます。
人気記事にCSSを適用させないようにコードを追加します。
li.widgetArchive__item｛
のところを
li.widgetArchive__item:not(.widgetArchive__item-rank)｛
に変更してみてください。
正確な検証ができなかったのでもし不具合があればまた連絡をいただけると助かります。
よろしくおねがいします。
お返事ありがとうございます。
ご助言のとおり、
li.widgetArchive__item｛
のところを
li.widgetArchive__item:not(.widgetArchive__item-rank)｛
に変更してみたところ、サイドバーは1列表示になったものの、2つの問題が発生しました。
—
①：メインページの1記事目を大きく表示、2記事目以降は2列表示がされなくなってしまった
②：①の画像とサイドバーの画像の大きさがばらばらになった（同じサイズではない）
—
お手数をおかけしますが、上記2点について改善方法を教えていただけると幸いです。
実際にサイトに同じような状況を作りテストしてみました。
結果、同じような症状を確認することができませんでした。
何か他の要素が絡んでいる可能性があります。
引き続き対策を考えてみますが一旦はこのカスタマイズの使用を停止していただくのをオススメします。
お返事ありがとうございます。
実際にサイトに同じような状況を作りテストしたら、同じような症状を確認することができなかったとのこと、承知しました。
もしかしたら、ボックス型のメニューを作るためのコードを追加cssに追加しているので、この要素が絡んでいるかもしれません。
残念ですが、当記事のカスタマイズの使用を停止し、対策を考えようと思います。
本当にありがとうございました。今後もからあげ棒さんのサイトを参考にさせていただきます。
根本的なところから見直して記事に追記しました。
うまくいく保証はありませんがよろしければお試しください。
はじめまして。私もTHE THORを使っているモノですが、いつも貴サイトを参考にさせていただいてます。
質問なのですが、新規記事を投稿したさいに、この新着記事ウィジェットに表示させないような設定は可能でしょうか？
普通なら投稿すれば自動的に新着記事に表示されますが、特定のカテゴリの記事や特定のIDの記事のみ新着一覧には表示させない、といった設定ができると助かります。
ujiさん、コメントありがとうございます。
標準ではそのような設定はないと思います。
投稿日を過去のものにすればトップページには表示されなくなります。
記事一覧からの削除はphpなどを使わないと難しそうですね。今の私にはできません。
からあげ棒さん、返信ありがとうございます。
やっぱり設定は難しいのですね。
投稿日を変更する方法でも良いですね！
本当にありがとうございました。今後も参考にさせていただきます。
からあげ棒さんありがとうございました。
『[THE] 画像付き新着記事 ウィジェットを2列表示』の件で問い合わせた者です。
今回の記事を見てさっそく自分のブログも変更しました。
バッチリできました！
本当にありがとうございます。
今後も参考にさせて頂きます。
コメントありがとうございます。
無事変更できたよう良かったです。
からあげ棒さん
急なお願いにも関わらず、解説記事まで作成して頂き、ありがとうございます。
からあげ棒さんのサイトデザインのカスタマイズがイケてるので、色々と漁らせて頂いています。
今後も色々と勉強させて頂きます。
2列表示のカスタマイズ、ありがとうございました！
からあげ棒さん
急なお願いにも関わらず、解説記事まで作成して頂き、ありがとうございます。
こんにちは。
参考になるカスタマイズばかりで、とても有り難く拝見しております。
今回の記事、画像付き新着記事ウィジェットを2列で表示するように、トップページでウィジェットを利用して「おすすめ記事」を2列で同じように画像付きでボックス型で表示したいのですが、どのウィジェットを利用すると良いでしょうか？初心者なもので、ご教示頂けると助かります。
すずさん、コメントありがとうございます。
おすすめ記事は
おすすめ記事を選ぶ必要があるため色々な作り方があると思います。
今度記事を書きたいと思います。