Cocoon WordPressのカラーパレットを自由に変更・追加する方法【Cocoon対応】
WordPressのブロックエディタ（Gutenberg）では、文字色や背景色の変更に便利な「カラーパレット」が用意されています。しかし、標準で用意されている色は原色に近いビビッドなカラーが多く、自分のサイトに合わないと感じることがあるかも...
Cocoon 
Cocoon Cocoonカスタマイズの基本｜HTML・CSSの編集方法
「もう少し見やすくしたいな」「デザインをちょっと変えてみたい…」WordPressを使っていると、そんなふうに感じることがありますよね。そんなときに役立つのがHTMLやCSSの編集です。ほんの少し手を加えるだけでもサイトの見た目や使いやすさ...
アフィリエイト ポチップ vs もしもアフィリエイト（かんたんリンク）比較｜物販するならどちらが使いやすい？
「かんたんリンク」と「ポチップ」って何が違うの？どっちを使ったほうが収益につながるの？アフィリエイトを始めたばかりの方にとって、２つのリンク作成ツールは似て見えるかもしれません。でも実は、機能や使い勝手、導入のハードルに大きな違いがあります...
テーマ共通 【コピペOK】おしゃれなボックスデザイン！ブログを彩るCSS囲み枠集
ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！
テーマ共通 CSS Transitionの使い方｜簡単にスムーズなアニメーションを実現
別記事で「animation」プロパティを使ったCSSアニメーションの基本を紹介しました。「animation」プロパティは@keyframesと組み合わせて複雑なアニメーションを作成できますが、簡単な動きにはやや記述が冗長です。そこでこの...
テーマ共通 ワードプレスCSS・PHPバックアップ方法｜FTPで安全カスタマイズ
CSSを編集してサイトのデザインをカスタマイズしたいけど「もし失敗したらどうしよう…」と不安に感じることがあるかと思います。ほんの少しのCSS編集でも、事前にバックアップを取っておくことでトラブルへの備えができ、安心して作業を進めることがで...
Cocoon Cocoonボックスメニューのカラム数をクリックで変更する｜2〜6列対応のカスタマイズ方法
WordPressの無料テーマ「Cocoon」には、サイト内の導線設計に便利な「ボックスメニュー」機能があります。見た目がシンプルでアイコン付きのメニューをブロック形式で直感的に配置できるため使っているサイトを多く見かける定番機能。以下の3...
テーマ共通 サイトに「動き」をつけるCSSアニメーション｜基本的な指定方法を覚えよう
この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について解説します。サイトに「動き」といえばJavascriptが必要？というイメージがあるかもしれませんが、アニメーションを使うことでCSSでもウェブページに動きをつ...
Cocoon ファーストビューをSWELL風に！Cocoonアピールエリアをフルスクリーン＆動きのあるデザインにする方法
Cocoonのアピールエリアは背景画像やテキストを表示することでサイト全体の第一印象を決める大事なパーツ。ここをうまく活用すれば訪問者の関心をグッと引き寄せることができます。この記事では、有料テーマSWELL風にアピールエリアをフルスクリー...
テーマ共通 WordPressでテキストリンクをおしゃれに装飾する方法｜ブロックエディタ＆CSSで簡単カスタマイズ
この記事では、WordPressのブロックエディタとCSSを使ってテキストリンクをスタイリッシュに装飾する方法をわかりやすく解説します。テーマによって標準のボタンブロックがありますが、今回はあくまで普通のテキストリンクの装飾です。いつものコ...
テーマ共通 ブログデザインを自由自在にカスタマイズする手順を紹介します｜HTMLとCSSの基礎知識【初心者向け】
ブログデザインをもっと自分らしく作りたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Cascading Style Sheets）の知識が必要。Webデザインの基本であるHT...
Cocoon Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法
Cocoonでサイドバーの目次追従したときに見切れてしまうときの対策をご紹介。
テーマ共通 もう迷わない！バナーなどの要素を上下左右中央寄せにする方法｜CSS使用
「なんだか見た目がしっくりこない…」そんな時は“中央寄せ”がカギになるかもしれません。ウェブデザインでは、バナーや見出しといった要素をどこに配置するかで全体の印象が大きく変わります。特に中央に配置することで、視線を自然に集めデザインにまとま...
Cocoon Cocoonの通知エリアをカスタマイズ！流れる文字アニメーションとボタンを設定する方法
Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利な機能です。この記事では、以下の通知エリアのカスタマイズ方法を紹介します。通知エ...
テーマ共通 CSSで疑似要素に影をつける方法｜box-shadowとdrop-shadowの違いを比較
この記事では、CSSを使って疑似要素に影をつける方法を紹介します。使用するCSSプロパティは、以下の2つです。box-shadowfilter: drop-shadow一般的に要素に影をつけるにはbox-shadowプロパティがよく使われま...
テーマ共通 CSSの変更が反映されない原因は？デベロッパーツールを使った確認方法と対処法まとめ
CSSが反映されない原因を詳しく解説！デベロッパーツールの活用方法から優先度やキャッシュの影響、エラーチェック方法まで、初心者にも分かりやすい解決策をまとめました。
テーマ共通 Webデザインの強い味方！ChromeデベロッパーツールでCSSセレクタを調べる方法
このような方向けの記事ですCSSを使ったカスタマイズに興味があるHTMLとCSSの基本を知りたいデベロッパーツールの使い方を学びたいWebデザインやサイトカスタマイズにおいて、「要素のCSSセレクタを調べる」ことは必須スキルです。「デベロッ...
Cocoon Cocoon「新着記事」「もっと見る」「次のページ」ボタン・キャプションのテキストを変更する方法
Cocoonテーマを使用している際に、あらかじめ設定されているボタンやキャプションのテキスト文言を変更する方法を紹介します。PHPを活用し簡単にカスタマイズできるのでぜひ参考にしてください。以下のテキストを変更できます「新着記事」（見出し）...
Cocoon Cocoon｜新着記事に期間限定で「NEW!」を表示する方法
記事タイトルの前にNEW!をつけたいな。この記事では、Cocoonテーマを使用しているサイトで、新着記事に「NEW!」ラベルを一定期間だけ表示する方法を解説します。PHPコードとCSSを使った手順をに説明しますのでぜひ参考にしてください。新...
Cocoon Cocoonウィジェット新着記事・人気記事に日付を表示する設定方法（投稿日・更新日）
テーマ「Cocoon」では、ショートコードやブロックを利用して新着記事や人気記事を簡単に表示できます。参考記事新着記事一覧を表示するショートコードの利用方法人気記事一覧を表示するショートコードの利用方法デフォルトではCocoonのウィジェッ...