Cocoon Cocoonでフルワイド化｜画面いっぱいに幅を広げる＋セクション背景色をつけるカスタマイズ
ワードプレステーマ「Cocoon」はシンプルで扱いやすい反面、画面いっぱいに広がる“フルワイドデザイン”を実現するには少し工夫が必要です。「もっとおしゃれなサイトにしたい」「SWELLのような幅いっぱいのトップページをCocoonでも作りた...
カスタマイズ
Cocoon 
Cocoon Cocoonでピックアップ記事表示するならナビカード！横並び、リボンのスタイルを可愛くカスタマイズ
今回ご紹介するのは、Cocoonの便利な機能『ナビカード』です。特定の記事やコンテンツを目立たせたいときに簡単にピックアップ表示ができるこの機能。Cocoonに標準搭載されていますが、意外と使ったことがない方も多いのではないでしょうか？ナビ...
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集とワードプレスをバックアップする方法
ワードプレスのカスタマイズは、サイトの見た目や使いやすさをぐっと向上させてくれます。特にHTMLやCSSを編集することで、細かなデザイン調整やレイアウトの変更も可能に。でも、「どこに書いたらいいの？」「間違えたら元に戻せるの？」と不安になる...
テーマ共通 CSS「transition」で動きをプラス！マウスオーバーアニメーションの設定方法と実例
別記事で「animation」プロパティを使ったCSSアニメーションについてご紹介しました。「animation」プロパティでは@keyframesとanimationプロパティの２つを設定する必要があり、複雑なアニメーションに対応できる反...
テーマ共通 ワードプレスの箇条書きリストデザイン｜点の色を変えるカスタマイズ（ul要素）
箇条書きリストのデザインはデフォルトではシンプルな黒い点（ディスク）が表示されます。このデザインをカスタマイズして、箇条書きの点の色を変更する方法を解説します。リスト１リスト２リスト３サイトのメインカラーとリストに統一感をだしたいときにおす...
Cocoon Cocoon人気記事ランキング｜表示方法とラベルの色やスタイルを変更するカスタマイズ
Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に簡単に人気記事ランキングを作成できます。サイドバーやトップページに設置すれば、読者の目を引きやすく記事の回遊率アップにもつながります。この記事では以下の２点につい...
テーマ共通 CSSで実装！複数画像を切り替えるアニメーションの作り方
トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。通常、これらのアニメーションはJavaScriptを使って実装されますが、フェードイン・アウ...
Cocoon Cocoonの通知エリアをカスタマイズ！流れる文字アニメーションとボタンを設定する方法
Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利な機能です。この記事では、以下の通知エリアのカスタマイズ方法を紹介します。通知エ...
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインにおいて視覚的なアクセントを加える方法は多くあります。その中でも、「境界線」や「背景スタイル」を工夫することでより洗練されたデザインを実現できます。この記事では、【SVG】とCSSプロパティの【clip-path】【linea...
Cocoon Cocoonでアフィリエイトリンクを効果的に配置！自作CTAボックスの作り方と活用法
この記事では、ワードプレステーマ「Cocoon」を使ったCTAボックスの作成手順と活用法を解説します。初心者でも簡単に作成でき、アフィリエイトリンクの効果的な配置に役立ちます。なお、具体的な作成手順は有料公開となっています。詳しくは「作成手...
テーマ共通 Webデザインの強い味方！ChromeデベロッパーツールでCSSセレクタを調べる方法
このような方向けの記事ですCSSを使ったカスタマイズに興味があるHTMLとCSSの基本を知りたいデベロッパーツールの使い方を学びたいWebデザインやサイトカスタマイズにおいて、「要素のCSSセレクタを調べる」ことは必須スキルです。「デベロッ...
テーマ共通 CSSの変更が反映されない原因は？デベロッパーツールを使った確認方法と対処法まとめ
CSSが反映されない原因を詳しく解説！デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
Cocoon Cocoon「新着記事」「もっと見る」「次のページ」ボタン・キャプションのテキストを変更する方法
Cocoonテーマを使用している際に、あらかじめ設定されているボタンやキャプションのテキスト文言を変更する方法を紹介します。PHPを活用し簡単にカスタマイズできるのでぜひ参考にしてください。以下のテキストを変更できます「新着記事」（見出し）...
テーマ共通 ワードプレスのパターン（再利用ブロック）機能とは？よく使うデザインをテンプレ化して時短化する方法
ワードプレスの「パターン」機能、使ったことはありますか？これは、特定のブロックやブロックグループを登録して他の投稿やページでも簡単に再利用できる便利な機能です。例えば、よく使う装飾ボックスやボタン付きのコールトゥアクションなどをパターンとし...
テーマ共通 CSSでなめらかに点滅させる方法（コピペＯＫ）
この記事では、CSSを使って要素をなめらかに点滅させる方法を紹介します。ウェブデザインにおいて、要素を点滅させるアニメーションは視認性を高め、注目を引く際に便利です。当サイトでは、トップページの検索フォーム上の文字を点滅させるためにこのカス...
Cocoon Cocoonウィジェット新着記事・人気記事に日付を表示する設定方法（投稿日・更新日）
テーマ「Cocoon」では、ショートコードやブロックを利用して新着記事や人気記事を簡単に表示できます。参考記事新着記事一覧を表示するショートコードの利用方法人気記事一覧を表示するショートコードの利用方法デフォルトではCocoonのウィジェッ...
テーマ共通 同じページ内にジャンプ！HTMLを利用したアンカーリンクの設定方法
この記事では、アンカーリンクの設定方法と効果的な使い方について解説します。アンカーリンクはページ内の特定の位置や他のページの特定の場所に直接ジャンプするリンクのことです。ユーザーが目的の情報に素早くアクセスできるため、長いページやナビゲーシ...
テーマ共通 サイトに「動き」をつけるCSSアニメーション｜基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつ...
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
Cocoon Cocoon｜新着記事に期間限定で「NEW!」を表示する方法
記事タイトルの前にNEW!をつけたいな。この記事では、Cocoonテーマを使用しているサイトで、新着記事に「NEW!」ラベルを一定期間だけ表示する方法を解説します。PHPコードとCSSを使った手順をに説明しますのでぜひ参考にしてください。新...