Cocoon／トップページ作成に関する工夫を紹介しています。 有料公開
Cocoon Cocoonでフルワイド化｜画面いっぱいに幅を広げる＋セクション背景色をつけるカスタマイズ
ワードプレステーマ「Cocoon」はシンプルで扱いやすい反面、画面いっぱいに広がる“フルワイドデザイン”を実現するには少し工夫が必要です。「もっとおしゃれなサイトにしたい」「SWELLのような幅いっぱいのトップページをCocoonでも作りた...
テーマ共通 CSS・SVGで作る境界線と背景デザイン｜波、三角形、斜めラインを使ったおしゃれな装飾テクニック
Webデザインにおいて視覚的なアクセントを加える方法は多くあります。その中でも、「境界線」や「背景スタイル」を工夫することでより洗練されたデザインを実現できます。この記事では、【SVG】とCSSプロパティの【clip-path】【linea...
Cocoon Cocoonで作るサイト型トップページ｜オシャレなSWELL風（HTML、CSS使用）
「Cocoonでブログを運営しているけれど、トップページを“サイトっぽく”見せたい」──そんな方に向けて、固定ページ＋HTML＋CSSを活用した「サイト型トップページ」の作成方法を丁寧に解説します。この記事では、コードをそのままコピペできる...
Cocoon Cocoon新着記事・人気記事・ナビカード対応｜カラム数を自由に変更する方法（横並び）
Cocoonテーマでは、ブロック機能を使えば簡単に「新着記事」「人気記事」「ナビカード」を表示でき、特にトップページ作成においてとても便利な機能です。ただし、以下のような悩みを持つ方も多いのではないでしょうか？記事カードを横並び（カラム形式...
Cocoon Cocoonアピールエリアに検索窓（フォーム）を設置する方法／ショートコード利用
Cocoonテーマの「アピールエリア」は、注目させたい要素を目立たせるのに便利な機能です。この記事では、このアピールエリアに 検索フォームを設置する方法 を解説します。設置例やショートコード、カスタマイズ方法についてもご紹介しますので、初心...
Cocoon Cocoonアピールエリアをフルスクリーン化｜SWELL風カスタマイズ
Cocoonテーマのアピールエリアはトップページの印象を左右する重要な要素です。この記事ではアピールエリアをフルスクリーン化し、インパクトのあるファーストビューを作る方法を解説します。トップページのコンテンツ部分については、こちらの記事でサ...
Cocoon 超簡単！Cocoonのブロック機能でサイト型トップページを作る方法
Cocoonを使ってオリジナルのトップページを作りたいけど、どこから手を付けたらいいかわからない……この記事では、ワードプレステーマ「Cocoon」を使用し、初心者でも簡単におこなえるトップページの作成手順を分かりやすく解説します。特に「ブ...
テーマ共通 CSSで実装！複数画像を切り替えるアニメーションの作り方
トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあると、ぱっと目を引くことができて華やかです。通常、これらのアニメーションはJavaScriptを使って実装されますが、フェードイン・アウ...
Cocoon Cocoonウィジェット新着記事・人気記事に日付を表示する設定方法（投稿日・更新日）
テーマ「Cocoon」では、ショートコードやブロックを利用して新着記事や人気記事を簡単に表示できます。参考記事新着記事一覧を表示するショートコードの利用方法人気記事一覧を表示するショートコードの利用方法デフォルトではCocoonのウィジェッ...