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

ブログカスタマイズ

テーマ「Cocoon」

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

2025.8.26 デザインと実装コードを見直し、修正をおこないました。Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザイン...
テーマ「Cocoon」

WordPressのカラーパレットを自由に変更・追加する方法【Cocoon対応】

WordPressのブロックエディタ(Gutenberg)では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色...
テーマ「Cocoon」

Cocoonタイムラインを有料テーマ級にカスタマイズ!SWELL風デザインを簡単に実現

WordPressテーマ「Cocoon」には、標準でタイムラインブロックが用意されています。手順や流れをわかりやすく伝えるのに便利ですが、デフォルトの見た目はシ...
テーマ「Cocoon」

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

2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマ「Cocoon」のアコーディオンボックス、使ってい...
テーマ「Cocoon」

超簡単!Cocoonのブロック機能でサイト型トップページを作る方法

2025.9.10更新 実例集にBibroom(ビブルーム)を掲載しました。Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの?そんな...
テーマ共通

CSSで実装!複数画像を切り替えるアニメーションの作り方

トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。通常、これら...
テーマ「Cocoon」

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

Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に簡単に人気記事ランキングを作成できます。サイドバーやトップページに設置すれば、読者...
テーマ「Cocoon」

【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる?OGP設定方法

SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは?イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。
テーマ共通

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

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

Cocoonナビカードの使い方|目立たせたい記事をピックアップ表示する方法、リボンのカスタマイズ

Cocoonテーマには、特定の記事やコンテンツを目立たせたいときに便利な『ナビカード』機能が標準搭載されています。ピックアップしたい記事を表示できるだけでなく、...
テーマ「Cocoon」

Cocoon白抜きボックスをおしゃれにカスタマイズ!複数デザインの使い分け方法

Cocoonの「白抜きボックス」は、箇条書きやカスタムカラーが使えるシンプルで視認性の高い万能ボックス。初心者から上級者まで多くのブロガーが愛用していますが、も...
テーマ「Cocoon」

Cocoonタブ見出しボックスを有料テーマ風に!簡単カスタマイズでデザイン切り替え

Cocoonの「タブ見出しボックス」はシンプルで使いやすいですが、もっとおしゃれにしたい、デザインを自由に使い分けたいというニーズに応えるカスタマイズがあります...
テーマ「Cocoon」

【Cocoon】CTAボックスの作り方と活用法|アフィリエイトリンクを効果的に配置

成果を出すサイトには欠かせないのが「CTA(Call to Action)」。「今すぐ登録」「購入する」といった行動を促すボタンやメッセージがあるだけで、読者の...
テーマ「Cocoon」

Cocoon通知エリアをカスタマイズ!スライド表示&ボタンで誘導力強化

Cocoon通知エリアは、サイト全体にメッセージを表示したり特定のページに誘導する便利な機能。ごくシンプルでデザインは単調です。キャンペーンやお知らせを目立たせ...
テーマ「Cocoon」

Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】

Cocoonの「アピールエリア」、もっと活用してみませんか?「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおす...
テーマ「Cocoon」

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

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

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

WordPressの人気無料テーマ「Cocoon」を使用している場合、デフォルトで設定されている「新着記事」「もっと見る」「次のページ」などのボタンやキャプショ...
テーマ「Cocoon」

Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法

Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
テーマ共通

箇条書きリストの点の色を変えるCSS|ul要素のカスタマイズでデザイン性アップ

Webサイトやブログで使われる箇条書きリスト(ul要素)は、デフォルトではシンプルな黒い点(ディスク)で表示されますが、デザインにこだわりたい場合は少し味気なく...
テーマ「Cocoon」

ファーストビューをSWELL風に!Cocoonアピールエリアをフルスクリーン&動きのあるデザインにする方法

Cocoonのアピールエリアは背景画像やテキストを表示することでサイト全体の第一印象を決める大事なパーツ。ここをうまく活用すれば訪問者の関心をグッと引き寄せるこ...
スポンサーリンク