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

カスタマイズ

Cocoon

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

WordPressのブロックエディタ(Gutenberg)では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色...
Cocoon

Cocoonタイムラインを有料テーマ級にカスタマイズ!SWELL風デザインを簡単に実現

WordPressテーマ「Cocoon」には、標準でタイムラインブロックが用意されています。手順や流れをわかりやすく伝えるのに便利ですが、デフォルトの見た目はシ...
テーマ共通

CSS Transitionの使い方|簡単にスムーズなアニメーションを実現

「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。 詳しくは「CSSア...
テーマ共通

CSSセレクタを調べる方法|Chromeデベロッパーツール活用で初心者でも簡単!Webデザインに役立つ実践ガイド

Webデザインやサイトのカスタマイズに挑戦するとき、避けて通れないのが「CSSセレクタを調べる」作業です。実際、「デベロッパーツールを使えないとCSSは書けない...
Cocoon

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

Cocoonはシンプルで使いやすい無料テーマですが、有料テーマ「SWELL」のような洗練されたフルワイドデザイン(全幅デザイン)を実現するには少し工夫が必要です...
テーマ共通

CSS・SVGで作る境界線と背景デザイン|波、三角形、斜めラインを使ったおしゃれな装飾テクニック

Webデザインでは、ちょっとした工夫で見た目の印象を大きく変えることができます。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセ...
Cocoon

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

2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマ「Cocoon」のアコーディオンボックス、使ってい...
Cocoon

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

2025.9.10更新 実例集にBibroom(ビブルーム)を掲載しました。Cocoonでオリジナルのトップページを作りたいけど、どこから始めればいいの?そんな...
テーマ共通

CSSで実装!複数画像を切り替えるアニメーションの作り方

トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。通常、これら...
Cocoon

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

2025.8.28 デザインと実装コードを見直し、よりシンプルに修正をおこないました。WordPressテーマCocoon(2.7.3~)に標準搭載された、待望...
Cocoon

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

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

WordPressの「追加CSSクラス」が便利!特定のブロックにだけスタイルを適用する方法

WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか?実は「追加CSSクラス」機能を使えばとても簡単に実現できます...
テーマ共通

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

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

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

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

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

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

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

Cocoonテーマには、特定の記事やコンテンツを目立たせたいときに便利な『ナビカード』機能が標準搭載されています。ピックアップしたい記事を表示できるだけでなく、...
テーマ共通

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

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

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

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

Cocoonアイコンボックスをおしゃれにカスタマイズ|クリックで簡単デザイン切り替え

2025.8.26 デザインと実装コードを見直し、修正をおこないました。Cocoonアイコンボックスは、アイコンとテキストを組み合わせた魅力的なボックスデザイン...
Cocoon

Cocoon白抜きボックスをおしゃれにカスタマイズ!複数デザインの使い分け方法

Cocoonの「白抜きボックス」は、箇条書きやカスタムカラーが使えるシンプルで視認性の高い万能ボックス。初心者から上級者まで多くのブロガーが愛用していますが、も...
スポンサーリンク