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

Cocoon

Cocoon

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

Cocoonを使ってオリジナルのトップページを作りたいけど、どこから手を付けたらいいかわからない……そんな方に向けて、WordPressテーマ「Cocoon」とブロックエディタ(Gutenberg)を活用した、サイト型トップページの作成手順...
Cocoon

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

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

Cocoonでフルワイド化|画面いっぱいに幅を広げる+セクション背景色をつけるカスタマイズ

WordPressテーマ「Cocoon」はシンプルで扱いやすい反面、画面いっぱいに広がる“フルワイドデザイン”を実現するには少し工夫が必要です。「もっとおしゃれなサイトにしたい」「SWELLのような幅いっぱいのトップページをCocoonでも...
Cocoon

Cocoonで作るサイト型トップページ|オシャレなSWELL風(HTML、CSS使用)

「Cocoonでブログを運営しているけれど、トップページを“サイトっぽく”見せたい」──そんな方に向けて、固定ページ+HTML+CSSを活用した「サイト型トップページ」の作成方法を丁寧に解説します。この記事では、コードをそのままコピペできる...
Cocoon

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

Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。ただし、以下のような悩みを持つ方も多いのではないでしょうか?記事カードを横並び(カラム形式...
Cocoon

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

Cocoonテーマには、特定の記事やコンテンツを目立たせたいときに便利な『ナビカード』機能が標準搭載されています。ピックアップしたい記事を表示できるだけでなく、リボンの装飾や表示形式の選択など自由度の高いカスタマイズも可能です。新着記事や人...
Cocoon

Cocoonカスタマイズの基本|HTML・CSSの編集方法

WordPressのカスタマイズは、サイトの見た目や使いやすさをぐっと向上させてくれます。特にHTMLやCSSを編集することで、細かなデザイン調整やレイアウトの変更も可能に。でも、「どこに書いたらいいの?」と不安になる方も多いはず。この記事...
Cocoon

Cocoonアピールエリアに検索窓を設置する方法【ショートコードで簡単対応】

Cocoonテーマの「アピールエリア」、うまく活用できていますか?「もっと目立たせたい要素がある」「回遊率を上げたい」――そんなときに便利なのが、検索フォームの設置です。この記事では、Cocoonのアピールエリアに検索フォームを簡単に表示さ...
Cocoon

Cocoonボックスメニューのカラム数を自由に変更!2〜6列対応のカスタマイズ方法

WordPressの無料人気テーマ「Cocoon(コクーン)」には、サイト内の導線設計に便利な「ボックスメニュー」という機能があります。見た目もシンプルで、アイコン付きのメニューをブロック形式で直感的に配置できるため、多くのユーザーが活用し...
Cocoon

Cocoonラベルボックスをシンプル&おしゃれに!選べる6つのスタイルを実装するカスタマイズ

ブログにちょっとしたアクセントを加えたいときに便利な「ラベルボックス」。ラベル標準のラベルボックスCocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで扱いやすい反面、見た目や使い勝手に少し物足りなさを感じている方も多いので...
Cocoon

Cocoonのブログカードを自分好みに!見た目を11パターンから切り替えできるCSS簡単カスタム

“必要な情報だけ、シンプルなデザインで”ブログカードをもっと自由にカスタマイズしませんか。この記事でご紹介するカスタマイズは、ブログカードの表示したい要素(タイトル・サムネイル・抜粋文・URLなど)を自分好みに調整し、用途に合わせて柔軟に対...
Cocoon

Cocoonの白抜きボックスをカスタマイズ|複数スタイルと簡単切り替え方法を解説

Cocoonで「白抜きボックス」のデザインをもっと自由に切り替えられたら便利だな──そんな思いから今回のカスタマイズを考えました。白抜きボックスはシンプルなデザインながら、使い勝手の良さが抜群!箇条書きリストなどのブロックも挿入可能ボーダー...
Cocoon

Cocoonの通知エリアをカスタマイズ!流れる文字アニメーションとボタンを設定する方法

Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利な機能です。この記事では、以下の通知エリアのカスタマイズ方法を紹介します。通知エ...
Cocoon

Cocoon「アイコンボックス」のカスタマイズ方法|12種類のスタイルをサイドバーで切り替え

もっと手軽に、ブロックのデザインを変えられたらいいのに…そんな“あったらいいな”を叶えるカスタマイズを考えました。この記事では、Cocoonテーマの「アイコンボックス」ブロックに12種類のカスタムスタイルを追加し、クリックだけで切り替え可能...
Cocoon

Cocoonのタブブロックをもっと便利に!サイドバーでデザインを選べる着せ替え機能

Cocoonテーマ(2.7.3~)には「タブ」ブロックが標準搭載されており、直感的な切り替え表示が可能です。Tab 1Tab 2Tab 3ここに内容を入力します。ここに内容を入力します。ここに内容を入力します。これ便利!もう少しデザインの幅...
Cocoon

Cocoonのアコーディオン(トグル)をもっとおしゃれに!サイドバーから選べるカスタマイズ方法

アコーディオンボックスを活用することで、情報量の多いページでもスッキリ整理できます。Cocoonテーマにもこの機能が標準搭載されておりとても便利ですが、デフォルトのアコーディオンは1種類のデザインのみ。アコーディオンコンテンツ左寄せデザイン...
Cocoon

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

Cocoonテーマの「タブ見出しボックス」、もっとおしゃれに使いこなしてみませんか?見出しCocoonのタブ見出しボックスこのブロックはシンプルで使いやすいのが魅力ですが、線や余白を整えてスタイリッシュにしたいページ内で複数のデザインを使い...
Cocoon

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

WordPressのブロックエディタ(Gutenberg)では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色は原色に近いビビッドなカラーが多く、自分のサイトに合わないと感じることがあるかも...
Cocoon

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

Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に簡単に人気記事ランキングを作成できます。サイドバーやトップページに設置すれば、読者の目を引きやすく記事の回遊率アップにもつながります。この記事では以下の2点につい...
Cocoon

Cocoon「新着記事」「もっと見る」「次のページ」ボタン・キャプションのテキストを変更する方法

Cocoonテーマを使用している際に、あらかじめ設定されているボタンやキャプションのテキスト文言を変更する方法を紹介します。PHPを活用し簡単にカスタマイズできるのでぜひ参考にしてください。以下のテキストを変更できます「新着記事」(見出し)...
スポンサーリンク