すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

YouTube動画の埋め込みをCSSでレスポンシブ対応にする方法

YouTube

こんばんは、すずしんです。

ちょっと質問ですが…。
あなたはブログ記事にYouTubeの動画を埋め込んだことはありますか?

特に対策を何もしていない場合には…。
そのまま動画を埋め込むと、その動画はレスポンシブには対応していません。
なので、特にスマホで表示させたときに動画のサイズがおかしくなってしまいます。

そこで、今回の記事では…。
埋め込んだYouTube動画CSSレスポンシブ対応にする方法について書いてみようと思います。
ちょっといじるだけですので簡単ですよ。

YouTube動画の埋め込みをレスポンシブ対応にする方法(シンプル編)

最もシンプルにYouTube動画をレスポンシブ対応にするには次のようにします。

まず、YouTubeから埋め込みたい動画の埋め込みコードをコピーして記事に貼り付けます。
そして、そのコードをyoutubeクラスを付加したdivタグで囲みます。
例えば、以下のようになります。

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/cZFPVAOrdXQ" frameborder="0" allowfullscreen></iframe>
</div>

そして、CSSでは以下のように指定します。

.youtube iframe {
  width: 100%;
}

これで、横方向に対してレスポンシブ対応ができます。

YouTube動画の埋め込みをレスポンシブ対応にする方法(完全対応編)

上記の方法では、縦方向に対してレスポンシブ対応になっていません。
そこで、縦方向も対策する必要があるのですが…。
その対策済みのCSSは以下のようになります。
基本的には、こちらの方法で設定しておくと良いのではないでしょうか。

表示するYouTube動画のサイズは480x270としています。
このサイズを変更したい場合には、最初にある「.youtube iframe」のwidthプロパティとheightプロパティを編集してください。

.youtube iframe {
  width: 480px;
  height: 270px;
}

@media screen and (max-width: 480px) {
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
}

このように指定しておくと…。
パソコンでは、480x270のサイズで動画が表示されます。
スマホでは、横幅いっぱいのサイズで動画が表示されます。

YouTube動画の埋め込みテスト

試しに、YouTube動画を実際に埋め込んでみました。
スマホで見ても、きちんとレスポンシブ対応になっていることが確認できますよね。
あっ、ついでに動画もぜひ視聴してください!

ひとこと

今回の記事では、埋め込まれたYouTube動画をレスポンシブ対応にする方法について書いてみました。
基本的にはCSSで設定するだけですので、非常にお手軽にできますよね。

ブログ記事にYouTubeの動画をよく埋め込むという方は…。
ぜひこの設定をしておくことをおすすめします。

おすすめ記事のリンクを枠で囲うことで強調するカスタマイズ方法

ブログカスタマイズ

こんにちは、すずしんです。

みんな大好きブログのカスタマイズ!
今回の記事で扱うのは、おすすめ記事のリンクを枠で囲うことで強調させるカスタマイズ方法です。

ここでやっている事は非常に単純なのですが…。
意外に効果が出るかもしれませんよ?
試してみる価値はあると思います。

リンクを強調して目立たせよう

通常、リンクを貼る時は以下のような感じになりますよね。

読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ

まあこれでも悪くないかもしれませんが…。
ここでは、このリンクを枠で囲うという事をしてみます。
そうすることで、リンクが強調されますのでクリック率が上がる…かもしれませんよ。

読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ

いかがでしょう?
通常よりもリンクが気になりませんか?

CSSの設定

ここでは、CSS設定のサンプルを載せておきます。
気に入ったデザインのコードをコピペしてください。
はてなブログの場合は、「デザイン」→「カスタマイズ」→「デザインCSS」の場所になります。

基本

読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 2px solid #df7704;
  background-color: #fcc382;
  padding: 8px 16px;
}

この例では、オレンジっぽい感じの枠線となっていますが…。
枠の色はborderプロパティのカラーコード(#df7704)を、背景色はbackground-colorプロパティのカラーコード(#fcc382)を編集すれば変わります。
必要に応じて、あなた好みの色にしてくださいね。

色の見本は以下のサイトを参考にすると良いと思います。

www.color-sample.com

両サイドが太い枠

読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 2px solid #df7704;
  border-left: 8px solid #df7704;
  border-right: 8px solid #df7704;
  background-color: #fcc382;
  padding: 8px 16px;
}

枠が破線

読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 2px dashed #df7704;
  background-color: #fcc382;
  padding: 8px 16px;
}

影を付けるだけ

読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ

.entry-content .emphasized-link {
  border: 1px solid #999999;
  padding: 8px 16px;
  box-shadow: 0 3px 3px rgba(0,0,0,0.5);
}

HTMLの設定

CSSの設定ができたら、いよいよ実際に記事で使ってみましょう。

強調したいリンクをpタグで囲います。
そして、そのpタグのclassに「emphasized-link」を指定します。
やることはこれだけなので簡単ですね!

<p class="emphasized-link"><a href="http://www.suzushin7.jp/entry/2017/10/10/novels-that-i-want-to-read-later" title="読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ" target="_blank">読書の秋!今後読みたいと思う、気になる小説本を紹介 - すずろぐ</a></p>

ひとこと

今回の記事では、リンクを枠で囲う事で強調させるカスタマイズについて書いてみました。
やっていることは「枠で囲う」だけという非常にシンプルなものなのですが…。
リンクが目立ちますので、クリックされやすくなるかもしれませんよ。

導入も簡単にできますので…。
もし良かったら、あなたのブログでも試してみてくださいね。

余談

おすすめ記事のリンクを貼ろうとしたときに、リンクタグを自分で手入力するのは面倒ですよね。
そんな時は、私のブックマークレット「PageLink」をぜひお使いください。
あっという間にリンクタグを作成できますよっ!

テキストを蛍光ペン風にマーキングするCSSの設定方法

f:id:Suzushin:20170524131105j:plain

こんにちは、すずしんです。

他の方のブログの記事を読んでいると…。
文字の強調の手段として、蛍光ペンマーキングしたような線が使われていることがあります。
例えば、こんな風にテキストにひかれているのですよね。

これを見ていて、私もぜひ使ってみたいなと思いましたので…。
今回このマーカーを使えるようにしてみました。
手順としては、CSSでちょっと設定してやるだけです。

蛍光ペンマーカーの設定(CSS)

蛍光ペンマーカーの設定には「linear-gradient」属性を使用します。
これを使って、backgroundプロパティに設定してやります。

線の太さの設定

比率を指定している部分(0%, 60%など)の値を変えることで、線の太さを変えることができます。

細い線

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}

太い線

.marker-yellow-thick {
  background: linear-gradient(transparent 0%, #ffff33 0%);
}

線の色の設定

マーカーの色を変更するには、linear-gradient属性の後に指定している色(#ffff33)の値を変えれば良いです。

黄色

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}

青色

.marker-blue {
  background: linear-gradient(transparent 60%, #33ffff 60%);
}

オレンジ色

.marker-orange {
  background: linear-gradient(transparent 60%, #ffa500 60%);
}

緑色

.marker-green {
  background: linear-gradient(transparent 60%, #54b240 60%);
}

サンプル蛍光マーカー

これまでに作成したものをベースに、蛍光マーカーのCSSサンプルを用意しました。
もしこれらのデザインで良ければ、以下のコードをコピーして、お使いのブログのCSSに追加してください。
はてなブログの場合は、「デザイン」→「カスタマイズ」→「デザインCSS」になります。

.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff33 60%);
}
.marker-yellow-thick {
  background: linear-gradient(transparent 0%, #ffff33 0%);
}
.marker-blue {
  background: linear-gradient(transparent 60%, #33ffff 60%);
}
.marker-blue-thick {
  background: linear-gradient(transparent 0%, #33ffff 0%);
}
.marker-orange {
  background: linear-gradient(transparent 60%, #ffa500 60%);
}
.marker-orange-thick {
  background: linear-gradient(transparent 0%, #ffa500 0%);
}
.marker-green {
  background: linear-gradient(transparent 60%, #54b240 60%);
}
.marker-green-thick {
  background: linear-gradient(transparent 0%, #54b240 0%);
}

テキストにマーキングする方法

テキストにこの蛍光ペンマーキングを適用するには…。
線を引きたい部分のテキストをspanタグで囲い、そのclass属性に適用したい蛍光ペンのクラスを指定します。

例えば、テキストにオレンジの線を引きたい場合には以下のようにします。

このようにするとオレンジの線が引かれます。

<span class="marker-orange">このようにするとオレンジの線が引かれます。</span>

ひとこと

今回の記事では、蛍光ペン風の線を引けるようにするCSSの設定方法について書いてみました。
実際やってみると分かりますが、非常に簡単に実現することができましたね。

文字の強調には、文字を太くするという方法もありますが…。
今回のように蛍光ペンを引くと分かりやすいですし、思わず線を引いたところを見てしまいますね。
蛍光ペンによる強調効果は抜群ですよ。
今後は、文章中に強調したいフレーズが出てきたら、積極的にマーキングしていこうと思います。

今回のカスタマイズは、非常に簡単にできますので…。
ぜひあなたもブログで蛍光ペン風の線を引けるようにしてみませんか?

はてなブログの目次のデザインをCSSで変更する方法

f:id:Suzushin:20170429140030j:plain

こんばんは、すずしんです。

はてなブログでは、目次を記事に表示することができるのですが…。
デフォルトのデザインだと、目次が何というか味気ないですね。

そこで、CSSを使って目次のデザインを変更してみることにしました。
もし、このデザインが気に入って頂ければ、ぜひコピペして利用してみてください。

目次の表示方法

記事に目次を表示するには、記事の表示したい場所に[:contents]と書きます。
表示したい場所の行頭に記述してくださいね。
文字や空白を入れてはいけませんので注意してください。
プレビューを見てみると、正しく書いてあれば目次が挿入されているはずです。

f:id:Suzushin:20170510174447j:plain

目次のデザインの変更方法

目次がどのようなタグ構成になっているかを、ソースコードを見て確認してみました。
すると、例えば以下のようになっていることが分かりました。

<ul class="table-of-contents">
    <li><a href="#開閉式ボックスとは">開閉式ボックスとは?</a></li>
    <li><a href="#アニメーション付き開閉式ボックスのサンプルプログラム">アニメーション付き開閉式ボックスのサンプルプログラム</a></li>
    <li><a href="#サンプルプログラムの実行例">サンプルプログラムの実行例</a></li>
    <li><a href="#ひとこと">ひとこと</a></li>
</ul>

なるほど。
table-of-contentsというクラスが付加されているulタグと、liタグで構成されているようですね。
この例では無いですが…。
中見出しや小見出しがある場合には、ulタグがさらに含まれるのだと思います。

ということは…。
このtable-of-contentsを目安にしながらCSSを適用してやれば、目次のデザインが変更できそうだという事が分かります。

「目次」の表記の追加

ところで、このデフォルトの目次。
「目次」という表記がありませんよね?
これってあった方が良いと思いませんか?

そこで、後述するCSSでは…。
この「目次」という表示がされるようにしたいと思います。

そのやり方というのは、分かってしまえば実は簡単なのです。
table-of-contentsのbefore疑似要素を参照して、そのcontentプロパティに「目次」と指定してやるだけです。

.table-of-contents:before {
  content: "目次";
}

目次のデザインのサンプル例

それでは、実際に目次のデザインをしていきたいと思います。
ここでは、目次を立体的に見せてみることにします。

以下のCSSのソースコードをコピーしてください。
そして、ダッシュボードから「デザイン」→「カスタマイズ」と進んでいきます。
「CSSデザイン」と書かれたテキストエリアの部分に、コピーしたコードを貼り付けてください。

.table-of-contents:before {
  content: "目次";
  font-size: 150%;
  font-weight: bold;
}
.table-of-contents {
  box-shadow: 5px 5px 10px;
  border: 1px solid #999999;
  background: #f0f0f0;
}

もしシンプルに影は要らないという場合には、box-shadowの記述を削除してください。

ちなみに、このデザイン例は白背景のテーマを使っている場合のデザインです。
黒背景のテーマを使っている場合には、このCSSをそのまま使うと目立ちすぎますので…。
適宜、backgroundプロパティやborderプロパティなどを調整してください。

ひとこと

記事の目次のデザインを変更するには…。
table-of-contentsクラスを参照して、CSSを適用すれば良いという事が分かりました。

今回の記事では、立体的な目次のデザイン例を紹介しましたが…。
デフォルトの目次のデザインと比べれば、いくらかはスタイリッシュになったのではないでしょうか?
気に入ってもらえたら嬉しいです。

コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた!

こんばんは、すずしんです。

今回は、はてなブログ記事の表示面でのカスタマイズという事で…。
記事の読了時間の目安を本文前に表示させてみることにしました。

実装方法としては、記事の読了時間を計算するJavaScriptのコードを貼り付けるだけです。
コピペで簡単に導入できますので、ぜひあなたも試してみてはいかがでしょうか?

記事の読了時間を表示することのメリット

他のはてなブログの記事を見ていると…。
記事に読了時間の目安が表示されていることがありますよね。

これがあると、例えば…。
「この記事は3分で読めるのか、じゃあ試しに読んでみよう!」
となるかもしれませんよね。

逆に、読了時間が長い場合には、興味がありそうな記事の場合なら…。
「時間がかかりそうだから、後で読もう!」
となって、ブックマークしてくれるかもしれません。

いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。

記事の読了時間の目安の表示方法

記事の読了時間の目安を表示するには、まず読了時間を計算するJavaScriptのコードを書く必要があります。
それが以下のようなコードですね。

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;
var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>

このコードにあるwpmは、1分間に読むことができる文字数を表しています。
ここでは、とりあえず暫定的に800文字としています。
もし変更したい時には、数字を好きなように書き換えてください。

上記のコードをコピーしたら、ダッシュボードから「デザイン」→「カスタマイズ」を選択します。
「記事」メニューを展開して、下の方へスクロールしていき「記事上下のカスタマイズ」を表示させます。
「記事上」のテキストエリアに、さきほどコピーしたJavaScriptのコードを貼り付けてください。
貼り付けが終わったら保存します。

以上で、作業は終了です。
これで、自動的に全ての記事で読了時間が表示されるようになります。
簡単でしたよね?

試しに、私のブログでの表示例を示しておきます。
こんな風に表示されるのだなとイメージされると良いと思います。

f:id:Suzushin:20170504173515j:plain

ひとこと

記事の読了時間を表示しておくと、読者にとってその記事を読むのにどれくらい時間がかかるかの目安になります。
これは、ユーザビリティの向上につながるのでは無いかと私は考えています。

機能の実装は、コピペするだけと非常に簡単となっていますので…。
ぜひあなたのブログにも、試しに記事の読了時間を表示させてみませんか?

はてなブログで関連記事をスタイリッシュに表示するならMilliardがおすすめ!

こんにちは、すずしんです。

最近、はてなブログのカスタマイズをしている私なのですが…。
今度は関連記事に注目しました。

標準では、はてなブログは関連記事を記事に表示できませんね。
そこで、関連記事を表示する方法を探していたのですが…。
その時に「Milliard」というプラグインを発見しました。

実際に使ってみたところ、これがかなり良くて気に入りました!
これはぜひおすすめしたいということで…。
今回の記事ではMilliardについて紹介してみたいと思います。

関連記事を表示する効果

関連記事を表示しておくと、読者がその時読んでいる記事と同じようなジャンルの記事が一覧に表示されていることになりますよね。
すると、それらの記事は読者にとって興味がある可能性がありますので、さらに読んでもらえるかもしれません。
すなわち、ページビュー(PV)のアップに大いに貢献してくれる可能性が高いのです!

導入文でも書きましたが…。
標準では、はてなブログには記事に関連記事を表示する機能はありません。
サイドバーに表示することは可能なのですが…。
それよりも効果的なのはやはり記事下なのです。

Milliardとは?

「Milliard」というのは、関連記事をスタイリッシュなおかつ綺麗に表示できるツールです。

Milliardを使うと、サムネイルの画像サイズが違っていても綺麗に並べることができます。
また、スクロールすることで一度に多くの記事をおすすめすることが可能です。
様々なサイズのデバイスにも対応していて、PC・スマホ・タブレットでも同様に利用できます。

はてなブログを運営している方の記事を読んでいる時に、関連記事が表示されている場合がありますが…。
このMilliardを使っているケースが結構ありますね。
それだけ信頼と使用実績があるのでしょう。

実際に関連記事が表示されているのを見ると、確かにスタイリッシュでかっこいいのですよね!
これはぜひ私も導入したいと思いました。

Milliardをはてなブログに設定する方法

Milliardをはてなブログに設定する方法というのは、実はかなり簡単です。
自動生成されたJavaScriptのコードを記事下に貼り付けるだけですからね。

コードの生成は以下のページで行います。
ここで、トップのURL・サイトタイプ・紹介文・並び順・表示位置・PCでの表示・スマホでの表示を設定します。
私の場合は、以下の画像のように設定してみました。

関連記事ツール設定画面

f:id:Suzushin:20170503075517j:plain

「コードを取得」をクリックすると、コードが自動生成されます。
そのコードをコピーしたら、はてなブログのダッシュボードから「デザイン」→「カスタマイズ」を選択します。
そして、メニューから「記事」を選択して下の方へスクロールしていきます。
「記事上下のカスタマイズ」の項目がありますので、その中の「記事下」のテキストエリアにコードを貼り付けてください。

一応、Milliardの導入の流れについて簡単にまとめてみましたが…。
画像付きの解説が公式にありますので、そちらを見ながらだとより分かりやすいと思います。

corp.shisuh.com

ちなみに、私のブログでMilliardを使って関連記事を表示させると以下のようになりました。
うん、実にスタイリッシュでかっこいいですよね!

f:id:Suzushin:20170503080646j:plain

ひとこと

今回の記事では、はてなブログに関連記事を表示することができるプラグイン「Milliard」について紹介してみました。
このプラグインを使うと、簡単にスタイリッシュで綺麗な関連記事一覧を表示することができます。
ちなみに、WordPress・FC2ブログ・Bloggerなどとった、はてなブログ以外でもMilliardは問題なく利用できますよ。

もしあなたがブログを運営していて、関連記事を表示させたいと思っているのなら…。
ぜひこのMilliardを導入してみてはいかがでしょうか?
きっと気に入ると思いますよっ!

簡単カスタマイズ!はてなブログでトップページを記事一覧にする方法

f:id:Suzushin:20170429140030j:plain

こんにちは、すずしんです。

はてなブログトップページは、標準では最新記事の全文が掲載されていますよね。
別にこれでも良いと言えば良いのですが、1つの記事が長くなってくると次の記事を読むまでにスクロールをかなりする必要があります。
読者がトップページから訪問してきて、「この人はどんな記事を書いているのだろう?」となった時には、このままでは分かりづらいですよね?

というわけで、私はブログの設定をちょっとカスタマイズしまして…。
ブログのトップページに訪問してきた方は、記事一覧ページに飛ばすようにしてみました。
やり方が分かってしまえばかなり簡単でしたよ。

トップページを記事一覧にする方法

記事一覧ページは、はてなブログの場合には「/archive」のページを開くと見られるようです。
という事は、このページにトップページから来た人を誘導すれば良いというわけですよね!

JavaScriptで別のページに移動させるには、「location.href」のプロパティを変更させれば良いです。
トップページからのアクセスかどうかはif文を使ってチェックします。
つまり、まずif文でトップページからのアクセスかどうかを確認して、そうであった場合にlocation.hrefを「/archive」に設定します。

これを踏まえて、早速コードを書いてみました。
それが以下のような感じです。

<script type="text/javascript">
if(location.href == 'http://www.suzushin7.jp/') {
  location.href = 'http://www.suzushin7.jp/archive';
}
</script>
<noscript>
<p><a href="http://www.suzushin7.jp/archive">すずしんろぐ</a></p>
</noscript>

JavaScriptが有効であれば、トップページから来た訪問者は記事一覧ページに移動します。
もしJavaScriptが無効化されている場合には、記事一覧ページへのリンクを貼るだけとしています。

ちなみに、上記のコードは私のブログの場合のソースコードとなっています。
あなたが利用する場合には、「http://www.suzushin7.jp/」の部分をあなたのブログのURLに変更してください。
また、「すずしんろぐ」の部分をあなたのブログ名に変更してください。

上記のコードの設定場所は、ダッシュボードから「設定」→「詳細設定」のページです。
下の方へスクロールしていくと、「検索エンジン最適化」の項目があると思います。
その「headに要素を追加」のテキストボックスにコードを貼り付けてください。
以下のようになっていれば大丈夫です。

f:id:Suzushin:20170502133553j:plain

ところで、トップページを記事一覧にしたいと考えている人は他にもいるだろうなと思って検索をかけてみたところ…。
やはり、思ったようにヒットしましたね!
しかもその方法も全く同じでした。
まぁこの方法が最もお手軽にできるでしょうからね。
もし私の解説で分からなければ、以下の記事を参考にしてみてください。

iitaikotoha.hatenablog.com

ひとこと

今回の記事では、はてなブログのトップページを記事一覧にする方法について紹介しました。
ブログのカスタマイズというのは、色々やってみると結構楽しいですよね!

今回紹介した方法を使えば簡単に導入できますので…。
ぜひあなたもトップページを記事一覧に変えてみませんか?

追記

この方法を実装すると、記事一覧にはなるのですが…。
最大で50記事が表示されてしまいます。
これはいくら何でも多すぎですよね。
もっと表示数を少なくできないでしょうか?

そこで、どうにかならないかと検索してみたところ、以下の記事を見つけました。
こちらの方法を使えば、一度に表示する記事数を制御できるようです。
ぜひ参考にしてみてくださいね。

blog.wackwack.net

WordPress Adsense広告を記事途中に自動挿入する方法

Google Adsense - 表示確認

おはようございます、すずしんです。

私はWordPressのブログに「Google Adsense」の広告を配置しているのですが…。 ふと、その広告を記事途中に設置して表示させたいなと思いました。

そうすれば、記事を読みに来た方なら、まず確実に広告を見ることになりますよね。 つまり、広告の宣伝効果が上がるのではないかと考えたのですよ。 上手くいけばそこから広告のクリックが増えて、収益が増加するかもしれないですね。 これは試してみる価値があるのではないでしょうか!?

早速、私は主にWordPressテーマの「functions.php」のカスタマイズをしてみまして…。 その結果、無事に記事の途中にGoogle Adsenseの広告を自動挿入させることに成功しました!

そこで、今回の記事では「Google Adsenseの広告を記事途中に自動挿入して表示させる方法」について解説していきます。 もし同じような事をしたい方は、ぜひこの方法を参考にしてみてくださいね。

Google Adsense広告を記事途中に自動挿入する方法

Google Adsenseの広告を記事の途中に配置して表示させるには…。 例えば、Google Adsenseの広告を読み込む処理を行うショートコードを作成して、全ての記事の任意の位置にショートコードを埋め込めば良いですね。

ただ、これだと全ての記事の内容を編集しなければなりませんのでかなり大変です。 まだ記事が少ないうちならこれでも良いのですが…。

私のブログでは、現時点で記事の数はおよそ100記事あります。 これを全て先ほどの方法でやるのはちょっと手間が掛かり過ぎますよね…。 そこで、もっと良い方法は無いかと私は考えました。

そんな時、ふと私はfunctions.phpの機能を使うことで…。 記事途中にGoogle Adsenseの広告を自動挿入させれば良いのではないかと思いつきました! これなら一度設定さえしておけば、あとは勝手に処理を行ってくれるので楽ちんですよね。

というわけで、functions.phpを編集してGoogle Adsense広告の自動挿入機能を実装していきます。 多少PHPの知識があると良いですが、基本的にはそのままコードを移すだけなのであまり心配なさらずに。 以下から、具体的な実装方法について解説します。

Google Adsense広告のコードの取得

まずは、何はともあれGoogle Adsenseの広告を表示させるためのコードの取得が必要です。 以下のGoogle Adsenseのページから、管理画面にログインして広告のコードを取得して下さい。

オンライン ビジネス - ウェブサイトの収益化 | Google AdSense – Google

この時に必要となるのは、広告のサイズが「336x280」と「300x250」の2つになります。 広告のコードをそれぞれ取得したら、ひとまずどこかにメモしておいて下さい。 次のステップのfunctions.phpの編集時にそれらのコードを使用します。

functions.phpの編集

続いて、お使いのWordPressテーマのfunctions.phpの編集を行います。 WordPressのメニューから「外観」→「テーマの編集」と進んで下さい。 すると、テーマの編集画面が表示されます。

そのままでは、編集対象がstyle.cssとなっていますので、これをfunctions.phpに変更します。 右側の「テンプレート」にテンプレートファイル一覧が表示されています。 その中から「functions.php」を見つけてクリックして下さい。 すると、編集対象がfunctions.phpになります。

テーマの編集 - functions.php

続いて、functions.phpに以下のコードを追加します。 追加場所は末尾で良いと思います。 この際、$adsense_pcにはあなたの336x280のサイズの広告のコードを、$adsense_mobileにはあなたの300x250のサイズの広告のコードを、それぞれシングルクォーテーション(')で囲ったものを代入してください。

[php] function insert_adsense($content) { $adsense_pc = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- bloblo.jp - 336x280 --> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-******" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || ).push({}); </script>';

$adsense_mobile = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- bloblo.jp - 300x250 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-******" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || ).push({}); </script>';

$tag = '<h2>'; $pos = strpos($content, $tag); $adsense = '<p>'.(wp_is_mobile() ? $adsense_mobile : $adsense_pc).'</p>';

if($pos !== false) { return substr_replace($content, $adsense, $pos, 0); } else { return $content; } } add_action('the_content', 'insert_adsense'); [/php]

このコードが行っていることについて、簡単にですが解説します。

まず、$adsense_pc$adsense_mobileに広告コードを代入しておきます。 そして、strpos関数で検索対象タグ($tag)であるh2タグを記事の本文から検索して、最初に見つかったh2タグの位置を$posに代入します。 $adsenseには、広告コードをpタグで囲ったものを代入しておきます。 その際に使用する広告コードは、PCかスマホかのアクセスで場合分けをしています。 $posがfalseでは無い場合、つまり本文中にh2タグが見つかった時に、$adsenseのコードをh2タグの直前の位置($pos)にsubstr_replace関数を使って挿入します。 $posがfalseの場合、つまり本文中にh2タグが見つからない時には何もしません。

動作確認

それでは、正しくGoogle Adsenseの広告が自動挿入されているか確認してみます。 パソコンとスマホの両方で適当なページにアクセスしてみてください。

記事の本文中にh2タグが含まれている場合には…。 最初のh2タグの直前にGoogle Adsenseの広告が挿入されているはずです。 もしh2タグが無いのなら広告は表示されていませんよね。 きちんとその通りになっていれば大丈夫です。

Google Adsense - 表示確認

注意点

この動作から分かるとは思いますが…。 今回の方法で、記事の途中にGoogle Adsenseの広告を表示したい場合には…。 必ずh2タグを記事本文に入れるようにして下さい。 つまり、常に見出しをつけて記事を書くように心がけて下さいということです。

見出しがあった方が、読者にとって何に関する文章を書いているのかが分かりやすいですよね。 それに加えて、簡単なSEO対策にもなります。 見出しをつけることにはメリットが多いと思いますので…。 これまで見出しをつけていなかった方は、この機会に記事の書き方を変えてみてはいかがでしょうか?

まとめ

今回の記事では、functions.phpを編集することで、記事途中にGoogle Adsenseの広告を自動挿入して表示させる方法について解説してみました。 一度機能を実装さえすれば、後はfunctions.phpが自動で広告を表示してくれますので非常に楽ですよね。

WordPressでブログを運営していて、Google Adsenseの広告を記事途中に表示させたいと思っている方は結構多いかもしれませんね。 そんな時は、ぜひ今回の方法を試してみてください。 比較的簡単に広告の表示ができるようになりますよ!

[関連商品] ・いきなりはじめるPHP~ワクワク・ドキドキの入門教室~