当サイトは広告収入で運営しています

記事一覧・横並び3列のデモページ

このページにいいね!する

ショートコード

<div style=”text-align: center”>[new_list count=12 type=large_thumb]</div>

※カッコを半角[]に要変換。

※CSSでセンタリングも出来たら良かったのですが、うまく行かなかったので
<div style=”text-align: center”></div>
で囲って無理やりセンタリングしています。

【WordPress】投稿一覧のクイック編集にメタディスクリプションの項目を追加する
カスタムフィールドに入力があれば任意の広告、未入力ならGoogle AdSenseを表示する広告エリアの作り方
リアクションボタンを追加できるプラグイン・「Post Reaction」の使い方
Cocoonのヘッダー・フッターモバイルボタンのFontAwesomeアイコンを任意の画像に置き換える
自作ショートコードでサムネイルメインのブログカードを表示する
自作ショートコードでサムネイルなしのシンプルなブログカードとタイトルだけのテキストリンクを表示する
ココナラでブログのアイキャッチを描いて貰ったので依頼の流れを解説するよ!
【2024年版】イラストの依頼ならココナラがおすすめ!オリジナルアイコンでブログを大切に育てよう
作業の流れを決めてワードプレスで記事を書こう!
【Cocoon】ワードプレスのウィジェットやメニューなどを設定してブログの見た目を整える
【Cocoon】ワードプレスの固定ページの作り方
【WordPres】スパム対策に!「SiteGuard WP Plugin」プラグインのおすすめの設定方法

カスタムCSSコード例

/*-----記事一覧3列横並び-----*/

.widget-entry-cards.card-large-image .a-wrap {
width:32%;  /*PCで3列*/
display: inline-flex;
text-align: left; /*タイトルを左寄せ*/
}


@media screen and (max-width: 834px) {
.widget-entry-cards.card-large-image .a-wrap {
width:49%;  /*タブレットで2列*/
display: inline-flex;
}
}

@media screen and (max-width: 480px) {
.widget-entry-cards.card-large-image .a-wrap {
width:100%;  /*スマホで1列*/
}
}

ページ幅の設定によってwidth:●%;の数字を要調整。

    タイトルとURLをコピーしました