ワードプレスのパターン（再利用ブロック）とは？作り方と便利な使い方を解説

ワードプレスの「パターン」機能、使ったことはありますか？これは、特定のブロックやブロックグループを登録して、他の投稿やページでも簡単に再利用できる便利な機能です。例えば、よく使う装飾ボックスやボタン付きのコールトゥアクションなどをパターンと...

Cocoonの通知エリアをカスタマイズ！流れる文字アニメーションを設定する方法

Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利な機能です。この記事では、以下の通知エリアのカスタマイズ方法を紹介します。通知エ...

【初心者向け】アフィリエイトASPの選び方とおすすめ5社を比較！

アフィリエイトで成果を出すためには自分に合ったASP（アフィリエイト・サービス・プロバイダー）を選ぶことが欠かせません。ASPによって扱っている案件や得意ジャンル、報酬の仕組みが異なるため、適切なASPを活用することで収益アップにつながりま...

ポチップの基本機能を解説｜アフィリエイトに最適な便利ツール

ポチップはワードプレスでアフィリエイトリンクを簡単に作成・管理できるプラグインです。特にAmazon・楽天・Yahoo!ショッピングの3大ECサイトの商品リンクを一括で表示できる点が魅力です。この記事ではポチップの基本機能について詳しく解説...

バナーを中央寄せにする方法｜HTMLインラインスタイルとCSS記述方法の違い

ウェブページをデザインする際、バナーを中央に配置することは重要なポイントの一つです。適切な配置方法を選ぶことで、見栄えの良いレイアウトをスムーズに作成できます。この記事では、HTMLとCSSを使ってバナーを中央に寄せる方法と、記述方法の違い...

Cocoonラベルボックス｜複数デザインをサイドバーで切り替えるカスタマイズ

今回は、Cocoonテーマのブロック「ラベルボックス」。見出しラベルボックス機能としてはオーソドックスで使いやすいですが、線をシュッと細くして余白を整えればもっとオシャレになりそうな雰囲気です。そして見出しやアイコン位置を変えると汎用的に使...

Cocoonアコーディオン（トグル）ボックス／複数デザインをサイドバーで切り替えるカスタマイズ

アコーディオンボックスを活用することで情報量の多いページでもスッキリ整理できます。Cocoonテーマにも標準搭載されておりとても便利ですが、準備されているデザインは一種類のためにもっとバリエーションが欲しいことも。アコーディオンコンテンツ特...

Cocoonタブブロック／複数デザインをサイドバーで切り替えるカスタマイズ

Cocoonテーマには、直感的にタブ切り替えができる便利な「タブ」ブロックが標準搭載されています。Tab 1Tab 2Tab 3ここに内容を入力します。この記事では、Cocoonテーマのタブブロックに簡単操作で切り替えられる9種類のスタイル...

Cocoonブログカードをすっきりと／表示スタイルをサイドバーで選べるカスタマイズ

「こんなことできたらいいな」シリーズです。 ワードプレスのブログカードは、他の記事や外部リンクを視覚的にわかりやすく紹介するためのリンク形式です。リンク先のタイトル、サムネイル画像、簡単な抜粋文などを自動的に取得し、コンパクトにまとめて表示

Cocoon白抜きボックス／複数デザインをサイドバーで切り替えるカスタマイズ

「こんなことできたらいいな～」を考えました！ 今回はとても使い勝手のよい「白抜きボックス」です。 このような外枠だけのシンプルなボックスです 「白抜きボックス」を使う際に、サイドバーで複数のデザインを切り替えるカスタマイズを紹介します。 当

Cocoon／新着記事・人気記事ブロックのカラム数をサイドバーで切り替えるカスタマイズ

「こんなことできたらいいな～」を考えました！ 今回は、テーマCocoonにおいて「新着記事」「人気記事」のカラム数をサイドバーで切り替える方法を紹介します。 テーマCocoonでは、ブロック機能で簡単に「新着記事」や「人気記事」を表示でき、

Cocoon「アイコンボックス」複数デザインをサイドバーで切り替えるカスタマイズ

「こんなことできたらいいな～」を考えました！この記事では、Cocoonテーマのブロック「アイコンボックス」に、簡単に切り替えられる12種類のスタイルを追加するカスタマイズをご紹介します。このカスタマイズをすることで、視覚的なアクセントが加わ...

Cocoon「タブ見出しボックス」のデザインをブロックスタイル（サイドバー）から選択するカスタマイズ

今回は、Cocoonテーマのブロック「タブ見出しボックス」。見出しタブ見出しボックス機能としてはオーソドックスでとても使いやすいですが、線をシュッと細くして余白を整えればもっとオシャレになりそうな雰囲気です。そして見出しの位置を変えるとさら...

CSSで複数画像を切り替えるアニメーションを作ってみる

トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあるとぱっと目を引くことができ華やかです。 通常、これらのアニメーションはJavaScriptを使って実装されますが、シンプルな切り替えな

CSSカスタムプロパティ（変数）の使い方／一度設定した値を繰り返し呼び出せる！

CSSカスタムプロパティ（またはCSS変数）は、ウェブサイトのスタイルを管理するためのとても便利なツールです。 簡単に言うと、一度設定した値を何度も使えるようにする仕組みです。これにより、色やサイズなどを一箇所でまとめて変更でき、コードの管

Cocoonで作るCTAボックス／サービス、旅行系、物販の商品リンク作成に便利

CTA（Call to Action）は、訪問者に何かしらの行動を起こすよう促すための要素や文言のことを。サイトで商品やサービスを紹介するときに活躍します。 この記事では、ブロックエディタを使った自作CTAボックスの作り方を紹介します。 こ

ワードプレスでHTMLとCSSが反映されない原因は？確認することと対処法

CSSを書いたけど反映されない... HTMLとCSSを使ってカスタマイズした際に反映されないことがよくあります。この記事では、CSSが正しく反映されない場合に確認すべきポイントと対処法について解説します。 初歩的なスペルミスや構文エラーが

【初心者向け】CSSを使って自由にスタイル（色や形）をカスタマイズする手順を解説

ブログデザインをもっと自分らしくカスタマイズしたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Cascading Style Sheets）の知識が必要です。Webデザインの...

滑らかな動きをつける！CSSアニメーション「transition」プロパティの使い方

別記事でanimationプロパティを使ったCSSアニメーションについてご紹介しました。 animationプロパティでは@keyframesとanimationプロパティの2つを設定する必要があり、複雑なアニメーションに対応できる反面、簡

CSSアニメーション／基本的な指定方法

CSSアニメーションは、ウェブページの視覚的な魅力を高めるために使用されます。この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について詳しく説明します。 CSSアニメーションの基本 CSSアニメーションを指定するには

欲しかった書籍「3色だけでセンスのいい色」をフォロワーさんから譲っていただいた話

以前からずっと欲しかった本、「見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色」を、SNSエックス（旧：Twitter）で交流しているフォロワーさんから譲っていただきました！ この本は、ブログデザインの配色に関してのアイデアが

HTML・CSSで作るオシャレな境界線スタイル／トップページ作りのアクセントにおすすめ

Webデザインにおいて視覚的なアクセントを加える方法は多くあります。その中でも、「境界線」や「背景スタイル」を工夫することでより洗練されたデザインを実現できます。この記事では、【SVG】とCSSプロパティの【clip-path】【linea...

簡単！ブロック機能でCocoonサイト型トップページ作成

Cocoonを使ってオリジナルのトップページを作りたいけど、どこから手を付けたらいいかわからない……この記事では、ワードプレステーマ「Cocoon」を使用し、初心者でも簡単におこなえるトップページの作成手順を分かりやすく解説します。特に「ブ...

サブドメインをSSL化（HTTPSにする）、リダイレクトする方法／エックスサーバー設定

ワードプレスを開設したら、まず最初にやるべき重要な設定のひとつが「SSL化（https化）」です。SSL（Secure Sockets Layer）とは、インターネット上の通信を暗号化しデータの盗聴や改ざんを防ぐ技術です。WebサイトをSS...

ワードプレスのブロック（HTML）にクラスをつけるなら「追加CSSクラス」が超便利！

こんな方におすすめの記事です カスタマイズ初心者 ワードプレスのブロックエディタを使っている ブロックに簡単にクラス名をつける方法を知りたい ブロックエディタユーザーでカスタマイズをされる方、どのようにブロック（HTML）にクラスを追加して

Cocoonウィジェット新着・人気記事に日付を表示する方法（投稿日・更新日）

テーマ「Cocoon」では、ショートコードやブロックを利用して新着記事や人気記事を簡単に表示できます。参考記事新着記事一覧を表示するショートコードの利用方法人気記事一覧を表示するショートコードの利用方法デフォルトではCocoonのウィジェッ...

Cocoon検索ボックスをアピールエリアに表示する方法

今回は『検索ボックス』をアピールエリアに表示する方法についてご紹介します。 目立つ場所に検索ボックスを置きたい と思っている方のお役に立てる記事となっています。 ＼当サイトのトップページでも表示しています／ 当記事では、検索ボックスを作成す

Pochipp(ポチップ)の使い方／商品リンクの作成方法を画像付きで解説

ポチップは、簡単かつ迅速に商品リンクを作成するための便利なWordPressプラグインです。この記事では、ポチップの基本的な使い方について解説します。 直感的な操作が多くとても使いやすいので、ポチップをこれから使いたい方はご覧ください。 ＼

Cocoonで比較表(テーブル)を作る／背景に記号◎○△×を入れるSWELL風カスタマイズ

この記事はこのような方におすすめ テーマ「Cocoon」を使っている オシャレな比較表を作りたい テーブルを使った表に簡単に◎○△×を入れたい テーマCocoonを使っている方、テーブルを使った表のデザインにお悩みではないでしょうか。 悩め

Cocoon「新着記事（見出し）」「もっと見る」「次のページ」のキャプション（テキスト）を変更する

Cocoonであらかじめ設定されているボタンやキャプションのテキストを変更したいときがあるかと思いますので、変更方法を書いておきます。 当記事はCocoonフォーラムを参考にしています。 コードを記述する場所／Cocoon（子テーマ）のfu

Cocoonでもフルワイドに！セクション背景色をつけてトップページ作成

当記事について 当記事のカスタマイズを反映したサンプルページはこちら。 トップページカスタマイズと組み合わせできるようにしました。 解説とコピペできるコードを有料公開しています。 NEW 実例集ページを作りました。【掲載受付中です】 今回は

サブドメインで新サイトを作る方法／エックスサーバー設定

この記事で分かること 一つのドメインで複数のウェブサイトを運営する方法 エックスサーバーでサブドメインを設定する方法 サブドメンにワードプレスをインストールする方法 ここを解説 もうひとつブログを作りたいな～ ブログを運営していると、別のジ

Cocoon／テーブル(表)の中にリンクボタンを設置する方法

今回はテーブル（表）について。 表の中にリンクボタンを入れたいなぁ。 このような比較表などを作ったときに、例えば公式サイトへのリンクやアフィリエイトリンクを付けたい場合がありますよね。 そんなときにテキストリンクは作れるけどボタンにしたいな

Pochipp(ポチップ)カスタマイズ／リンクボタンを並び替えてアピール

この記事で分かること ポチップのデザイン（ボタン、背景）を整える方法 ポチップのロゴを消す方法 ポチップのリンクボタンを並び替える方法 ここを解説

パーマリンクから日付を削除＆エックスサーバーでリダイレクトする方法

この記事に書いてあること パーマリンクを変更する方法（パーマリンクから日付を削除） 301リダイレクトする方法（サブドメイン、サブディレクトリ） URLなどテキストを一括で置き換える方法 古いスラッグ（パーマリンク）をデータベースから削除す

Cocoonナビカード／横並び、リボンの色変更するカスタマイズ

今回ご紹介するのはCocoonの『ナビカード』。 Cocoonの標準機能ですが、使ったことがない方も多いかと思います。 ナビカードの特徴 表示する記事をピップアップできる便利 斜めがけリボンをつけられる（5種類） ショートコード、またはウィ

もしもアフィリエイト(かんたんリンク)と比較したポチップ基本機能

「ポチップ」と「もしもアフィリエイト」どんな違いがあるの？ このような疑問を解決します。 この記事に書いてあること 「Pochipp(ポチップ)」と「もしもアフィリエイト」の機能比較 Pochipp(ポチップ)の基本機能 Pochipp(ポ

PochippPro(ポチッププロ)で売上アップ期待！具体的な設定方法

実際に使ってみた『便利機能／個人的ベスト3』を追加しました。 Pochipp(ポチップ)を導入した当サイト。 Pochipp(ポチップ)はブロックエディタ専用の商品リンク作成プラグインです このたび有料版Proにバージョンアップしました。

Pochipp(ポチップ)設定方法／Amazonアソシエイト、もしもアフィリエイト経由の違いを解説

ポチップを始めたいけど最初どうやるんだろう... そんな疑問を解決します。 この記事で分かること ポチップのインストール方法 ポチップに必要な初期設定（ASP登録） もしもアフィリエイトを利用しないときは？ Amazonはアソシエイト、もし

CSSセレクタの調べ方／カスタマイズにはデベロッパーツール（クローム開発者ツール）が必須！

この記事で分かること 私がおこなっているカスタマイズの流れ CSSコードの書き方【基本】 セレクタの調べ方（この記事ではクラス名） デベロッパーツールの見方 SWELL風目次デザインのCSS アピールエリアのカスタマイズやサイト型トップペー

ブログ運営・Cocoonカスタマイズ履歴

この記事は当ブログのカスタマイズ履歴と、参考にしたサイトなどを備忘録的にまとめています。 トップページ作成（固定ページ使用） 大きく変更したところのみ抜粋します。 Cocoonトップページに自作タブ切り替えを導入 固定ページ＋タブ切り替えを

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

HTML？CSS？どこに書いたらいいの？ 戸惑う方も多いかと思いますので、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめました。 特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。 見たい

Cocoon目次追従／サイドバー固定の目次に垂直スクロールバーを設置する（CSS）

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

Cocoonで作るサイト型トップページ／オシャレなSWELL風（固定ページ使用）

お知らせ この記事で作成できるトップページのサンプルはこちら。 当記事のカスタマイズを実装されたサイトを紹介します。 コピペできるコードを有料公開しています。 X（Twitter）のポストに反響いただきました。 最近ブログサイトでよく見かけ

X（Twitter）にサイト画像を表示するには？CocoonのOGP設定

SNSでサイトや記事をシェアしたときにOGP画像を表示する方法をご紹介します。意外と設定していないデフォルトの方が多いのでは？イメージを伝えて読者に訪れてもらえるようなサイトにしましょう。

同じページ内にジャンプ！アンカーリンクの設定方法／CSSでスムーススクロールもできる

今回はページ内リンクについて。（アンカーリンクとも呼ばれます） ページ内リンク？普通のリンクとは違うの？？ 同じページ内の途中にジャンプするイメージです！例えば下のボタンをクリックしてみてね。（戻るボタンでここに戻ってこれます） 記事の最後

ボックスデザイン（囲み枠）CSSコピペOK！ブログを見やすく装飾

ブログで使えるボックスデザイン（囲み枠）を厳選してご紹介します。コードはコピペ対応で簡単！！

Cocoonアピールエリア／SWELL風オシャレなトップページ（ファーストビジュアル）を作ってみるカスタマイズ

ここ数年で人気が出てユーザーが増えているワードプレス有料テーマの「SWELL」。 綺麗なサイトデザインやトップページのカスタマイズ性、豊富なブロック機能など魅力的な要素がたくさんあります。 SWELLが欲しい... でもそこは有料テーマで少

Cocoonカラーパレットの色を追加・変更する2つの方法

ワードプレスで記事を書くときに使うカラーパレットについて。 文字の色を変えるとき、ボックスの枠や背景色を変えるときなど誰もが使うところですね！今回はこのパレットの色を変えるカスタマイズについて書いていきます。 Cocoon機能と、PHPを編

Cocoon見出しデザインと装飾をリセットする方法／CSSコピペOK

見出しを好きなデザインに変えたいな～ 今回は記事を読むときに目にする、見出しのデザインについてご紹介します。 この記事で分かること 見出しのデフォルト装飾をリセットする方法 簡単カスタマイズ／見出しでよく使うCSSプロパティ例 見出しのデザ

ワードプレスのリストデザイン（箇条書き）点の色を変える方法

記事を書くときに使われる箇条書きのリスト。 要点を見やすく、伝えやすくするためにどんなサイトでも使われていますね。 今回はリストのデザインを少し変えてみるカスタマイズについて。 具体的には先頭に付く点の色を変えてみます！ 当記事では3つの方

新着記事に一定期間だけ「NEW!」を表示するには／WordPress（ワードプレス）

ブログに来てもらったときにまず見てもらいたいのが新着記事ですね。 記事タイトルの前に、一目で新着記事と分かるようなNEW!をつけたいな。 と思ったけど、ワープレスの設定画面ではこの機能はついていないので、自分でカスタマイズしたいと思います。

Cocoon人気記事ランキングカスタマイズ／ラベル背景色を変更する方法

今回はCocoonの人気記事ランキングのカスタマイズについて。 この2点について書いています ランキング部分を丸くして少し可愛くする 個別に1～3位までのランキング番号部分の背景色を変更する Cocoon人気記事ランキング／カスタマイズのイ

Cocoon吹き出しに影をつけるCSS／box-shadowとfilter:drop-shadowの違い

数多くあるワードプレスのテーマの中でも「Cocoon」は無料なのに高機能でとても使いやすく愛用しています。 各種装飾ボックスの他、例えば次のような吹き出しもプラグインを入れることなく簡単に作れてしまいます。 シンプルなデザインの吹き出しでと

タブ切り替えをHTMLとCSSで実装（JavaScriptなし／複数設置可）

Cocoonでも、有料テーマのようにタブ切り替えできないかな？ CodePenでタブ切り替えを作成してみました。 実際に動作やコードを確認できます See the Pen タブ切り替え by はっちゃん (@hacchan) on Code

テキストリンクをオシャレに装飾（ボタン風＆矢印スタイル）CSSコピペOK

今回はテキストリンクをボタン風に装飾する方法をご紹介します。 WordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンを作れる機能がありますが、今回のカスタマイズはテキストリンクをCSSで装飾し、ボタン風に見せる方法。

CSSで文字をなめらかに点滅させる方法（コピペOK）

この記事では文字をなめらかに点滅させる方法をご紹介します。 当サイトの場合、トップページに表示した検索ボックス上の文字を点滅させるためにこのカスタマイズを導入しています。 ↓この部分の文字を点滅 ＼気になるキーワードで検索／ ゆっくりなめら

Googleアドセンス審査合格のための対策／申請コードの貼り付け方

ブロガーアドセンスに合格したいGoogleアドセンスは多くのブロガーやウェブサイト運営者にとって収益化の手段のひとつですが、審査に合格するためにはいくつかのポイントを押さえる必要があります。この記事では、Googleアドセンスの基本的な仕組...