サイト型トップページの作り方を公開しています!Check

ブログカスタマイズ

Cocoon

【Cocoon】タブブロックの使い方とデザイン強化カスタマイズ|均等配置・横スクロール対応

WordPressテーマCocoon(2.7.3~)に標準搭載された、待望の「タブブロック」。タブを切り替えるだけで表示内容を入れ替えられるため、「情報をコンパ...
Cocoon

Cocoonナビカードの設定と使い方|記事ピックアップ・レイアウト調整・リボンカスタマイズ

Cocoonで特定の記事をピックアップ表示する方法は主に2つあります。new_list(ordered_posts)で記事カード表示する方法ナビカードでカード型...
Cocoon

【Cocoon】特定のおすすめ記事をピックアップ表示する方法|new_listショートコード(ordered_posts)の使い方

Cocoonで特定の記事をピックアップ表示する方法は主に2つあります。new_list(ordered_posts)で記事カード表示する方法ナビカードでカード型...
Cocoon

【Cocoon】白抜きボックスのデザイン拡張カスタマイズ&ワンクリック切替がとても便利!

更新情報2026/01/26 実線と破線スタイルに角丸を追加しました。Cocoonには「段落ブロック」に便利な装飾スタイルがありますが、リストや画像など複数のブ...
Cocoon

Cocoon『もっと見る』『次のページ』『新着記事』のテキスト変更カスタマイズ

Cocoonを使っていると、「もっと見る」「次のページ」「新着記事」などの表記が、サイトの雰囲気に合わないと感じることがあります。英語表記にしたいクリックを促し...
Cocoon

Cocoonサイト型トップページの作り方|シンプル&おしゃれデザイン【HTML・CSSコピペOK】

トップページの第一印象が平凡で、他サイトと似てしまう……ある程度記事が増えてくると、そう感じる人は多いはず。そこでこの記事では、Cocoonの固定ページとHTM...
テーマ共通

箇条書きリストデザイン|CSSで点の色を変える3つの方法

箇条書き(番号なしリスト)では、先頭に「・」のような黒い点(マーカー)が表示されます。このマーカーを自分好みにカスタマイズすることで、リストをサイトデザインに合...
Cocoon

Cocoon見出しボックスをカスタマイズ|リストマーカー(点)の自動配色とデザイン切り替え実装

Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利にカスタマイズしたい方へ。この記事では、ボックス内のリストマーカー(点)の色をボーダー色と自動で揃...
Cocoon

Cocoonブログカードの表示要素を編集画面で切替|クリック率が上がる12スタイル(コピペOK)

更新情報2026/1/7 テキストリンクスタイル:アイコン・フォントの微調整2025/12/20 縦型スタイルを1種類追加、掲載コードを全修正記事内リンクとして...
Cocoon

Cocoonカスタマイズ|HTML・CSS・JavaScript・PHPの使い分けと編集方法

Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの?」「HTMLとCSSとPHPの違いがわからない…」という初心者は...
テーマ共通

【コピペOK】おしゃれなボックスデザイン!ブログを彩るCSS囲み枠集

ブログで使えるボックスデザイン(囲み枠)を厳選してご紹介します。コードはコピペ対応で簡単!!
Cocoon

Cocoon人気記事ランキング|表示方法とラベルの色・スタイルを変更するカスタマイズ

更新情報2026/01/26 ラベルスタイル例に左上三角デザインを追加Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを使って人気記事ラ...
Cocoon

Cocoonラベルボックスをシンプル&おしゃれにカスタマイズ!使い方・デザイン例・CSSコードまとめ

Cocoonの「ラベルボックス」は、注意書きや補足情報をシンプルに強調できる便利な装飾ブロックです。一方で、余白の窮屈さが気になるラベルの後ろに線が少し残ってし...
Cocoon

Cocoonアイコンボックスをおしゃれにカスタマイズ|クリックで簡単デザイン切り替え

Cocoonのアイコンボックスは、補足説明や注意書きを分かりやすく伝えられる便利なブロックです。しかし標準状態ではデザインが1種類のみで、記事内容に合わせて使い...
Cocoon

Cocoon「タブ見出しボックス」を自由にデザイン|コピペで使えるカスタムスタイル8種

WordPressテーマ「Cocoon」のタブ見出しボックスは、記事内で見出しやコンテンツを整理できる便利な装飾ブロックです。シンプルで使いやすいのが魅力ですが...
Cocoon

カラム固定を解消!Cocoonボックスメニューの列数を2〜6列に切り替える方法

Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
Cocoon

Cocoonタイムライン(ステップブロック)おしゃれ化カスタマイズ!6種類のデザインを使い分け

Cocoonの「タイムライン」ブロックは、手順解説や申し込みフローの表示にぴったりな便利機能です。しかし、デフォルトのままだと「見た目がシンプルすぎる」「ブロッ...
Cocoon

Cocoon新着・人気記事・ナビカードを横並びに!カラム数をワンクリックで変更する方法

Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
Cocoon

Cocoonアコーディオン(トグル)をカスタマイズ!10種類のデザインでスッキリ魅せる

WordPressテーマ「Cocoon」のアコーディオン、使っていますか?情報量が多いページでも、クリックひとつで内容を折りたためるとても便利なブロックです。た...
Cocoon

【Cocoon】FAQブロックの質問を見出し(H3)に変更するカスタマイズ|SEO・可読性・回遊率UP

Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要...
スポンサーリンク