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

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

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

Cocoonカスタマイズの基本|HTML・CSS・PHP・JavaScript編集方法をチェック

ブログのデザインや機能をもっと自由にカスタマイズしたいとき、WordPressテーマ「Cocoon」では HTML・CSS・PHP・JavaScript を使っ...
テーマ共通

スクロールアニメーションの作り方|CSSとIntersectionObserver(交差監視)でふわっと表示

Webサイトでよく見かける、スクロールに合わせてふわっと要素が表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」といっ...
サイト設定

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

もうひとつブログを作りたいな~そんな思いを抱いたことはありませんか?別のジャンルに挑戦したい、雑記ブログから人気のジャンルを独立させたいなど、ブログ運営を続ける...
Cocoon

Cocoonアコーディオン(トグル)をカスタマイズ!10種類のデザインでスッキリ魅せる

WordPressテーマ「Cocoon」のアコーディオンボックス、使っていますか?情報量が多いページでも、クリックひとつで内容を折りたためるとても便利な機能です...
サイト設定

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

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

CSS・PHP・JavaScriptのバックアップ方法まとめ|WordPressカスタマイズ前に必須!

WordPressを使っていると、デザインを整えるために CSS、機能を追加するために PHP や JavaScript を編集する場面があります。ただし、直接...
CSSの基礎

CSSが反映されない原因は?デベロッパーツールを使った確認方法と対処法まとめ

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

WordPressパターン機能でラクラク時短!再利用ブロックの使い方と同期・非同期の違い

WordPressの「パターン」機能、使ったことはありますか?これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能...
Cocoon

Cocoonタブブロックの使い方&おしゃれカスタマイズ|ワンクリックで12デザイン切替

WordPressテーマCocoon(2.7.3~)に標準搭載された、待望の「タブブロック」。直感的な操作でタブを切り替えられるため、「情報をコンパクトにまとめ...
Cocoon

Cocoonラベルボックスをシンプル&おしゃれにカスタマイズ!使い方・デザイン例・CSSコードまとめ

Cocoonの「ラベルボックス」情報をまとめるのに便利な機能ですが、余白が狭かったり、見出しの後ろに線が残ったりしてもう少しすっきりさせたいという声もよく聞きま...
テーマ共通

CSSコピペOK!見出しをカスタマイズ|おしゃれデザインサンプル集【Cocoon対応】

見出しデザインを工夫するだけで、記事の読みやすさや視認性がぐっと向上しサイト全体の印象も大きく変わります。この記事では、WordPress(一部無料ブログ)全般...
テーマ共通

箇条書きリストデザイン|CSSで点の色を変える3つの方法

2025.9.22 掲載コードを変更しました。箇条書き(番号なしリスト)では、先頭に「・」のような黒い点(マーカー)が表示されます。このマーカーを自分好みにカス...
Cocoon

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

Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に人気記事ランキングを簡単に作成できます。サイドバーやトップページに設置すれば、読者...
CSSの基礎

サイトに「動き」をつけるCSSアニメーション|基本的な使い方と実例

Webサイトにアニメーションを取り入れると、ちょっとした強調や演出効果を加えられデザイン全体がぐっと引き締まります。CSSの @keyframes と anim...
Cocoon

Cocoonアピールエリア|画面いっぱいのフルスクリーン+スクロール矢印・ズーム演出するカスタマイズ

2025.10.06_デモページをさらにイメージしやすく更新しました。Cocoonの「アピールエリア」は画像やキャッチコピーを配置できる、サイトの顔ともいえる重...
配色・デザイン

ブログのアイキャッチや図解がプロっぽくなる!おすすめデザイン本4冊(おしゃれな配色・余白・フォント)

ブログのアイキャッチや図解を作るとき、「なぜか素人っぽく見える…」と悩むことはありませんか?そんなときに役立つのが、デザインの基礎をわかりやすく解説している本で...
Cocoon

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

Cocoonテーマには、特定の記事を目立たせたいときに便利な 「ナビカード」 機能が標準で搭載されています。新着記事や人気記事のような自動表示とは違い、「読んで...
CSSの基礎

【初心者向け】CSSカスタマイズの基本|WEBデザインを自由に変える方法

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

Cocoonで全幅(フルワイド)デザイン!幅いっぱいにする仕組みとおしゃれに仕上げるポイントを解説

Cocoonでも、有料テーマSWELL風のフルワイドデザインは作れます。この記事では、Cocoonでトップページをおしゃれに見せる 「全幅(フルワイド)セクショ...
スポンサーリンク