新着・人気記事ショートコードの横型表示（horizontal）オプション表示例

2022.11.05
この記事は約3分で読めます。

新着・人気記事ショートコードのhorizontalオプションの表示例です。

新着・人気・関連記事ウィジェットの横型表示オプションを有効にした場合の表示例でもあります。

＼エックスサーバー開発のWordPressテーマ／
エックスサーバー開発のWordPressテーマ

新着記事の横型表示例

その他のオプションはこちら。

新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。
wp-cocoon.com
2024.06.15

通常のカード

[new_list horizontal="1" type="border_square" arrow="1" count="20"]
Cocoon 2.8.0公開。iconショートコード機能の追加。主にブロックエディター周りの不具合修正
iconショートコードの使用方法
Cocoon 2.7.9公開。WordPress 6.7に起因する不具合修正、スキンの不具合修正など
レーダーチャートブロックの使い方
Cocoon 2.7.8公開。レーダーチャートブロック追加。不具合修正など
Cocoon 2.7.7公開。主に多言語対応と不具合修正
フッターのアフィリエイトリンクボタン機能標準搭載の「NAGI」スキンを同梱
Cocoon 2.7.6公開。「NAGI」スキンを同梱追加、不具合修正など
ブロックエディターの文字装飾に個別のテキストCSS装飾を設定する方法
新着記事ショートコードを利用して任意の記事を任意の順番で表示させる方法
Cocoon 2.7.5公開。CTAブロック追加。WordPress 6.6向けの不具合修正など
Cocoon 2.7.4公開。背景アイコン追加。クラシックエディターメインのCMS「ClassicPress」に対応
ClassicPressからWordPressに移行する方法
WordPressからClassicPressに移行する方法
Cocoon 2.7.3公開。タブブロック追加。商品リンクにメルカリボタン追加など
Amazon・楽天商品リンクにメルカリボタンを表示する方法
投稿・固定ページの記事タイトルを非表示にする方法
Cocoon 2.7.2公開。メイド・イン・ヘブンスキンを追加など
作り込み機能が満載な「メイド・イン・ヘブン」スキンを同梱
インラインボタン機能で文中にボタンを作成する方法

大きなサムネイル

[new_list horizontal="1" type="large_thumb" count="20"]
Cocoon 2.8.0公開。iconショートコード機能の追加。主にブロックエディター周りの不具合修正
iconショートコードの使用方法
Cocoon 2.7.9公開。WordPress 6.7に起因する不具合修正、スキンの不具合修正など
レーダーチャートブロックの使い方
Cocoon 2.7.8公開。レーダーチャートブロック追加。不具合修正など
Cocoon 2.7.7公開。主に多言語対応と不具合修正
フッターのアフィリエイトリンクボタン機能標準搭載の「NAGI」スキンを同梱
Cocoon 2.7.6公開。「NAGI」スキンを同梱追加、不具合修正など
ブロックエディターの文字装飾に個別のテキストCSS装飾を設定する方法
新着記事ショートコードを利用して任意の記事を任意の順番で表示させる方法
Cocoon 2.7.5公開。CTAブロック追加。WordPress 6.6向けの不具合修正など
Cocoon 2.7.4公開。背景アイコン追加。クラシックエディターメインのCMS「ClassicPress」に対応
ClassicPressからWordPressに移行する方法
WordPressからClassicPressに移行する方法
Cocoon 2.7.3公開。タブブロック追加。商品リンクにメルカリボタン追加など
Amazon・楽天商品リンクにメルカリボタンを表示する方法
投稿・固定ページの記事タイトルを非表示にする方法
Cocoon 2.7.2公開。メイド・イン・ヘブンスキンを追加など
作り込み機能が満載な「メイド・イン・ヘブン」スキンを同梱
インラインボタン機能で文中にボタンを作成する方法

大きなサムネイルにタイトルを重ねる

[new_list horizontal="1" type="large_thumb_on" count="20"]
Cocoon 2.8.0公開。iconショートコード機能の追加。主にブロックエディター周りの不具合修正
iconショートコードの使用方法
Cocoon 2.7.9公開。WordPress 6.7に起因する不具合修正、スキンの不具合修正など
レーダーチャートブロックの使い方
Cocoon 2.7.8公開。レーダーチャートブロック追加。不具合修正など
Cocoon 2.7.7公開。主に多言語対応と不具合修正
フッターのアフィリエイトリンクボタン機能標準搭載の「NAGI」スキンを同梱
Cocoon 2.7.6公開。「NAGI」スキンを同梱追加、不具合修正など
ブロックエディターの文字装飾に個別のテキストCSS装飾を設定する方法
新着記事ショートコードを利用して任意の記事を任意の順番で表示させる方法
Cocoon 2.7.5公開。CTAブロック追加。WordPress 6.6向けの不具合修正など
Cocoon 2.7.4公開。背景アイコン追加。クラシックエディターメインのCMS「ClassicPress」に対応
ClassicPressからWordPressに移行する方法
WordPressからClassicPressに移行する方法
Cocoon 2.7.3公開。タブブロック追加。商品リンクにメルカリボタン追加など
Amazon・楽天商品リンクにメルカリボタンを表示する方法
投稿・固定ページの記事タイトルを非表示にする方法
Cocoon 2.7.2公開。メイド・イン・ヘブンスキンを追加など
作り込み機能が満載な「メイド・イン・ヘブン」スキンを同梱
インラインボタン機能で文中にボタンを作成する方法

ウィジェットでも利用可

新着記事・関連記事ウィジェットの横型表示オプションを有効にすることでも利用できます。

人気記事の横型表示例

その他のオプションはこちら。

人気記事一覧を表示するショートコードの利用方法
人気記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。
wp-cocoon.com
2024.02.06

通常のカード

[popular_list horizontal="1" type="border_square" arrow="1" count="20"]
Cocoonテーマをインストールする方法
広告（AdSense）を手っ取り早く設定する方法
Cocoonを少しリッチな見た目に「COLORS」スキン6種作成
Cocoonを利用する際に是非行って欲しい画像設定5つ
サイトアイコンを設定する方法（ファビコン、アップルタッチアイコン等の設定）
Google Search Consoleに登録する方法
Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ
グローバルナビのメニューを設定する方法
新着記事一覧を表示するショートコードの利用方法
ヘッダーモバイルボタンの設定方法
内部ブログカードを表示する方法
フッターモバイルボタンの設定方法
テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）
Cocoon Blocksの現在の対応状況
CocoonのおすすめのWordpressパーマリンク設定
自作の吹き出しを作成して利用する方法
Google AdSenseの審査（認証）用コードはどこに貼り付けたら良いですか？
Amazon商品リンクの初期設定方法と使い方
おすすめのWordpressメディア（サムネイル画像）サイズ設定
ヘッダーのロゴを画像に変更する方法

大きなサムネイル

[popular_list horizontal="1" type="large_thumb" count="20"]
Cocoonテーマをインストールする方法
広告（AdSense）を手っ取り早く設定する方法
Cocoonを少しリッチな見た目に「COLORS」スキン6種作成
Cocoonを利用する際に是非行って欲しい画像設定5つ
サイトアイコンを設定する方法（ファビコン、アップルタッチアイコン等の設定）
Google Search Consoleに登録する方法
Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ
グローバルナビのメニューを設定する方法
新着記事一覧を表示するショートコードの利用方法
ヘッダーモバイルボタンの設定方法
内部ブログカードを表示する方法
フッターモバイルボタンの設定方法
テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）
Cocoon Blocksの現在の対応状況
CocoonのおすすめのWordpressパーマリンク設定
自作の吹き出しを作成して利用する方法
Google AdSenseの審査（認証）用コードはどこに貼り付けたら良いですか？
Amazon商品リンクの初期設定方法と使い方
おすすめのWordpressメディア（サムネイル画像）サイズ設定
ヘッダーのロゴを画像に変更する方法

大きなサムネイルにタイトルを重ねる

[popular_list horizontal="1" type="large_thumb_on" count="20"]
Cocoonテーマをインストールする方法
広告（AdSense）を手っ取り早く設定する方法
Cocoonを少しリッチな見た目に「COLORS」スキン6種作成
Cocoonを利用する際に是非行って欲しい画像設定5つ
サイトアイコンを設定する方法（ファビコン、アップルタッチアイコン等の設定）
Google Search Consoleに登録する方法
Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ
グローバルナビのメニューを設定する方法
新着記事一覧を表示するショートコードの利用方法
ヘッダーモバイルボタンの設定方法
内部ブログカードを表示する方法
フッターモバイルボタンの設定方法
テーマが利用しているサムネイルを再生成して最適化する方法（画像の大きさを揃える）
Cocoon Blocksの現在の対応状況
CocoonのおすすめのWordpressパーマリンク設定
自作の吹き出しを作成して利用する方法
Google AdSenseの審査（認証）用コードはどこに貼り付けたら良いですか？
Amazon商品リンクの初期設定方法と使い方
おすすめのWordpressメディア（サムネイル画像）サイズ設定
ヘッダーのロゴを画像に変更する方法

ウィジェットでも利用可

人気記事ウィジェットの横型表示オプションを有効にすることでも利用できます。

ホーム
新着・人気記事ショートコードの横型表示（horizontal）オプション表示例
タイトルとURLをコピーしました