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

Pochipp Pro(ポチッププロ)|無料版との違い・価格・導入手順まで詳しく紹介

アフィリエイトリンクを簡単&おしゃれに表示できる人気プラグインPochipp(ポチップ)。Pochipp Proにアップグレードすると、通常版では使えない「セール情報自動取得」「口コミリンク表示」など、収益に直結する機能が使えるようになりま...
Cocoon

Cocoonアピールエリアに検索窓(フォーム)を設置する方法/ショートコード利用

Cocoonテーマの「アピールエリア」は、注目させたい要素を目立たせるのに便利な機能です。この記事では、このアピールエリアに 検索フォームを設置する方法 を解説します。設置例やショートコード、カスタマイズ方法についてもご紹介しますので、初心...
テーマ共通

ブログデザインをカスタマイズしよう|HTMLとCSSの基礎知識【初心者向け】

ブログデザインをもっと自分らしく作りたいと感じたことはありませんか?自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS(Cascading Style Sheets)の知識が必要。Webデザインの基本であるHT...
Cocoon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cocoonのタブ見出しボックスを有料テーマ風に!簡単カスタマイズ手順まとめ

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

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

──Cocoonの「ラベルボックス」をもっとおしゃれに。Cocoonテーマに標準搭載されている「ラベルボックス」は、シンプルで使いやすいブロックですが、線の太さや余白、見出しの位置などを少し整えるだけで、ぐっと洗練された印象に変わります。見...
ブログ運営

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

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

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

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

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

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

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

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

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

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

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

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

もう迷わない!要素(バナー)を上下左右中央寄せにする方法|HTMLインラインスタイルとCSSの違い

ウェブデザインにおいて、バナーなどの要素を中央に配置することは視覚的なバランスを整える上で重要なポイントです。この記事では、CSSを使用して要素を中央寄せにする方法を解説します。例えば、デフォルトではバナー画像は左寄せになっていることが多い...
スポンサーリンク