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

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

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

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

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

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

お知らせ2025/5/22 実装コードをより短く、シンプルに修正しました。アコーディオンボックスを活用することで、情報量の多いページでもスッキリ整理できます。Cocoonテーマにもこの機能が標準搭載されておりとても便利ですが、デフォルトのア...
Cocoon

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

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

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

お知らせ2025/5/22 実装コードをより短く、シンプルに修正しました。Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。ただし、以下のよ...
Cocoon

Cocoon|新着記事に期間限定で「NEW!」を表示する方法

記事タイトルの前にNEW!をつけたいな。この記事では、Cocoonテーマを使用しているサイトで、新着記事に「NEW!」ラベルを一定期間だけ表示する方法を解説します。PHPコードとCSSを使った手順をに説明しますのでぜひ参考にしてください。新...
Cocoon

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

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

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

お知らせ2025/5/21 実装コードをより短く、シンプルに修正しました。Cocoonテーマ(2.7.3~)には「タブ」ブロックが標準搭載されており、直感的な切り替え表示が可能です。Tab 1Tab 2Tab 3ここに内容を入力します。ここ...
Cocoon

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

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

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

お知らせ2025/5/24 実装コードをより短く、シンプルに修正しました。「もっと手軽に、ブロックのデザインを変えられたらいいのに…」そんな“あったらいいな”を叶えるカスタマイズを考えました。この記事では、Cocoonテーマの「アイコンボッ...
Cocoon

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

“必要な情報だけ、シンプルなデザインで”Cocoonのブログカードをもっと自由にカスタマイズしませんか。この記事でご紹介するカスタマイズは、シンプルで見やすい11種類のデザインを、サイドバーからクリック操作だけで切り替え可能。さらに、表示し...
Cocoon

Cocoonラベルボックスのデザインを切り替え可能に!クリックで選べる6種類のスタイルを実装する方法

ブログにちょっとしたアクセントを加えたいときに便利な「ラベルボックス」。ラベル標準のラベルボックスCocoonテーマに備わっているラベルボックスはシンプルで使いやすい反面、見た目に物足りなさを感じる方も多いのではないでしょうか。この記事では...
設定

Googleアドセンス審査に合格するために|必須対策&コード貼り付け方法

ブロガーアドセンスに合格したいGoogleアドセンスは多くのブロガーやウェブサイト運営者にとって収益化の手段のひとつですが、審査に合格するためにはいくつかのポイントを押さえる必要があります。この記事では、Googleアドセンスの基本的な仕組...
Cocoon

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

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

【初心者向け】アフィリエイトASPとは?仕組み・選び方・おすすめ5社を比較!

アフィリエイトで成果を出すためには自分に合ったASP(アフィリエイト・サービス・プロバイダー)を選ぶことが欠かせません。ASPによって扱っている案件や得意ジャンル、報酬の仕組みが異なるため、適切なASPを活用することで収益アップにつながりま...
Cocoon

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

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

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

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

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

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

ワードプレスの「追加CSSクラス」を活用!特定のブロックにだけスタイルを適用する方法

ワードプレスのブロックエディタで、特定のブロックに独自のデザインを追加できることをご存知ですか?実は「追加CSSクラス」機能を使えばとても簡単に実現できます。この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を交えなが...
設定

エックスサーバーで常時SSL化|https化・リダイレクト・サブドメイン設定まで解説

ワードプレスを開設したら、まず最初にやるべき重要な設定のひとつが「SSL化(https化)」です。SSL(Secure Sockets Layer)とは、インターネット上の通信を暗号化しデータの盗聴や改ざんを防ぐ技術です。WebサイトをSS...
スポンサーリンク