サイト型トップページの作り方を公開しています!Check
Cocoon

【Cocoon】CTAボックスの作り方と活用法|アフィリエイトリンクを効果的に配置

CTAボックス、使ってみませんか?CTA(Call to Action)は、読者に「次の一歩」を踏み出してもらうための大切なツール。例えば、「今すぐ登録」「詳しくはこちら」「購入する」といったボタンやメッセージがそれにあたります。特にアフィ...
設定

サブドメインを常時SSL化(https化)リダイレクトする方法|エックスサーバー設定

WordPressでブログやサイトを立ち上げたら、まず最初に取り組みたいのが「SSL化(https化)」です。SSLは通信を暗号化してユーザーの大切な情報を守るための仕組み。これを設定することでサイトの信頼性が高まり、SEOの面でも有利にな...
Cocoon

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

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

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

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

Cocoon|テーブル(表)に記号○△✕を表示するカスタマイズ

お知らせこのカスタマイズはCocoon 2.7.1以降標準機能として実装されました。そのため、この記事の内容は基本的に不要ですが備忘録として公開しておきます。【2024年以降対応】Cocoon標準機能でテーブルに記号を表示する方法Cocoo...
設定

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

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

エックスサーバーでWordPressのパーマリンク変更|SEOに与える影響と対策

WordPressのURL(パーマリンク)を「日付+投稿名」から「投稿名」に変えたい場合。「設定を間違えてアクセスできなくなったらどうしよう…」「SEOに悪影響が出ないか心配…」そんな不安で、なかなか一歩を踏み出せずにいませんか?この記事で...
Cocoon

【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる?OGP設定方法

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

箇条書きリストの点の色を変えるCSS|ul要素のカスタマイズでデザイン性アップ

Webサイトやブログで使われる箇条書きリスト(ul要素)は、デフォルトではシンプルな黒い点(ディスク)で表示されますが、デザインにこだわりたい場合は少し味気なく感じることもあります。この記事では、CSSを使って箇条書きの点(マーカー)の色を...
Cocoon

Cocoon人気記事ランキング|表示方法とラベルの色やスタイルを変更するカスタマイズ

Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に簡単に人気記事ランキングを作成できます。サイドバーやトップページに設置すれば、読者の目を引きやすく記事の回遊率アップにもつながります。この記事では以下の2点につい...
設定

Googleアドセンス審査に合格するには|必要な対策&コード貼り付け方法

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

Cocoonでフルワイドデザイン!幅いっぱいのおしゃれなトップページの作り方

WordPressテーマ「Cocoon」はシンプルで使いやすい一方、有料テーマのSWELLのような洗練されたフルワイドデザインを再現するにはちょっとしたコツが必要です。「おしゃれなトップページにしたい」「全幅の背景色や画像で目を引くデザイン...
テーマ共通

CSSで実装!複数画像を切り替えるアニメーションの作り方

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

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

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

タブ切り替えをHTMLとCSSで実装(JavaScriptなし)

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

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

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

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

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

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

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

WordPressパターンの使い方(再利用ブロック)!テンプレで時短化、同期と非同期の違い

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

簡単おしゃれ!CSSで見出しデザインをカスタマイズする方法【コピペOK】

見出しを好きなデザインに変えたいな~ウェブサイトの見出しデザインをカスタマイズすると、読みやすさや視認性が向上しサイト全体のデザイン性も高まります。この記事では、簡単に実装できる見出しデザインのサンプルを紹介します。CSSを活用して、自分の...
スポンサーリンク