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

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

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

Googleアドセンス審査用コードの貼り方|WordPress・Cocoon対応ガイド

Googleアドセンスに申請するときには、審査用のコードを自分のサイトの <head> 内に貼り付ける必要があります。このコードを正しく設置できないと審査が始ま...
Cocoon

Cocoonブログカードの表示要素を編集画面で切替|クリック率が上がる12スタイル(コピペOK)

更新情報2026/1/7 テキストリンクスタイル:アイコン・フォントの微調整2025/12/20 縦型スタイルを1種類追加、掲載コードを全修正Cocoonのブロ...
サイト設定

エックスサーバー|サブドメイン設定で2つめのブログ(複数サイト)を作る方法

もうひとつブログを作りたいな~と思うことはありませんか?今のブログとは別のジャンルに挑戦したいときや、雑記ブログから人気のジャンルだけを切り分けたいときなど、運...
アフィリエイト

ポチップの使い方と機能まとめ|商品リンク・セール表示・インラインの活用法を解説

ポチップは、Amazon・楽天市場・Yahoo!に加えて、メルカリやカスタムリンクもまとめて扱える物販アフィリエイト向けプラグインです。「商品リンクの作り方が分...
CSSの基礎

CSS・PHP・JavaScriptのバックアップ方法まとめ|WordPressカスタマイズ前に必須!

WordPressを使っていると、デザイン調整や機能追加のために CSS・PHP・JavaScriptを少しだけ編集したくなる瞬間はよくあります。「余白を調整し...
テーマ共通

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

ブログで使えるボックスデザイン(囲み枠)を厳選してご紹介します。コードはコピペ対応で簡単!!
アフィリエイト

【ポチップ対応】物販ASPの選び方・設定方法|Amazon・楽天・Yahoo提携サービス比較

見出し2025.11.28_PA-API(Amazon)利用についての内容を一部更新しました。アフィリエイトを始めたときにまず迷うのが、「どのASP(アフィリエ...
CSSの基礎

WordPress「追加CSSクラス」使い方|特定ブロックだけデザインを変える方法

WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか?「ボタンの色を変えたい」「箇条書きリストに下線を引きたい」「...
CSSの基礎

ChromeデベロッパーツールでCSSセレクタを調べる方法|初心者向けに解説

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

箇条書きリストデザイン|CSSで点の色を変える3つの方法

箇条書き(番号なしリスト)では、先頭に「・」のような黒い点(マーカー)が表示されます。このマーカーを自分好みにカスタマイズすることで、リストをサイトデザインに合...
テーマ共通

複数画像を切り替えるフェードスライダーの作り方|CSSアニメーション(JavaScript不要)

トップページにおしゃれな画像スライダーを置きたいけれど、「表示が重くなる」「JavaScriptの管理が不安」「できるだけシンプルに実装したい」と感じている方も...
テーマ共通

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

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

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

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

CSSでなめらかに点滅させる方法(コピペOK)

要素を「点滅」させるアニメーションは、注意を引きたいときセールやキャンペーンの強調警告や注意メッセージの表示などに効果的です。この記事では、「ゆっくり、なめらか...
Cocoon

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

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

Cocoonウィジェット・ショートコードで新着記事・人気記事に日付を表示する方法(投稿日・更新日)

Cocoonでは、新着記事・人気記事をブロック/ウィジェット/ショートコードの3通りで表示できます。投稿日や更新日の日付はデフォルトでは非表示ですが、表示方法に...
テーマ共通

同じページ内にジャンプ!HTMLアンカーリンクの正しい設定方法と使い方ガイド

長い記事の中で「ここを読みたいのにスクロールが面倒…」という経験はありませんか?そんな問題を解決してくれるのが アンカーリンク(ページ内リンク) です。目次・F...
Cocoon

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

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

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

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