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