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

Cocoonでフルワイド(幅いっぱい)にする方法|全幅表示+背景デザインの作り方

背景が端まで広がらない余白が消えない横スクロールが出てしまうCocoonでフルワイド(全幅)デザインを作ろうとすると、このあたりでつまずく方が非常に多いです。設...
Cocoonカスタマイズ

Cocoonタブブロックの使い方とデザイン強化カスタマイズ|均等配置・横スクロール対応

WordPressテーマCocoon(2.7.3~)に標準搭載された、待望の「タブブロック」。タブを切り替えるだけで表示内容を入れ替えられるため、「情報をコンパ...
Webカスタマイズ

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

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

Cocoonトップページの作り方|サイト型トップページを作る方法(HTML・ブロック対応)

Cocoonでは、ブログ型ではなく「サイト型トップページ」を作ることもできます。例えば次のような構成です。メインビジュアル(サイトの印象を作る)カテゴリ別の記事...
Cocoonカスタマイズ

超簡単!Cocoonブロック機能でサイト型トップページを作る方法|コード最小限・初心者向け

Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの?そんな方は、サイト型トップページ全体の構成やメリットをまとめたページ Cocoon...
Cocoonカスタマイズ

Cocoon目次が見切れる原因と解決方法|サイドバー追従目次をスクロール対応にするCSS

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

Cocoonタイムライン(ステップ)ブロックをおしゃれにカスタマイズ|デザイン簡単切替【コピペOK】

更新情報(2026/02/28)サイズ・線幅を変数で管理、カスタムしやすいようにCSSを修正しました。Cocoonの「タイムライン」ブロックは、手順解説や申し込...
サイト設定

WordPressの初期設定|SEO・セキュリティ・公開前に必ずやることリスト

WordPressを始めたばかりの初心者必見!後悔しないための初期設定を優先度別に解説。サーバー選びからSEO対策まで、最初に整えておきたいポイントをまとめました。
Webカスタマイズ

CSSだけで作るフェードスライダー|複数画像を切り替える方法

トップページにおしゃれな画像スライダーを置きたいけれど、「表示が重くなる」「JavaScriptの管理が不安」「できるだけシンプルに実装したい」と感じている方も...
Webカスタマイズ

見出しデザインをおしゃれにカスタマイズ【Cocoon対応・CSSサンプル付き】

更新情報(2026/02/08) 一部CSSを微調整しました見出しデザインを変えるだけで、記事の読みやすさや視認性は大きく変わりサイト全体の印象もアップします。...
Webカスタマイズ

CSSでなめらかに点滅させる方法(コピペOK)

要素を「点滅」させるアニメーションは、注意を引きたいときセールやキャンペーンの強調警告や注意メッセージの表示などに効果的です。この記事では、「ゆっくり、なめらか...
Cocoonカスタマイズ

Cocoon検索フォームCSSカスタマイズ|検索窓デザインサンプル集(コピペOK)

Cocoonの検索フォーム(検索窓)は、CSSを追加するだけで簡単にデザインを変更できます。「検索フォームをおしゃれにしたい」「ブログデザインに合わせたい」そん...
CSS基礎

CSS変数(カスタムプロパティ)の使い方|基本構文・設定方法・実践例

「色を変えたいだけなのに、何ヶ所も修正しないといけない…」そんなとき、CSS変数(カスタムプロパティ)を使えば、色や数値などの設定を一箇所にまとめて管理できます...
CSS基礎

CSSが効かない・反映されない原因と対策まとめ|デベロッパー(検証)ツールで簡単チェック

CSSが反映されない原因を詳しく解説!デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
Cocoonカスタマイズ

【Cocoon】アピールエリアに検索フォームを設置する方法|回遊率アップのトップページ導線

Cocoonの「アピールエリア」に検索フォームを設置すると、ユーザーが知りたい記事をすぐに探せるようになり、サイトの回遊率アップにもつながります。しかも設置はと...
CSS基礎

CSSで中央寄せする方法まとめ|テキスト・画像・バナー・ボックスを迷わず真ん中に配置

中央に揃えるというレイアウトは、Webデザインで最もよく使う基本テクニックのひとつ。ただし、要素の種類(テキスト・画像・ブロック要素)や揃え方(横だけ・縦横両方...
CSS基礎

WordPress「追加CSSクラス」使い方|特定ブロックだけデザインを簡単に変更する方法

WordPressのブロックエディタで、特定のブロックだけにデザインを追加したいときに便利なのが「追加CSSクラス」です。初心者でも簡単に文字色や背景色、アニメ...
CSS基礎

CSSの書き方とカスタマイズ方法|ブログデザインを自分で変更する基本手順【初心者向け】

ブログを書いていると、こんな悩みが出てきます。デザインがなんとなく素人っぽい見出しやボタンをもう少しおしゃれにしたいでも、どこを触ればいいのか分からないそこで必...
CSS基礎

WordPressバックアップ|CSS・PHP・JavaScriptファイルの安全な保存方法(初心者向け)

WordPressでは、CSS・PHP・JavaScriptを少し編集したい場面がよくあります「余白を調整したい」「ボタンの色を変えたい」「便利なコードを試した...
サイト設定

【Cocoon対応】Googleアドセンス審査コードの貼り方|保存できない・確認できない原因と対処法

Google AdSenseの審査では、申請したサイトの所有者であることを確認するために、審査用コードをサイトの <head> 内へ正しく設置する必要があります...
スポンサーリンク