そんな方の要望に応える記事を書きました。

本記事では、あまりHTMLやCSSの知識がない方でもなるべく分かりやすくお伝えしていきます。

この記事を読んでいただけると、気になるブロガーさんのブログのデザインを盗み見したり、少しコードの知識をつければ真似することだって可能になりますよ。

さっそく解説していきます。

Chrome検証ツールでブログデザインを調べる方法4ステップ

1. PCからChromeで調査したいサイトを開く
2. 検証ツールDevToolsを開く
3. Select an elementボタンをクリック
4. 記事内容にカーソルを近づける

順に解説します。

ステップ１：PCからChromeで調査したいサイトを開く

まずはお使いのPCからChromeであなたが調査したいサイトを開きます。
※スマホからはできないので注意。

今回は僕のサイトで検証してみましょう。

ステップ２：検証ツールDevToolsを開く

▼右クリック→検証を選択します。

▼すると、DevToolsという検証画面が開きます。

などなど。

今回はブログデザインを調べる方法について説明します。

コードの知識がない方でもなるべく分かりやすくお伝えしていきますので、この先も付いてきてください！

コードを良く見ると、記事の内容が書かれていることに気づくかと思います。

ですが、今回はコードから調べるのではなくて、実際の記事からブログのデザインを調べてみましょう。

ステップ３：Select on elementボタンをクリック

さきほど開いた検証ツールの左上に下図の赤枠のようなアイコンがあると思います。

▼そのアイコン（Select on elementボタン）をクリックしてください。

これで記事内の要素が選択できるモードになります。

ちなみに、ステップ２のときに、Ctrl + Shift + Cで、このモードになりますよ。

ステップ４：記事内容にカーソルを近づける

その状態で記事内容にカーソルを近づけてみましょう。

今回は見出し（h2タグ）にカーソルを合わせてみます。
▼すると、選択した部分のHTMLとCSSが検証ツールに表示されます。

見出し（h2タグ）を選択すると得られる情報は以下のとおり。

• ②選択中（h2タグ）のデザイン情報
• ③選択中（h2タグ）のHTML
• ④対応するCSS

上図ではほかにも、緑色やオレンジ色など色がついているのが気になりますよね。

馴染みのない用語を使うと、paddingやmarginなどの余白の情報ですね。

分かってしまえばかんたんなので、次章で解説します。

paddingとmarginについて

paddingとmarginの違いはこうやって視覚的に見ると、一目瞭然ですね。

余白を調整してみよう

検証ツールを使えば余白を微調整することもできますよ。

▼では、いったん先ほどの見出しをクリックして選択してください。

次に、検証ツールに戻ってCSSエリアの一番下までスクロールしてください。

すると、先ほどの色付きと同じような表示が現れます。

そうなんです。ここでも選択した見出し（h2タグ）の情報が把握できるんです。

上下左右に数値がついていますね。
この数値を変えると、一時的にレイアウトにも反映されます。

では、その数値の箇所をダブルクリックしてみましょう。
ここではmarginの下側の数値をダブルクリックしてみます。

▼値が編集できるようになるので、適当な数値に変えてみましょう。

枠線外とその下の文章との間幅が100pxに広がりました！

▼次はpaddingの下側を数値を編集してみましょう。

今度は、テキストと少し濃い目の見出し枠線との間隔が100pxに広がりましたね！

▼さらに、さきほど編集した内容は、HTMLコード内にも反映されています。

今回編集したのは不格好なので採用しませんが、この検証ツールを使えばブログデザインをカスタマイズする際にも非常に役立ちますよ。

ここで編集した内容は画面更新すれば、元通りになりますので安心してくださいね。

スマホでの表示を確認したい場合は？

検証のときに使ったアイコンの隣にもうひとつアイコン（Toggle Device Toolbarボタン）がありますね。

▼それをクリックします。

すると、画面サイズがスマホサイズに切り替わります。

主要なスマホに合わせた表示画面に切り替えることもできます。

▼下図の赤枠部をクリックすれば、タブレットサイズに切り替えることもできます。

現代のWebサイトにおいて、レスポンシブ対応は必須要件と言えますからね。

【超簡単】Chrome検証ツールでブログデザインを調べる方法 まとめ

ぜひ検証ツールを使って気になるサイトのブログデザインを調べてみてください。

HTMLやCSSなどのコードを身につけたい方にとっても、理解を深めるのにちょうどよいツールですよ。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

▼有名ブロガーさんの余白の取り方を調査しました！

【ブログデザイン】有名ブロガーの余白を調査【共通点あり】

2020年8月1日

そんな悩みが解決できる記事を書きました。

結論、その秘密のひとつは「余白」に隠されています。
※ここでいう余白とは、段落と段落の間の余白スペースのことです。

そこで、本記事の内容はこちら。

本記事の内容

• 有名ブロガーさんの余白の調査結果を公開
• 余白の調整方法

たかが余白、されど余白。

余白はブログのぱっとみのデザインに大きく影響するんです。

この記事を読んで、有名ブロガーさんの余白の取り方を参考にしてみてください。

さっそく解説していきます。

【ブログデザイン】有名ブロガーの余白の調査結果を公開します

被験者は僕も良く参考にしているこのお三方です。

• マナブさん manablog
• Tsuzukiさん tsuzuki Blog
• クニトミさん 副業コンパス

【ブログデザイン】余白の調査方法

Chromeの検証ツールを使用して、PC表示の場合のフォントサイズとmarginの値を調べました。

Chromeの検証ツールの使い方を知りたい方はこちらで分かりやすく解説しています。

【超簡単】Chrome検証ツールでブログデザインを調べる方法

2020年8月1日

【ブログデザイン】余白の調査結果

下表にまとめましたので、さっそくご覧いただきましょう。
※小数点は四捨五入。

でもこれには裏がありまして、ツヅキさんとクニトミさんはmargin-bottomの設定以外で余白の調整を行っていました。

ツヅキさん

Gutenbergには「スペーサー」というブロックタイプがありまして、それを使われているようです。

そのスペーサーを使って42px程度の余白が設けられていました。

このやり方だと、細かな調整がしやすそうです。

クニトミさん

いきなり<br>タグで改行し、1文字分の余白を取っておりました。

そんなやり方があるとは！

ということで、お二方の余白の調整を含めた結果はこちら。

やはりみなさん思った以上に余白を取られていますね。
僕のテーマ「スワロー」の初期設定と比べて頂ければ一目瞭然かと。

表示中の画面内に文字ばかりで埋め尽くされていると、読む気しませんよね。

余白はブログのぱっとみのデザインや印象に大きく影響するのは確かなようです。

余白を調整してみよう！

せっかく調べたので、これを機に僕も自サイトの余白とフォントサイズを調整してみました。

変更内容は以下のとおり。

• フォントサイズを16px→17pxに変更
• margin-bottomを29px→24pxに変更
• marginを狭くした代わりに、余白を開けたい箇所に32pxのスペーサーを挿入するようにした
  ※ツヅキさんと同じ方法

• フォントサイズを17px
• margin-bottomを24→48pxに変更
• スペーサー32px→0px

CSSコード公開

僕と同じワードプレステーマ「スワロー」の方なら、style.cssに以下のように定義すればよろしいかと。
※後で説明しますが、レスポンシブ対応もしてます。

.entry-content.cf {
  font-size: 17px;
}
.entry-content p {
  margin-bottom: 2.8em;
}
@media screen and (max-width: 480px) {
  .entry-content.cf {
    font-size: 16px;
  }
}

各々の値は適宜編集くださいね。

他のテーマでも同じでいけるかも。
分かる方はクラスの定義を確認してみてください。

最終的にはこれくらいになりました。
※赤文字が変更後です。

マナブさんやツヅキさんくらいのスペース幅は設けていませんが、横幅のサイズ感との兼ね合いから、これくらいにしておきます。

レスポンシブ対応もお忘れなく！

現代のWebサイトにおいて、レスポンシブ対応は必須要件です。

みなさん、スマホからのフォントサイズは16pxにされていました。

PCは気持ち大きめ。スマホは気持ち小さめが良いようですね。

実は、さきほどのコードの4行目 @media ～の記述がスマホで見た時のフォントサイズの調整になります。

一緒に実装しておきましょう。

【ブログデザイン】有名ブロガーの余白を調査【共通点あり】まとめ

いかがでしょうか。

ぜひ有名ブロガーさんの余白の取り方を参考に、あなたのサイトも調整してみてください。

本記事を読んで、余白を調整したいんだけどやり方がよく分からなかったと言う方は、Twiiterにてご連絡ください。

できる限り協力させて頂きます。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

そんな疑問が解決できる記事を書きました。

本記事では、クラシックモードにてAddQuicktagを使う方法を画像付きで解説します。

ただし、上記の方法は新エディタGutenbergに慣れている人からすると、ちょっぴり使いづらかったりします。

今回は、そんな人のために、僕が使っている代替案も用意しました。

この記事を読んでいただけると、記事執筆のスピードアップが望めますよ。

執筆者情報

さっそく解説していきます。

GutenbergでのAddQuicktagの使い方4ステップ

GutenbergでのAddQuicktagの使い方はこの4ステップでできます。

1. AddQuicktagにタグを登録する
2. ブロックタイプの追加をクリック
3. クラシックモードにする
4. Quicktagsを選択する

AddQuicktagはあらかじめインストールしておいてくださいね。

念のため、以下にインストール方法を示しておきます。

インストール方法

▼[プラグイン]→[新規追加]より、AddQuicktagを検索してインストールしてください。

インストールが終わったら、AddQuicktagを有効化しておいてくださいね。

それでは順に解説していきます。

ステップ１：AddQuicktagにタグを登録する

①[設定]→[AddQuicktag]を選択します。

②タグを登録します。
▼今回は、黄色の蛍光マーカー用のタグを作ってみました。class=”marker”のCSSも別途作成しています。

記入する項目の内容について、下表にまとめておきました。

図の右側に9つほどあるチェック欄は、AddQuicktagを有効にする画面の選択。

一番右のチェック欄にチェックを入れて、すべてにチェックを入れておいてOK。

CSS補足

▼黄色マーカーは需要あるかもなので、一応CSSも載せておきますね。
（僕も既存のサイトを参考にして調整しました。）

span.marker {
	font-weight: bold;
	background: linear-gradient(transparent 60%,#ff9 60%);
}

ステップ２：ブロックタイプの追加をクリック

▼下図赤枠のブロックタイプの追加をクリックします。

ステップ３：クラシックモードにする

▼「クラシック」と入力すれば、クラシックモードが選択できます。

ステップ４：Quicktagsを選択する

▼①Quicktagsを選択します。

▼Quicktagsが表示されていない場合は、下図赤枠のアイコンをクリックしてください。

▼②登録したボタンが表示されます。マーカーを選択してみます。

▼できました。

▼黄色のマーカーが引けました。

ああ

以上、簡単ではありますが、GutenbergでのAddQuicktagの使い方でした。

ここまで説明しておいてなんですが、実は僕、AddQuicktagを使ってないんですよね。

（えーー！？）

存在は知ってましたが、はじめたころは使い方が良く分からずにそのまま放置してました。

それに、使ってみると分かってもらえるかもですが、AddQuicktagについて僕はこんな印象を持っているんです。

• どこにマーカーがついているのか分かりづらい
• ブロックエディタの特性がなんだか活かしづらい
• タグの登録がちょっぴり面倒
• プラグインは極力減らしたい

ということで、次にAddQuicktagに似たことができる代替案をご紹介します。

代替案：「クリップNOTE」を使用する4ステップ

代替案として「クリップNOTE」というフリーツールを使って実現する方法を紹介します。

元々このツールは、コピペ入力を支援してくれるソフト。

こちらのほうがサッと登録できて、サッと使えるので僕は気に入っています。

ただし、こちらはWindows専用のツールになります。

以下は、「クリップNOTE」を使用する4ステップです。

1. タグを登録する
2. ブロックタイプの追加をクリック
3. 任意のブロックモードにする
4. Quicktagsを選択する

インストールを済ませておいてくださいね。

ステップ１：タグを登録する

貼り付けたい情報を一旦Ctrl + Cでコピーします。

▼次に、Shiftキーを2回押すと、下図のようなアプリが起動します。

過去にコピーした履歴が表示されますので、その中から保存したいテキストを右クリック→保存で保存しておきます。

ステップ２：ブロックタイプの追加をクリック

▼下図赤枠のブロックタイプの追加をクリックします。AddQuicktagのときと同じですね。

ステップ３：任意のブロックモードにする

▼今回は、HTMLコードなので、カスタムHTMLを選択。

ショートカットキーを覚えよう

カスタムHTMLは、段落ブロックで「/h」と入力してEnterを入力すれば呼び出せます。

これを使えば、ステップ２、３は不要です。

【Gutenbergの使い方】高速化ショートカットテク10選！

2020年5月24日

ステップ４：登録したタグを選択して貼り付け

▼Shiftキーを2回押してクリップNOTEを起動し、登録したタグを選択して貼り付けます。

▼貼り付けできました。

▼もちろん表示もされます。

ああ

テキストのコピペであれば何でも使えますので、記事執筆以外にも使ってみてくださいね。

【最新版】AddQuicktagの使い方【Gutenberg対応】まとめ

いかがでしょうか。

代替案として他にないか調べてみると、再利用ブロックを使った方法がありましたが、僕は今回紹介した方法が手間がかからず気に入っています。

少しでも記事執筆のスピードアップを図りたい方は、一度試されてみてくださいね。

以上、AddQuicktagの使い方とその代替案の紹介でした。　

この記事が少しでもお役に立ちましたなら、下のツイートボタンより感想をツイート頂けると大変うれしいです^^

こんな方の要望に応える記事を書きました。

本記事の内容

• アフィリエイト広告バナーリンクの貼り方
• バナーリンクを中央ぞろえにする方法
• 押しの一言コメントを追加する方法

さっそく解説していきます。

アフィリエイトリンクの貼り方3ステップ【Gutenberg対応】

アフィリエイトの貼り方は、以下の3ステップです。
※Gutenbergに対応しています。

1. 広告リンクをコピーする
2. ブロックタイプを「カスタムHTML編集」にする
3. ペーストする（貼り付ける）

今回は、僕の愛用のテーマ「スワロー」の広告バナーリンクを貼ってみます。

スワローは現在、A8.netで広告提携ができます。

ちなみに、A8.netは広告主数・登録サイト数ともに日本最大級のアフィリエイトサービス会社です。

登録しない手はないので、まだの方はついでに登録してしまいましょう。

>>A8.netでアフィリエイトを始める

それでは順に解説していきます。

ステップ１：広告リンクをコピーする

貼り付けたい広告主と無事提携できましたら、広告リンクの作成ができるようになっているはずです。

▼広告リンクの作成より、今回は広告バナーリンクを選択し、広告リンクを表示をクリックします。

広告がいくつか表示されます。

▼貼り付けたい広告が見つかったら、そこの広告リンクのコードを全コピーします。

「素材をコピーする」ボタンをクリックすれば、簡単に全コピーできます。

ステップ２：ブロックタイプを「カスタムHTML」にする

▼投稿作成画面に戻って、貼り付けたい箇所のブロックタイプを「カスタムHTML」に変更します。
※「/h」と入力後Enterを押せば、簡単に変更できます。

ステップ３：ペーストする（貼り付ける）

先ほどコピーしたコードをCtrl + Vで貼り付けます。

▼プレビュー画面を確認。

無事貼れましたね。

でも、この広告リンクを中央ぞろえにしたくないですか？

そんなときは、少しだけ手を加えてあげましょう。

と言っても簡単です。

発展その１：アフィリエイトリンクを中央ぞろえにする

はじめに、カスタムHTML編集にして、以下のコードを貼り付けておいてください。

<div style="text-align: center;">
（ここに広告バナーコード）
 </div>

あとは、先ほどの広告リンクのコピーを（ここに広告バナーコード）というところに貼り付ければOK。

コードも簡単なので、プログラミング初心者の方もぜひチャレンジしてみてください。

コードを簡単に解説。

▼中央ぞろえにできました。

これでもいいんですが、さらにバナーリンクの上のほうに押しの一言コメントをつけたいときもありますよね。

次章でやり方を解説します。

発展その２：押しの一言コメントを追加する

普通に文を書くように入力して書いてもいいのですが、あなたのブログの行間の取り方によっては、上図のように少し余白が気になるかもしれません。

この行間を埋めるためのコードがこちら。

<div style="text-align: center;">
 <p style="color: #F44336">＼（押しの一言を入れる）／<br>
（ここに広告バナーコード）
 </p>
 </div>

コードを簡単に解説。

▼できましたね！

ちなみに、僕の愛用中のワードプレステーマ「スワロー」は、とにかく初期設定が楽で、書くことに集中したい初心者ブロガーにはちょうど良いですよ。

価格も9,900円（税込）と有料テーマの中でも比較的安いのも特徴ですね。

ブログデビューを飾りたい方はぜひ。

押しの一言はどんな言葉いい？

参考までに、押しの一言はこんな感じがいいかもです。

• 期間限定・特別感（30日間無料お試し可能）
• 権威を伝える（～～が愛用の～～）
• 対象者を伝える（ブログ初心者のための～）

このあたり、興味あれば以下の本がおすすめです。
メンタリストDaiGoさんも影響を受けているくらい、心理学とマーケティングの要素が詰まっています。

シュガーマンのマーケティング30の法則 お客がモノを買ってしまう心理的トリガーとは / ジョセフ・シュガーマン 【本】

posted with カエレバ

楽天市場

Amazon

アフィリエイトリンクの貼り方を3ステップで解説【Gutenberg対応】まとめ

アフィリエイトリンクは無事貼れましたか？

中央ぞろえにしたり、一言コメントの追加も簡単なコードで実現できますので、ぜひチャレンジしてみてください。

こんな感じで、コードの入力が必要な場面について、どこよりも初心者向けに解説していきたいと思います。

【Gutenbergの使い方】高速化ショートカットテク10選！

2020年5月24日

・AFFINGER5のようなキラリと光るボタンが羨ましいな〜。

・僕のサイトにもクリック率を上げる光るボタンを実装したい！！

・プラグインは重くなるので、CSSだけで作れないか？？

そんな悩みが解決できる記事を書きました。

AFFINGER5のような光るボタンにちょっぴり憧れを抱いていた僕。

「自分のサイトにも光るボタンを！」ということでさっそく作成してみました！

▼仕上がりはこんな感じ。
　※これはサンプルです。

この記事を見て頂ければ、あなたもAFFINGER5の光るボタンをCSSだけで実装できますよ！

クリック率を上げると言われている光るボタン。

10分もあれば誰でも実装できますので、一度試してみてください。

さっそく解説していきます。

【クリック率上げる】AFFINGER5の光るボタンをCSSだけで実装【2ステップ】

実装はとってもかんたんで基本コピペでOK。2ステップです。

1. CSSを実装
2. HTMLを実装

順に説明します。

CSSを実装

まず、WordPressに使用中のテーマ（子テーマ）のstyle.cssに以下のCSSを貼り付けます。

▼以下のCSSコードを全コードコピペしてください。

    /*--------------------------*/
    /* 光るボタン実装           */
    /*--------------------------*/
    
    /* 赤ボタン */
    
    .btn-red-shine {
        color: #fff;
        /*背景色の変更*/
        background-color: #ee5656;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        line-height: 27px;
        text-decoration: none;
        width: 90%;
        padding: 14px 20px;
        font-size: 103%;
        margin: 0.4em auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 0 #d34e4e;
    }
    
    .btn-red-shine:hover {
        color: #fff;
        opacity: 0.8;
        box-shadow: 0 1px 0 #d34e4e;
        transform: translate3d(0px, 4px, 1px);
    }
    
    .btn-red-shine:before {
        /*光る間隔*/
        animation: shine 5s ease-in-out infinite;
        background-color: #fff;
        content: " ";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: -180px;
        transform: rotate(45deg);
        width: 30px;
    }
    
    /* オレンジボタン */
    
    .btn-orange-shine {
        color: #fff;
        /*背景色の変更*/
        background-color: #ef9b2f;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        line-height: 27px;
        text-decoration: none;
        width: 90%;
        padding: 14px 20px;
        font-size: 103%;
        margin: 0.4em auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 0 #cc8c23;
    }
    
    .btn-orange-shine:hover {
        color: #fff;
        opacity: 0.8;
        box-shadow: 0 1px 0 #cc8c23;
        transform: translate3d(0px, 4px, 1px);
    }
    
    .btn-orange-shine:before {
        /*光る間隔*/
        animation: shine 5s ease-in-out infinite;
        background-color: #fff;
        content: " ";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: -180px;
        transform: rotate(45deg);
        width: 30px;
    }
    
    /* 青ボタン */
    
    .btn-blue-shine {
        color: #fff;
        /*背景色の変更*/
        background-color: #2ca9e1;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        line-height: 27px;
        text-decoration: none;
        width: 90%;
        padding: 14px 20px;
        font-size: 103%;
        margin: 0.4em auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 0 #3a86ba;
    }
    
    .btn-blue-shine:hover {
        color: #fff;
        opacity: 0.8;
        box-shadow: 0 1px 0 #3a86ba;
        transform: translate3d(0px, 4px, 1px);
    }
    
    .btn-blue-shine:before {
        /*光る間隔*/
        animation: shine 5s ease-in-out infinite;
        background-color: #fff;
        content: " ";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: -180px;
        transform: rotate(45deg);
        width: 30px;
    }
    
    /* 緑ボタン */
    
    .btn-green-shine {
        color: #fff;
        /*背景色の変更*/
        background-color: #46b21e;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        line-height: 27px;
        text-decoration: none;
        width: 90%;
        padding: 14px 20px;
        font-size: 103%;
        margin: 0.4em auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 0 #388E3C;
    }
    
    .btn-green-shine:hover {
        color: #fff;
        opacity: 0.8;
        box-shadow: 0 1px 0 #388E3C;
        transform: translate3d(0px, 4px, 1px);
    }
    
    .btn-green-shine:before {
        /*光る間隔*/
        animation: shine 5s ease-in-out infinite;
        background-color: #fff;
        content: " ";
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: -180px;
        transform: rotate(45deg);
        width: 30px;
    }
    
    @-webkit-keyframes shine {
        0% {
            transform: scale(0) rotate(45deg);
            opacity: 0;
        }
        80% {
            transform: scale(0) rotate(45deg);
            opacity: 0.5;
        }
        81% {
            transform: scale(4) rotate(45deg);
            opacity: 1;
        }
        100% {
            transform: scale(50) rotate(45deg);
            opacity: 0;
        }
    }
    
    /* ボタン用divクラス */
    
    .st-mcbtn-box {
        border-radius: 5px;
        margin-bottom: 20px;
        padding: 20px 10px;
        background: #fafafa;
    }
    
    /* ボタン上タイトル用pクラス */
    
    p.st-mcbox-title {
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    /* ボタン用pクラス */
    
    p.st-mybtn {
        margin-bottom: 10px;
    }
    
    /* ボタン下に添える文言用pクラス */
    
    p.st-mcbox-text {
        margin-bottom: 0;
        font-size: 80%;
        text-align: center;
    }
    
    /* FontAwesomeスペース用 */
    
    .fa-after {
        margin-left: 8px;
    }

以降で各自編集する箇所をかんたんに説明しておきます。

ボタン背景色の変更

ボタンのbackground-colorを変更すると、ボタンの背景色を変更できます。

今回は、僕のサイトに合うように背景色「赤、オレンジ、青、緑」用のCSSを用意しました。

あなたのサイトに合うような色合いに変更してみてください。

光る間隔変更

光る間隔の変更は、animation: shine 5s ease-in-out infinite;というコードのうち、秒数を表す「5s」というところの数値を調整ください。

ちなみに、0sにすると光らなくできますよ。

HTMLを実装

次にHTMLを実装します。

以下のHTMLコードを全コードコピーしてください。

<div class="st-mcbtn-box">
    <p class="st-mcbox-title" style="text-align: center; color:#f44336;">＼今なら〇円キャッシュバック／</p>
    <p class="st-mybtn"><a href="#" rel="sponsered" class="btn-orange-shine">～～はこちら<i class="fas fa-after fa-chevron-circle-right" aria-hidden="true"></i></a></p>
    <p class="st-mcbox-text">※登録もすべて無料</p>
</div>

ビジュアルモード（Gurtenberg）をお使いなら、カスタムhtmlで編集するように切り替えて貼り付けてください。
※「/h」と入力してEnterを押せば、該当ブロックをカスタムhtmlとして編集できます。

▼こんな感じです。

▼以上で完成です！！

クリック率向上にお役立てください^^

htmlの編集方法を簡単に説明しておきます。

ボタン上のタイトルの変更

一番はじめのpタグの内容「＼今なら〇円キャッシュバック／」を適宜編集ください。

赤色にしているのでやめたければ、colorを削除ください。

タイトルが不要であれば、pタグを丸ごと削除ください。

ボタン内の文言変更

二番目のpタグの内容「～～はこちら」を適宜編集ください。

ボタン色選択（4種類）

4種類のボタン色を選択できるようにしています。class=”btn-green-shine”のクラス名を適宜編集ください。

• 赤：btn-red-shine
• オレンジ：btn-orange-shine
• 青：btn-blue-shine
• 緑：btn-green-shine

クリック時のリンク先設定

aタグのhref=”#”を編集ください。

ボタン下の補足説明の変更

三番目のpタグの内容「※登録もすべて無料」を適宜編集ください。

補足説明が不要であれば、pタグを丸ごと削除ください。

Font Awesomeアイコン変更

Font Awesomeのサイトより、お好きなものを選んで、iタグ全体を書き換えてください。

Font Awesomeを利用していない方は、iタグを丸ごと削除ください。

ボタンの外枠を削除

ボタンの外枠を削除したければ、divタグのみ削除ください。

【クリック率上げる】AFFINGER5の光るボタンをCSSだけで実装 まとめ

さて、これを作成して僕の他記事のボタンは結局、、、光らしていません。
（おい！）

実装してみてから調べたのですが・・・

僕の調査によると、光るボタンを実装したからといって必ずしもクリック率を上げるわけではないというのが、今のところの結論です。

なので光るボタンは、自分のブログのデザインや、文章に合っているか検討されるのが一番よろしいかと^^;

ということで僕のブログでは今のところ光らしておりませんが、数値を入れ替えるだけでできますのでね。

また光らしたくなったら、光らします！

ちなみに、僕が今からブログを1から作成するなら、有料テーマであれば間違いなく、AFFINGER5（アフィンガー5）を選びますね。

僕の使用中のWordPressテーマ「スワロー」もシンプルで気に入ってはいますが、結局こうやってカスタマイズする羽目になっているのです・・・

今回のCSSカスタマイズも微調整とかもしてたら、半日以上かかったんですよね。

こういう作業は有料テーマの力を借りるに尽きますよホント。

無駄な作業を省いて「稼ぐ」ことに特化したいなら、AFFINGER5一択ですね。

※本記事の実装は自己責任でお願いいたします。

Twitter（@KoaraCom）でも情報発信しております。
お気軽にフォローまたは感想をツイートください^^

• 記事タイトル下のSNSボタン表示を削除したい
• ワードプレステーマはスワローを使っている

【朗報】SNSシェアボタン削除できました♪

左がビフォー
右がアフター
です。

もちろんフッターには残っています。

最後にトラップがあったので、
せっかくなので記事化しようかな😊#ブログ初心者 pic.twitter.com/yhJxjPQ0Nf

— コアラ🐨時間術ブロガー (@KoaraCom) February 14, 2020

WordPressテーマ・スワローは、デフォルトで各SNSボタンが表示されるようになっています。

ところが普通、記事を読む前にシェアはしませんよね・・・

本記事では、記事タイトル下の表示を削除したい方のためにその手順を説明します。

さっそく解説していきます。

ワードプレス・スワローカスタマイズ 投稿タイトル下のSNSボタンを削除

こちらがカスタマイズ手順です。

1. Xserverのインフォパネルにログイン
2. ファイルマネージャーを開く
3. 親テーマからsingle.phpをダウンロード
4. 子テーマにアップロード
5. SNSシェアボタン削除
6. 【注意！】キャッシュを削除すること

順に解説します。
とっても簡単なので安心してくださいね。

Xserverのファイルマネージャーにアクセス

Xserverのファイルマネージャーにアクセスします。

ログインしてファイルマネージャーを開く

ユーザーIDとパスワードを入力。

ログインして、ファイルマネージャーを開きます。

親テーマからsingle.phpをダウンロード

サーバー内のファイルが見れるようになりましたか？

次に親テーマを管理しているフォルダにアクセスしてください。

▼このあたりのURLにあると思います。

すると、single.phpがあると思いますので、ファイル名をクリックしてダウンロードします。

子テーマにアップロード

子テーマに先ほどダウンロードしたsingle.phpをアップロードしましょう。

▼子テーマの管理フォルダはこのあたりのURLにあると思います。

SNSシェアボタン削除

ワードプレスにアクセスし、[外観]→[テーマエディター]を開きます。

single.phpが選択できるようになっているので、それを選択します。

以下が記事タイトル下のSNSを表示するコード箇所になります。
※headerの閉じタグの直下にあるかと。

この3行を削除するか、コメントアウトしてください。

ここでSNSボタンが非表示になる方もいますが、僕の場合はもうひと手順必要でした。

【注意！】キャッシュを削除すること

僕はブログ速度改善の目的から、キャッシュ系プラグイン「WP Fastest Cache」を導入しています。

これにより、ワードプレス側にキャッシュが残っていると、デザインの変更が反映されないようです。

ワードプレス管理画面の上部にある、Clear All Cacheを押して変更を反映しました。

はい、これで記事タイトル下のSNSボタンは非表示となります。
フッターには表示されたままのはずです。

以上、記事タイトル下にSNSボタンは不要とお考えの方は、参考にしてみてください。

Twitter（@KoaraCom）でも情報発信しております。
お気軽にフォローまたは感想をツイートください^^