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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

エックスサーバー|サブドメイン設定で2つめのブログ(複数サイト)を作る方法

この記事で分かることエックスサーバーを利用して複数サイトを作る方法エックスサーバーでサブドメインを設定する方法サブドメインにワードプレスをインストールする方法もうひとつブログを作りたいな~ブログを運営してしばらくすると、別のジャンルに方向転...
設定

エックスサーバーでワードプレスのパーマリンク変更|SEOに与える影響と対策

パーマリンクの構造を「日付+投稿名」から「投稿名」に変更したいと思っている。しかし、正確な手順や影響が分からずに悩みとなっている方向けの記事となります。パーマリンク変更の方法や注意点、SEOへの影響などについて解説します。この記事で分かるこ...
Cocoon

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

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

ワードプレスの箇条書きリストデザイン|点の色を変えるカスタマイズ(ul要素)

箇条書きリストのデザインはデフォルトではシンプルな黒い点(ディスク)が表示されます。このデザインをカスタマイズして、箇条書きの点の色を変更する方法を解説します。リスト1リスト2リスト3サイトのメインカラーとリストに統一感をだしたいときにおす...
Cocoon

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

この記事では、ワードプレステーマ「Cocoon」を使ったCTAボックスの作成手順と活用法を解説します。初心者でも簡単に作成でき、アフィリエイトリンクの効果的な配置に役立ちます。なお、具体的な作成手順は有料公開となっています。詳しくは「作成手...
Cocoon

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

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