【Cocoon】新着情報ブロックをニュースティッカー風にする方法｜日付を上へ移動＋自動スライド表示するカスタマイズ

Cocoonの「新着情報」ブロックは、最新記事を手軽に表示できる便利な機能です。ただ、そのままだとタイトルが並ぶだけなので、少し物足りなく感じることもあります。そこで今回は、新着情報の日付とカテゴリをタイトルの上へ移動し、さらに1件ずつ自動...

ポチップの使い方完全ガイド｜導入・ASP・Amazon設定・Pro・もしも比較まで解説

ポチップは、Amazon・楽天・Yahooなどの商品リンクを簡単に作成できるWordPressプラグインです。とはいえ、ポチップって何ができるの？ASPやAmazonの設定はどうすればいい？無料版とPro版はどっちを使うべき？もしも（かんた...

Cocoon装飾ブロック完全ガイド｜デザイン・カスタマイズ・使い方まとめ

Cocoonには、記事を見やすく整理できる装飾ブロックが数多く用意されています。ただ、どのブロックを使えばいいのか分からないカスタマイズ記事が増えてきて探しにくい装飾ブロックを一覧でまとめて見たいと感じることもあります。そこでこの記事では、...

【Cocoon】検索フォームのデザインをCSSで変更する方法｜コピペOKサンプル集

Cocoonの検索フォームは、CSSを少し追加するだけでデザインを変更できます。この記事では、Cocoonの検索フォームをCSSでデザイン変更する方法を、コピペで使えるサンプル付きで解説します。Cocoon検索フォームの基本構造（.sear...

Cocoonサイト型トップページの作り方まとめ｜ブロック版とHTMLカスタマイズを解説【初心者向け】

Cocoonのトップページは、ブログ型だけでなくWebサイトのような 「サイト型トップページ」 にカスタマイズできます。サイト型トップページにすると、人気記事やカテゴリー記事を整理して表示できるためブログを見やすく分かりやすい構成になります...

【Cocoon】FAQブロックの質問を見出し（H3）に変えるカスタマイズ｜SEO・可読性・回遊率UP

Cocoonの「FAQブロック」は、よくある質問を分かりやすく整理できる便利なブロックです。ただしデフォルトのままだと、質問文は見出しタグではなく通常のdiv要素として出力されます。そのため、目次に表示されない記事構造として評価されにくい長...

【Cocoon】new_listで特定記事をピックアップ表示する方法｜ordered_posts活用術（ショートコード）

この記事では、Cocoonテーマの new_list ショートコードを使って、ブログ内の「おすすめ記事」や「ピックアップ記事」を自由に表示する方法を解説します。「読んでほしい記事が埋もれてしまう…」「トップや記事下に、狙って記事を並べたい」...

Cocoon「見出しボックス」リストマーカー（点）の色を自動調整＆デザイン切り替えカスタマイズ

Cocoonの「見出しボックス」をもっとおしゃれに、もっと便利に。この記事では、リストマーカー（点の色）をボーダー色と合わせて統一感を出しつつ、デザインをワンクリックで切り替えられるカスタマイズ方法をご紹介します。デフォルト＋3種類（シンプ...

IntersectionObserverで実現する「スクロール連動アニメーション」の作り方

Webサイトでよく見かける、スクロールに合わせてふわっと要素が表示されるフェードインやスライドアニメーション。「自分のサイトでも簡単に作りたいけど難しそう…」と思っていませんか？実は、IntersectionObserver（インターセクシ...

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

Googleアドセンスに申請するときには、審査用のコードを自分のサイトの <head> 内に貼り付ける必要があります。このコードを正しく設置できないと審査が始まらず、合格できません。この記事では、アドセンス審査用コードの取得方法から、Wor...

CSSホバーアニメーション11選｜ボタンのおしゃれな実装例付き

マウスを乗せるだけで背景がスッと広がったり、左右にスライドしたり、中央から放射状に変化したり...ボタンにアニメーションを加えるだけでサイトの印象が変わります。この記事では、ホバーアニメーション付きのボタンデザインを11種類まとめてご紹介。...

Cocoonタイムラインブロック｜SWELL風カスタマイズ3つのデザインで汎用性アップ！

Cocoonのタイムラインブロックについて。「Cocoonをもっと使いこなしたい」「SWELLの洗練されたデザインに憧れるけど、テーマを変えるのはハードルが高い…」そんなあなたにおすすめのカスタマイズをご紹介します。この記事では、有料テーマ...

WordPressブログ開設後すぐにやっておきたい初期設定【優先度別】

WordPressをインストールしたばかりだと「まず何をすればいいの？」と迷うことがあります。実は、最初にしっかりと初期設定をしておくことで今後のサイト運営がずっとスムーズになります。逆に言えば、ここをおろそかにすると「後で手間のかかる修正...

Pochipp（ポチップ）活用｜Amazon商品検索の仕組みまとめ

Pochipp（ポチップ）を使う場合、Amazonアソシエイトの審査に合格しているかどうかで検索方法が変わってきます。この記事では、初心者の方にもわかりやすく、状況に応じた3つのAmazon商品検索の方法をまとめました。ご自身のステップに合...

CSSバックアップの方法｜安全にカスタマイズするための3つの手段＋サーバー活用術

CSSを編集してサイトのデザインをカスタマイズしたいけど、「もし失敗したらどうしよう…」と不安に感じることがあるかと思います。実は、ちょっとしたCSSの変更でもバックアップを取っておくかどうかで安心感がまったく違います。この記事では、安全に...

Cocoonボックスメニューのカラム数を自由にカスタマイズ！便利な活用法と手順を紹介

ワードプレスの無料人気テーマ「Cocoon（コクーン）」には、サイト内の導線設計に便利な「ボックスメニュー」という機能があります。見た目もシンプルで、アイコン付きのメニューをブロック形式で直感的に配置できるため、多くのユーザーが活用している...

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

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

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

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

【初心者向け】おすすめASP選びから始めるアフィリエイト収益化のコツ

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

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

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

バナーを中央寄せにする方法｜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アニメーションを指定するには

Web配色アイディア「3色だけでセンスのいい色」を譲っていただいた話

以前からずっと欲しかった本。『見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色』縁あって、SNSで交流のあるフォロワーさんから譲っていただきました。デザインにおける配色は多くの人が悩むポイント。でも、この本には初心者でも簡単に...

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

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

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

Webデザインでは視覚的なアクセントを加える方法は多くあります。その中でも、「境界線」や「背景スタイル」を工夫することでインパクトのある印象に。この記事では、SVGとCSSプロパティ（clip-path、linear-gradient、ma...

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

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

超簡単！Cocoonのブロック機能でサイト型トップページを作る方法

Cocoonを使ってオリジナルのトップページを作りたいな～「けど、どこから手を付けたらいいかわからない...」と迷っていませんか？そんな方のために、トップページのとても簡単な作り方をご紹介。この記事では、WordPressテーマ「Cocoo...

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

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

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

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

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

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

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

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

Cocoon検索ボックスをアピールエリアに表示する方法【ショートコードで簡単対応】

Cocoonの「アピールエリア」、もっと活用してみませんか？「少しデザインに工夫を加えたい」「訪問者が目的の記事にすぐたどり着けるようにしたい」そんなときにおすすめなのが、検索フォームの設置。この記事では、Cocoonテーマのアピールエリア...

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

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

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

ポチップは、Amazon・楽天市場・Yahoo!の商品リンクはもちろん、メルカリやカスタムリンクまで自由に追加できる物販アフィリエイトに特化したプラグインです。デザインや機能を思いのままにカスタマイズでき、編集画面内で直感的にリンクを作れる...

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

ポチップは、Amazon・楽天市場・Yahoo!の商品リンクはもちろん、メルカリやカスタムリンクまで自由に追加できる便利なプラグインです。デザインや機能を思いのままにカスタマイズでき、編集画面内で直感的にリンクを作れる使いやすさが魅力。この...

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

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

Cocoonで比較表（テーブル）を作成｜記号○△✕を入れるカスタマイズ

お知らせこのカスタマイズはCocoon 2.7.1で標準機能として実装されました。そのため、この記事の内容は実質的に不要となっていますが、備忘録として残しています。Cocoonテーマを使っている方、テーブルを使った表のデザインにお悩みではな...

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

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

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

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

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

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

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

もうひとつブログを作りたいな～ブログを運営してしばらくすると、別のジャンルに方向転換したい、雑記ブログだけど伸びているジャンルを特化して別サイトに独立させたいなどなど...新しく別サイトを作りたいと思うことがあるのではないでしょうか。選択肢...

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

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

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

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

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

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

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

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

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

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

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

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

Pochipp Pro（ポチッププロ）は必要？無料版との違い・料金・導入手順を徹底解説

Pochipp Pro（ポチッププロ）｜無料版との違い・価格・導入手順まで詳しく紹介

アフィリエイトリンクを簡単・おしゃれに表示できる人気プラグイン、ポチップ。Pochipp Proにアップグレードすると、無料版では使えないセール情報の自動取得やAmazon口コミリンク表示など、ブログ収益を伸ばす機能が使えるように！さらに、...

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

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

ポチップ対応ASPはどれがいい？初心者〜中級者向けおすすめ比較と失敗しない選び方＋設定方法【2026年最新版】

更新日：2026年2月19日※PA-API条件変更（2025年11月）対応済み物販アフィリエイトを始めると、まず迷うのが「ポチップはどの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なし）

必要な情報へ迅速にアクセスするために便利なのが「タブ切り替え」機能。この記事では、JavaScriptを使わずにHTMLとCSSだけでタブ切り替えを実現する方法をご紹介します。フォーム要素であるラジオボタンを応用することで、軽量かつシンプル...

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

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

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

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

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

この記事では、CSSを使って要素をなめらかに点滅させる方法を紹介します。要素を点滅させるアニメーションは視認性を高め、注目を引く際に便利です。＼例えばこの部分の文字を点滅／ゆっくりなめらかに点滅するイメージですこのように文字を点滅させたい方...

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

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

Googleアドセンス審査に合格するには｜必須対策＆コード貼り付け方法

ブロガーブログで収益を得たい！そんな夢を叶える第一歩として、Googleアドセンスは多くのブロガーやウェブサイト運営者に大人気のツールです。でも、審査を通過するにはちょっとしたコツが必要。この記事では、Googleアドセンスの基本的な仕組み...

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

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