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

スクロールアニメーションの作り方|CSSとIntersectionObserver(交差監視)でふわっと表示

Webサイトでよく見かける、スクロールに合わせて要素がふわっと表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」と思う...
CSSの基礎

初心者向けWordPressバックアップ|CSS・PHP・JavaScriptの安全な保存方法

WordPressでは、CSS・PHP・JavaScriptを少し編集したい場面がよくあります「余白を調整したい」「ボタンの色を変えたい」「便利なコードを試した...
Cocoon

【Cocoon】特定のおすすめ記事をピックアップ表示する方法|new_listショートコード(ordered_posts)の使い方

「読んでほしい記事が埋もれてしまう…」「トップや記事下に、任意の記事を並べたい」そんなときに、Cocoonで特定の記事をピックアップ表示する方法は大きく分けて2...
Cocoon

Cocoonラベルボックスをシンプル&おしゃれにカスタマイズ!使い方・デザイン例・CSSコードまとめ

Cocoonの「ラベルボックス」は、注意書きや補足情報をシンプルに強調できる便利な装飾ブロックです。一方で、余白の窮屈さが気になるラベルの後ろに線が少し残ってし...
CSSの基礎

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

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

カラム固定を解消!Cocoonボックスメニューの列数を2〜6列に切り替える方法

Cocoonのボックスメニューは、アイコン付きのメニューを簡単に設置できる便利な機能。サイトの回遊性を高め、読者を目的のページへスムーズに導く効果があります。し...
Cocoon

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

Cocoonテーマには、特定の記事を目立たせたいときに便利な 「ナビカード」 機能が標準で搭載されています。新着記事や人気記事のような自動表示とは違い、「読んで...
Cocoon

Cocoon新着・人気記事・ナビカードを横並びに!カラム数をワンクリックで変更する方法

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

ブログのアイキャッチや図解がプロっぽくなる!おすすめデザイン本4冊(おしゃれな配色・余白・フォント)

ブログのアイキャッチや図解を作るとき、「なぜか素人っぽく見える…」と悩むことはありませんか?そんなときに役立つのが、デザインの基礎をわかりやすく解説している本で...
アフィリエイト

アフィリエイトASP比較|初心者向けおすすめ5社とジャンル別選び方【2026】

アフィリエイトASPの仕組みと選び方をわかりやすく解説。A8.netやafbなど主要5社を比較し、初心者に最適なASPを紹介します。
Cocoon

Cocoon見出しボックスをカスタマイズ|リストマーカー(点)の自動配色とデザイン切り替え実装

Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利にカスタマイズしたい方へ。この記事では、ボックス内のリストマーカー(点)の色をボーダー色と自動で揃...
Cocoon

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

Cocoonでも、有料テーマSWELLのようなフルワイド(全幅)デザインは再現できます。「SWELLのように幅いっぱいに表示したい」「でもCocoonだと余白調...
アフィリエイト

ポチップ|Amazon商品検索まとめ(PA-API・Pochipp Assist・もしもアフィリエイトの違いを比較)

見出し2025.11.28_PA-API利用についての内容を一部更新しました。ポチップを使ってAmazonの商品を検索したいけれど、最初に戸惑いやすいのが「PA...
アフィリエイト

Pochipp Pro(ポチッププロ)|無料版との違い・価格・導入手順を詳しく紹介

アフィリエイト収益を効率よく伸ばしたい方にとって、Pochipp Pro(ポチッププロ)はとても相性の良いプラグインです。無料版でもおしゃれな商品リンクを簡単に...
Cocoon

Cocoonサイドバー目次追従&スクロール対応にする方法【見切れ対策】

Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
テーマ共通

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

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

【Cocoon】CTAボックスの作り方と活用法|アフィリエイトリンクを効果的に配置

成果の出るサイト運営で見落とせないのが CTA(Call to Action)。「今すぐ見る」「この記事をチェック」など、読者の行動を後押しする導線があるだけで...
Cocoon

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

Cocoonの「アピールエリア」はサイトの第一印象を決める重要なパーツ。ここを整えるだけでトップページの見栄え・ブランド感・読者の滞在率が大きく変わります。この...
サイト設定

ブログ初心者必見!Googleアドセンス審査に通る条件と合格のコツ

Googleアドセンスの仕組みと審査合格のポイントを解説。必要な準備や注意点、不合格時の対処法もまとめています。
Cocoon

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

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