Webカスタマイズ スクロールアニメーションでふわっと表示（動きをつける）｜CSS＋IntersectionObserverで簡単実装【コピペOK】
Webサイトでよく見かける、スクロールに合わせて「ふわっ」と表示されるアニメーション。あの動きが入るだけで、サイトが少しおしゃれに見えたりコンテンツが読みやすく...
ブログカスタマイズ
Webカスタマイズ 
Cocoonカスタマイズ 【Cocoon】白抜きボックスのカスタマイズ｜おしゃれデザインを追加+ワンクリックで切り替え
Cocoonで記事を装飾する方法として「段落ブロック」がありますが、「リストやボタンも入れたい…」と思ったとき、中にブロックを組み込む用途には向いていません。装...
Cocoonカスタマイズ Cocoon検索フォーム（検索窓）のカスタマイズ｜設置・デザイン・CSS調整まとめ
「検索フォームが少し味気ない…」「ブログ全体の雰囲気に合わせたい」そんなときはデザインを少し変えるだけでも印象が変わります。この記事では、CSSコピペで使える検...
Cocoonカスタマイズ 【Cocoon】特定のおすすめ記事をピックアップ表示する方法｜new_listショートコード（ordered_posts）の使い方
トップページを作っていると、「この記事はもっと目立たせたい」「まず最初に読んでほしい記事を表示したい」と思うことがあります。この記事では、new_list（or...
Cocoonカスタマイズ Cocoonタイムライン（ステップブロック）をおしゃれにカスタマイズ｜選べる5種類のデザイン
「タイムライン便利だけど、ちょっと地味かも…」今回紹介するのは、Cocoonタイムラインを実用レベルでおしゃれにするカスタマイズ集です。実は少し見せ方を整えるだ...
Cocoonカスタマイズ Cocoon通知エリア（お知らせバー）のカスタマイズ方法｜流れるアニメーション・ボタン化・ヘッダー上表示
「Cocoonの通知エリア、なんとなく地味かも…」「自然に目を引く感じにしたい」「お知らせやCTAをもっと見てもらいたい」そんな時におすすめなのが、通知エリアを...
Cocoonカスタマイズ Cocoon新着・人気記事ブロックを横並びにする方法｜2〜4列簡単切り替えカスタマイズ
Cocoonの新着記事・人気記事・ナビカードを横並びに表示する方法を解説。PC3列・スマホ2列などカラム数もワンクリックで切り替え可能。コピペで簡単導入できます。
Cocoonカスタマイズ Cocoonナビカードの設定と使い方｜記事ピックアップ・レイアウト調整・リボンカスタマイズ
Cocoonのナビカードは、おすすめ記事や読んでほしい記事をカード形式で分かりやすく紹介できる機能です。この記事では、ナビカード用メニューの作成方法ブロック・シ...
Cocoonカスタマイズ 【Cocoon】新着情報ブロックをニュースティッカー風にカスタマイズ｜日付を上へ移動＋自動スライド表示する方法
Cocoonの「新着情報」ブロックは、最新記事を手軽に表示できる便利な機能です。ただ、そのままだとタイトルが並ぶだけなので、少し物足りなく感じることもあります。...
Cocoonカスタマイズ Cocoonタブブロックを使いやすくカスタマイズ｜均等配置・折り返し・横スクロールをワンクリック化
Cocoonのタブブロックはとても便利なのですが、タブを均等幅にしたいスクロールではなく自動で折り返したいデザインを選びたいと感じたときに標準機能では設定できま...
Cocoonカスタマイズ 【Cocoon】サイト型トップページの作り方｜ブロックだけで簡単作成（初心者OK・CSSほぼ不要）
Cocoonでブログを始めたものの、「トップページがなんだか普通…」「おしゃれなサイトみたいにしたい」「でもHTMLやCSSは難しそう」そんなふうに感じたことが...
Webカスタマイズ CSSだけで作れるおしゃれなボタン・リンクデザイン集【コピペOK】
他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがいいな」といった演出。どうやって作られているの？実は、CSSだけで簡単に再現できるデザイン...
Cocoonカスタマイズ Cocoon「タブ見出しボックス」をおしゃれにカスタマイズ｜ワンクリックで選べるデザイン7種
Cocoonのタブ見出しボックスは、情報整理に便利です。ただ複数記事を書いていると、「便利だけど少し単調に見える」と感じることがあります。そこで、タブ見出しボッ...
Webカスタマイズ アンカーリンクの作り方｜HTMLで同じページ内リンクを設定する方法（WordPress対応）
長い記事を読んでいると、「ここだけ見たいのに、スクロールが長い…」と感じる瞬間があります。そんなときに便利なのが、アンカーリンク（ページ内リンク）。ページの途中...
カスタマイズの基本 【CSS】hoverでゆっくりなめらかに変化するアニメーションtransitionの使い方｜主要プロパティ一覧・動かない原因まで解説
Webサイトに動きを付けようとして、「急に切り替わって不自然」「もっと滑らかな動きにしたい」と感じたことはありませんか？そんなときに使うのが CSSのtrans...
カスタマイズの基本 CSSアニメーションの基本と使い方【初心者向け】@keyframes・実例・軽くするコツ
Webサイトに動きを加えたいなら、まず覚えておきたいのが CSSアニメーション（@keyframes と animation） です。この2つを理解すれば、Ja...
カスタマイズの基本 CSSの色を一括管理！CSS変数（カスタムプロパティ）の使い方｜var・:rootの基本と実践
「色を変えたいだけなのに、同じコードを何ヶ所も修正…」こんな非効率なCSS管理をしていませんか。CSS変数（カスタムプロパティ）を使えば、一箇所の変更だけでサイ...
Cocoonカスタマイズ Cocoonでフルワイド（全幅レイアウト）｜背景だけ横幅いっぱいに広げるCSSとカラムブロック設定
Cocoonのフルワイド（全幅レイアウト）をコピペで実装する方法を解説。背景だけを画面幅いっぱいに広げ、コンテンツは中央配置のまま表示。HTML版・カラムブロック版の手順や横スクロール対策も紹介します。
カスタマイズの基本 Cocoonカスタマイズ完全ガイド｜HTML・CSS・PHPの編集場所と使い分けを初心者向けに解説
Cocoonは無料テーマの中でも柔軟にカスタマイズできるテーマですが、「どこを編集すればいいの？」「HTMLとCSSとPHPの違いがわからない…」という初心者は...
Webカスタマイズ 見出しデザインをおしゃれにカスタマイズ【Cocoon対応・CSSサンプル付き】
見出しデザインを変えるだけで、記事の読みやすさや視認性、サイトのイメージは大きく変わります。この記事では、WordPress（無料ブログ含む）で使える見出しデザ...