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

ブログカスタマイズ

Cocoonカスタマイズ

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

Cocoonで「アピールエリアをフルスクリーン表示にしたい」「トップページをおしゃれにしたい」と悩んでいる方へ。この記事では、インパクトのあるフルスクリーン化の...
Webカスタマイズ

CSSだけで複数画像を切り替えスライダーを作る方法|JS不要・軽量・コピペOK【WordPress対応】

トップページに複数画像を切り替えるおしゃれなフェードスライダーを設置したいけれど、プラグインを使うと重くなるJavaScriptは難しいCSSだけで簡単に作りた...
Cocoonカスタマイズ

Cocoon記事カードを横並びにする方法|新着記事・人気記事・ナビカード2〜4カラム切替・PCスマホ対応カスタマイズ

Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
カスタマイズの基本

CSSカスタマイズの基本|WordPress・Cocoonでデザインを変える方法まとめ(初心者向け学習ガイド)

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

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

Webデザインでは、ちょっとした工夫で見た目の印象が変わります。その中でもおすすめなのが「境界線」や「背景スタイル」のデザイン。線や背景にアクセントを入れるだけ...
カスタマイズの基本

Cocoonカスタマイズ完全ガイド|HTML・CSS・PHPの編集場所と使い分けを初心者向けに解説

Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの?」「HTMLとCSSとPHPの違いがわからない…」という初心者は...
カスタマイズの基本

CSSアニメーションの基本と使い方【初心者向け】@keyframes・実例・軽くするコツ

Webサイトに動きを加えたいなら、まず覚えておきたいのが CSSアニメーション(@keyframes と animation) です。この2つを理解すれば、Ja...
Webカスタマイズ

CSSでulリストマーカー色(箇条書きの点)を変更する方法|::marker・::before・spanの違いと使い分け

CSSでul/liのリストマーカーの色を変えたいけど、「どうやってやるのかわからない…」「HTMLを変更せずに簡単に色だけ変えたい」という方に向けた解説です。実...
カスタマイズの基本

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

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

Cocoonテーブル(表)の中にリンクボタンを置く方法|簡単・視認性アップでクリック率も向上

比較表・料金表・アフィリエイト表などを、もっと見やすく・わかりやすくしたい!そんなときに便利なのが「表の中にリンクボタンを設置する方法」です。WordPress...
Cocoonカスタマイズ

Cocoon|テーブル(表)に記号○△✕を表示するカスタマイズ

お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【...
Webカスタマイズ

タブ切り替えをHTMLとCSSで実装(JavaScriptなし)

通常タブ切り替えはJavaScriptを使って実装するケースが多いですが、実は CSSだけ でも作れます。この記事では、:checked 疑似クラスや :has...
Webカスタマイズ

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

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

動きで魅せる!ホバーアニメーションボタン・おしゃれな矢印リンク&下線スライド(CSS付き)

他のサイトで見かける「このリンクデザインおしゃれ!」や「ボタンの動きがいいな」といった演出。どうやって作られているの?実は、CSSだけで簡単に再現できるデザイン...
Webカスタマイズ

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

毎回、同じ装飾ボックスやCTAを手作業で作っていませんか?WordPressの「パターン」機能を使えば、よく使うブロックやレイアウトを登録して、他の投稿やページ...
Cocoonカスタマイズ

Cocoon FAQブロックを見出し(H3)にする方法|目次に表示させるカスタマイズ

Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要...
カスタマイズの基本

CSSセレクタの調べ方|Chromeデベロッパーツール(検証)でクラス・IDを確認する方法【初心者向け】

CSSでカスタマイズしてみたいけれど、「どの要素を指定すればいいのかわからない…」「書いたCSSが思った通りに反映されない…」そんな経験はあると思います。見た目...
Cocoonカスタマイズ

Cocoonアイコンボックスのカスタマイズ方法|デザイン切替・色変更も完全対応

更新情報(2026/02/17)ボックスやアイコンのカラーを固定値から変更し、すべてCSS変数で管理できる設計にリニューアルしました。こんなことが簡単にできるよ...
Cocoonカスタマイズ

Cocoonナビカードの設定と使い方|記事ピックアップ・レイアウト調整・リボンカスタマイズ

Cocoonで特定の記事をピックアップ表示する方法は主に2つあります。new_list(ordered_posts)で記事カード表示する方法ナビカードでカード型...
Cocoonカスタマイズ

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

更新情報(2026/01/26) ラベルスタイル例に左上三角デザインを追加Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを使って人気記...
スポンサーリンク