Pochipp（ポチップ）を使う場合、Amazonアソシエイトの審査に合格しているかどうかで検索方法が変わってきます。この記事では、初心者の方にもわかりやすく、状況に応じた3つのAmazon商品検索の方法をまとめました。ご自身のステップに合...
タブ切り替えをHTMLとCSSで実装（JavaScriptなし／複数設置可）
Cocoonでも、有料テーマのようにタブ切り替えできないかな？ CodePenでタブ切り替えを作成してみました。 実際に動作やコードを確認できます See the Pen タブ切り替え by はっちゃん (@hacchan) on Code
テキストリンクをオシャレに装飾（ボタン風＆矢印スタイル）CSSコピペOK
今回はテキストリンクをボタン風に装飾する方法をご紹介します。 WordPressの有料テーマや無料テーマの「Cocoon」には標準でボタンを作れる機能がありますが、今回のカスタマイズはテキストリンクをCSSで装飾し、ボタン風に見せる方法。
この記事では文字をなめらかに点滅させる方法をご紹介します。 当サイトの場合、トップページに表示した検索ボックス上の文字を点滅させるためにこのカスタマイズを導入しています。 ↓この部分の文字を点滅 ＼気になるキーワードで検索／ ゆっくりなめら
「ブログリーダー」を活用して、はるみさんをフォローしませんか？
Pochipp（ポチップ）を使う場合、Amazonアソシエイトの審査に合格しているかどうかで検索方法が変わってきます。この記事では、初心者の方にもわかりやすく、状況に応じた3つのAmazon商品検索の方法をまとめました。ご自身のステップに合...
CSSを編集してサイトのデザインをカスタマイズしたいけど、「もし失敗したらどうしよう…」と不安に感じることがあるかと思います。実は、ちょっとしたCSSの変更でもバックアップを取っておくかどうかで安心感がまったく違います。この記事では、安全に...
ワードプレスの無料人気テーマ「Cocoon（コクーン）」には、サイト内の導線設計に便利な「ボックスメニュー」という機能があります。見た目もシンプルで、アイコン付きのメニューをブロック形式で直感的に配置できるため、多くのユーザーが活用している...
ワードプレスの「パターン」機能、使ったことはありますか？これは、特定のブロックやブロックグループを登録して、他の投稿やページでも簡単に再利用できる便利な機能です。例えば、よく使う装飾ボックスやボタン付きのコールトゥアクションなどをパターンと...
Cocoonでは、テーマ標準機能を使って通知エリアを簡単に表示できます。通知エリアは、サイト訪問者に重要なメッセージを伝えたり、特定のページへ誘導するための便利な機能です。この記事では、以下の通知エリアのカスタマイズ方法を紹介します。通知エ...
アフィリエイトで成果を出すためには自分に合ったASP（アフィリエイト・サービス・プロバイダー）を選ぶことが欠かせません。ASPによって扱っている案件や得意ジャンル、報酬の仕組みが異なるため、適切なASPを活用することで収益アップにつながりま...
ウェブページをデザインする際、バナーを中央に配置することは重要なポイントの一つです。適切な配置方法を選ぶことで、見栄えの良いレイアウトをスムーズに作成できます。この記事では、HTMLとCSSを使ってバナーを中央に寄せる方法と、記述方法の違い...
今回は、Cocoonテーマのブロック「ラベルボックス」。見出しラベルボックス機能としてはオーソドックスで使いやすいですが、線をシュッと細くして余白を整えればもっとオシャレになりそうな雰囲気です。そして見出しやアイコン位置を変えると汎用的に使...
アコーディオンボックスを活用することで情報量の多いページでもスッキリ整理できます。Cocoonテーマにも標準搭載されておりとても便利ですが、準備されているデザインは一種類のためにもっとバリエーションが欲しいことも。アコーディオンコンテンツ特...
Cocoonテーマには、直感的にタブ切り替えができる便利な「タブ」ブロックが標準搭載されています。Tab 1Tab 2Tab 3ここに内容を入力します。この記事では、Cocoonテーマのタブブロックに簡単操作で切り替えられる9種類のスタイル...
「こんなことできたらいいな」シリーズです。 ワードプレスのブログカードは、他の記事や外部リンクを視覚的にわかりやすく紹介するためのリンク形式です。リンク先のタイトル、サムネイル画像、簡単な抜粋文などを自動的に取得し、コンパクトにまとめて表示
「こんなことできたらいいな～」を考えました！ 今回はとても使い勝手のよい「白抜きボックス」です。 このような外枠だけのシンプルなボックスです 「白抜きボックス」を使う際に、サイドバーで複数のデザインを切り替えるカスタマイズを紹介します。 当
「こんなことできたらいいな～」を考えました！ 今回は、テーマCocoonにおいて「新着記事」「人気記事」のカラム数をサイドバーで切り替える方法を紹介します。 テーマCocoonでは、ブロック機能で簡単に「新着記事」や「人気記事」を表示でき、
「こんなことできたらいいな～」を考えました！この記事では、Cocoonテーマのブロック「アイコンボックス」に、簡単に切り替えられる12種類のスタイルを追加するカスタマイズをご紹介します。このカスタマイズをすることで、視覚的なアクセントが加わ...
今回は、Cocoonテーマのブロック「タブ見出しボックス」。見出しタブ見出しボックス機能としてはオーソドックスでとても使いやすいですが、線をシュッと細くして余白を整えればもっとオシャレになりそうな雰囲気です。そして見出しの位置を変えるとさら...
トップページのメインビジュアルに、画像スライダーやカルーセルなど複数の画像を切り替えるアニメーションがあるとぱっと目を引くことができ華やかです。 通常、これらのアニメーションはJavaScriptを使って実装されますが、シンプルな切り替えな
CSSカスタムプロパティ（またはCSS変数）は、ウェブサイトのスタイルを管理するためのとても便利なツールです。 簡単に言うと、一度設定した値を何度も使えるようにする仕組みです。これにより、色やサイズなどを一箇所でまとめて変更でき、コードの管
CTA（Call to Action）は、訪問者に何かしらの行動を起こすよう促すための要素や文言のことを。サイトで商品やサービスを紹介するときに活躍します。 この記事では、ブロックエディタを使った自作CTAボックスの作り方を紹介します。 こ
CSSを書いたけど反映されない... HTMLとCSSを使ってカスタマイズした際に反映されないことがよくあります。この記事では、CSSが正しく反映されない場合に確認すべきポイントと対処法について解説します。 初歩的なスペルミスや構文エラーが
ブログデザインをもっと自分らしくカスタマイズしたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Cascading Style Sheets）の知識が必要です。Webデザインの...
CTA（Call to Action）は、訪問者に何かしらの行動を起こすよう促すための要素や文言のことを。サイトで商品やサービスを紹介するときに活躍します。 この記事では、ブロックエディタを使った自作CTAボックスの作り方を紹介します。 こ
CSSを書いたけど反映されない... HTMLとCSSを使ってカスタマイズした際に反映されないことがよくあります。この記事では、CSSが正しく反映されない場合に確認すべきポイントと対処法について解説します。 初歩的なスペルミスや構文エラーが
ブログデザインをもっと自分らしくカスタマイズしたいと感じたことはありませんか？自分好みにカスタマイズするためには、テーマ独自の設定を使う以外には基本的にCSS（Cascading Style Sheets）の知識が必要です。Webデザインの...
別記事でanimationプロパティを使ったCSSアニメーションについてご紹介しました。 animationプロパティでは@keyframesとanimationプロパティの2つを設定する必要があり、複雑なアニメーションに対応できる反面、簡
CSSアニメーションは、ウェブページの視覚的な魅力を高めるために使用されます。この記事では、CSSアニメーションの基本的な指定方法やプロパティの使い方について詳しく説明します。 CSSアニメーションの基本 CSSアニメーションを指定するには
以前からずっと欲しかった本、「見てわかる、迷わず決まる配色アイデア 3色だけでセンスのいい色」を、SNSエックス（旧：Twitter）で交流しているフォロワーさんから譲っていただきました！ この本は、ブログデザインの配色に関してのアイデアが
Webデザインにおいて視覚的なアクセントを加える方法は多くあります。その中でも、「境界線」や「背景スタイル」を工夫することでより洗練されたデザインを実現できます。この記事では、【SVG】とCSSプロパティの【clip-path】【linea...
Cocoonを使ってオリジナルのトップページを作りたいけど、どこから手を付けたらいいかわからない……この記事では、ワードプレステーマ「Cocoon」を使用し、初心者でも簡単におこなえるトップページの作成手順を分かりやすく解説します。特に「ブ...
ワードプレスを開設したら、まず最初にやるべき重要な設定のひとつが「SSL化（https化）」です。SSL（Secure Sockets Layer）とは、インターネット上の通信を暗号化しデータの盗聴や改ざんを防ぐ技術です。WebサイトをSS...
こんな方におすすめの記事です カスタマイズ初心者 ワードプレスのブロックエディタを使っている ブロックに簡単にクラス名をつける方法を知りたい ブロックエディタユーザーでカスタマイズをされる方、どのようにブロック（HTML）にクラスを追加して
テーマ「Cocoon」では、ショートコードやブロックを利用して新着記事や人気記事を簡単に表示できます。参考記事新着記事一覧を表示するショートコードの利用方法人気記事一覧を表示するショートコードの利用方法デフォルトではCocoonのウィジェッ...
今回は『検索ボックス』をアピールエリアに表示する方法についてご紹介します。 目立つ場所に検索ボックスを置きたい と思っている方のお役に立てる記事となっています。 ＼当サイトのトップページでも表示しています／ 当記事では、検索ボックスを作成す
ポチップは、簡単かつ迅速に商品リンクを作成するための便利なWordPressプラグインです。この記事では、ポチップの基本的な使い方について解説します。 直感的な操作が多くとても使いやすいので、ポチップをこれから使いたい方はご覧ください。 ＼
ポチップは、Amazon・楽天市場・Yahoo!の商品リンクはもちろん、メルカリやカスタムリンクまで自由に追加できる便利なプラグインです。デザインや機能を思いのままにカスタマイズでき、編集画面内で直感的にリンクを作れる使いやすさが魅力。この...
この記事はこのような方におすすめ テーマ「Cocoon」を使っている オシャレな比較表を作りたい テーブルを使った表に簡単に◎○△×を入れたい テーマCocoonを使っている方、テーブルを使った表のデザインにお悩みではないでしょうか。 悩め
お知らせこのカスタマイズはCocoon 2.7.1で標準機能として実装されました。そのため、この記事の内容は実質的に不要となっていますが、備忘録として残しています。Cocoonテーマを使っている方、テーブルを使った表のデザインにお悩みではな...
