新規Bloggerブログで最低限カスタマイズする5項目～TLD、目次、Twitterカード、関連記事、アフィリ～

-
最近また新しくブログを立ち上げたのだが、新規にBloggerのブログを作ったとき必ず必要と思うカスタマイズがある。

それが以下の5項目なのだが、

  1. TLDリダイレクトの抑止
  2. 目次の設定
  3. Twitterカードの設定
  4. Millard関連記事
  5. 広告／アフィリエイトの設定

とりあえず前のブログやツールからのコードコピペですべてできた。


また英語やもう少しカタい記事のブログを新しく立ち上げるかもしれないので、そのときの備忘録に残しておく。

※なおTLDリダイレクトは最近なくなった？感じもするので、カスタマイズしなくていいかもです。

スポンサーリンク

TLDリダイレクトの抑止

まずBlogger特有の仕様で、TLD（トップレベルドメイン）が国別にリダイレクトされる、というのがある。

これはアフィリエイトの登録などで障害となることがあるので抑止する。

TLDリダイレクトとは？

例えば自分のカンボジアブログだとTLDつまりトップページのURLは、


http://galinkh.blogspot.com


になるのだが、これが例えばインドネシアからアクセスすると


http://galinkh.blogspot.co.id


という国別に設定されたドメインにリダイレクトされてしまう。

これがTLDリダイレクトで、アフィリエイトを使うためサイトを審査してもらうときなどに問題となる。

アフィリエイト・サービスに”～.com”のドメインを登録しても、日本からアクセスされると”～.jp”のドメインに勝手に変更されてしまうからだ。

これだと先方が確認に来ても登録されたURLじゃないということで審査に支障をきたしかねないのである。

TLDを.comに固定

なのでトップレベルを不動の.comにすべく、Javascriptを埋め込んでおく。
場所はヘッダタグが閉じるところ、</HEAD>の真上。


<script type='text/javascript'>
var blog = document.location.hostname;
var slug = document.location.pathname;
var ctld = blog.substr(blog.lastIndexOf(&quot;.&quot;));
if (ctld != &quot;.com&quot;) {
  var ncr = &quot;http://&quot; + blog.substr(0, blog.indexOf(&quot;.&quot;));
  ncr += &quot;.blogspot.com/ncr&quot; + slug;
  window.location.replace(ncr);
}
</script>


旧テーマのブログで埋め込んだやつをそのままEmporioのブログにコピペしてもちゃんと動いたので、たぶんBloggerのどんなテーマでも使えると思う。

※最近のBloggerはTLDリダイレクトしない感じもする。その場合、このカスタマイズは必要ありません。

目次の設定

Bloggerには記事に目次を入れる機能がない。

なので自分は以下の記事を参考に、Javascriptの目次コードを導入している。


>> Bloggerで目次と見出し番号を自動生成させるカスタマイズ方法 - 人気のあるBloggerブログの作り方


目次生成コードのカスタマイズ

ただ上の記事のコードはそのままだと適用先のブログの要件に合わなかったので、多少コードをカスタマイズしている。

詳しくは以下の記事を参照。


>> Bloggerで目次を出すスクリプトを、適用先に合わせてカスタマイズする


またJavascriptコードを入れる場所はヘッダタグが閉じる直前、

</head>の上

である。

他のコードとの兼ね合い

ちなみにTLDリダイレクトの抑止コードも入れるところが同じ場所なのでどういう順番にするかちょっと悩むが、自分は


  1. TLDリダイレクト抑止
  2. 目次


の順にしている。

自分のテーマでもやってみて適切に動くか確認してみてね。

たぶんどっちを先にしても特に問題ないと思う。

「動的ビュー」では適用不可

なおBloggerの「動的ビュー」テーマではサーバ側でページを生成してダウンロードするのでJavascriptが作動しない。


よってJavascriptで生成するこのアプローチでは目次はつくれない。

「動的ビュー」で目次を出すのはどうするのか、わかる人がいたら教えて下さいm(_ _)m

Twitterカードの設定

次はTwitterカードの設定。

Twitterカードというのは、Twitterでこのブログの記事のURLを書いたときに、カード形式で表示してくれるという機能。

こんな感じね↓



コードは自分で作る

Twitterカードを使うには、Twitterの公式サイトなどを参考にコードを作り、それをテーマのHTMLに貼っておく。

自分は以下のコードにしているが、’@アカウント’のとこを自分のアカウントにすればどこでも動くはず。


<meta content='summary_large_image' name='twitter:card'/>
<meta content='@アカウント' name='twitter:site'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <meta expr:content='data:blog.title' name='twitter:title'/>
<b:else/>
<b:if cond='data:blog.pageName'>
  <meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<b:else/>
  <meta content='data:blog.title' name='twitter:title'/>
</b:if>
</b:if>


コード例はググればいっぱい出てくるので、それも参考にするとよい。

ヘッダにコピペしてValidatorで確認

上のコードをコピペする場所はテーマの<HEAD>の真下。

またこのコードは


  • 「summary_large_image」というでっかい写真が出るスタイルで
  • 「記事タイトル｜ブログタイトル」と、その下に記事の触りが表示される


ものになる。

検索用のDescriptionを書いてるとそっちが出るはずだったと思うのだが忘れた（￣▽￣

で、実際にカードがどういう見た目になるかはTwitterが提供するCard Validatorというツールで確認できる。

使い方は簡単で、コードをテーマに貼った後で個別記事のURLをCard Validatorに入力するだけ。


↑のように、カードがどんな見た目になるか確認できるぞ。

Millard関連記事を設置

Bloggerで関連記事を出す場合、Millardの関連記事プラグインは定番だと思う。

自分もブログ「希望の苗を植えてゆく」で使っているが、やはりアクセス効果が出ているように思う。


>> ブログが日に100→1,500PVに急激にアクセスを増やしたのは、どうも記事の適切な長さと関連記事ガジェットMillardの相乗効果？みたいという話


Google Adsenseの関連記事もいいのだが、それなりに実績を積まないと使えないので最初に入れるならMillardになるだろう。

Bloggerでの設置方法

Bloggerでの設置方法は以下の公式ページを参照。


>> Milliard関連ページをBloggerで設定する方法 | シスウ株式会社


簡単に言うと、まずMillardの関連記事ツールでコードを生成する。


>> 関連記事ツール設定画面


で、テーマのHTMLではなく、「HTML/Javascript」ガジェットに生成されたコードを貼り付ける。

テーマに合わせた表示設定

Millard関連記事はコード生成時に


  • サイドや記事下など、表示場所
  • リスト形式とパネル形式


等を設定できるので、ブログテーマのルック＆フィールに合わせていろいろ試してみるとよい。

ちなみにパネル形式だとこんな感じになる↓


また「表示位置」は「記事下」のチェックを外して「挿入箇所」のみにチェックするのをオススメする。

このチェックを外さないとPC画面の記事下に、記事と比較してバランスの悪いでかさのタイルがずらっと並んでしまう。

しかし「記事下」のチェックを外すと、


  • Emporioなどサイドバーにしかガジェット追加できないテーマで
  • サイドバーがなさそうなスマホ画面に


関連記事が出なくなるんでは？と思えるのだが実際には出ていたので無問題。
というかBloggerのスマホ画面ではサイドバーが下に来るってことなのだろう。

まあこの辺はやってみて確認するしかないのでいろいろ試してみてください。

広告、アフィリエイトの設定

で、ここまでやったら後は広告くらい置いとけば小銭になる。

アクセスが少ないとほぼ意味ない額かもしれないが。。(^_^;)

Adsense利用は半年が必要

広告はGoogleのAdsenseが定番だと思うのだが、現在Adsenseは独自ドメインでないと申し込めない。

よって基本的に無料ブログではAdsenseを使えないのだが、BloggerではAdsenseのホストアカウントというのが利用できる。

ブログ運営を半年続ければBloggerからAdsenseに申し込むことができるのだ。

で、受かればめでたくAdsenseを使える。

が、半年は長いねえ。。

ASPを活用しよう

というわけでブログ立ち上げ時から広告を出したいなら、Adsenseは使えないことになる。

その点、各種ASP（アフィリエイト）はもっと審査が早いので、最初から広告を出そうと思ったらそっちを登録して使えばよい。

TLDリダイレクトが発生する場合、本記事も参考に抑止すればどんな広告やアフィリも申請可能となる。

自分は最近A8とvaluecommerceを使っています。



両方とも山ほど広告はあるので、ブログに合ったものが必ず見つかると思う。
よかったら登録してね :)

モバイルテーマの「カスタム」に注意

以下の記事にも書いたのだが、


>> Bloggerでタイトル下・記事中・記事下にAdsense広告を出す、その仕組みと実際の手順


Bloggerのテーマ（昔はテンプレートと呼んだ）はモバイル用のテーマを「カスタム」に設定しておかないと、HTMLに書いたカスタマイズが反映されないことがある。

PCのほうはそういう設定なしに反映されるというのがややこしい。

前のブログではこれが分からなくて、Millardの関連記事のコードを貼ったのにスマホでは表示できなくてかなり悩んだ。

そしてさらにややこしいのは、テーマによってなのかこの「カスタム」設定がいらない場合もある、ということだ。

この設定のためには、テーマ＞モバイルの下の歯車を押して設定画面に行かないといけないのだが、例えばテーマEmporioではその歯車がそもそも出ない↓。


どうすんだろうと思ってたが何もしなくてもちゃんと設定は反映され、関連記事は表示されているようだ。

テーマごとに微妙に仕様が変わるのは混乱するのでやめてほしいのだが（ーー；

結局、実際の画面でPCもスマホも確認するしかない。

初期カスタマイズでBloggerを使いやすく

まあそんなわけで、まずはこれくらいやっとくと


  • TLDリダイレクトを抑止してASPにサイト登録
  • 記事に目次を入れる
  • 記事の紹介をカードで効果的にツイートする
  • たまたま来てくれた人が関連記事からサイト内を巡回してくれる
  • 広告でひょっとしたら小銭になる


てなことが可能になる。スタートとしてはとりあえず十分でしょう。

また最近はTLDリダイレクトが起こらない感じもあり、対処する必要がないかもしれない。
そうであれば少し楽ちんだ。

他にもフォントの調整など細かなことはあるが、まず最低限これら5項目をやったら記事作成に取り掛かれると思う＾＾


✓Emporioは最初にバグフィックスも
テーマにEmporioを使っている場合は、本記事に挙げた5項目以外にもう1つやっておくべきことがある。

個別記事のスマホ画面でなぜか、

「注目の記事」のタイトルが微妙に見切れている

という現象が発生するので、これはEmporioを使うなら最初に対処すべき。

詳しくは以下の記事を読んでみてください。

>> Emporio「注目の投稿」タイトルがなぜか個別記事の上に出るという最低のバグを修正する

※最近のバージョンでは発生しないかも。その場合はこの対処は必要ありません。


その他のBloggerカスタマイズ情報はこちら
ブログが日に100→1,500PVに急激にアクセスを増やしたのは、どうも記事の適切な長さと関連記事ガジェットMillardの相乗効果？みたいという話
Bloggerでタイトル下・記事中・記事下にAdsense広告を出す、その仕組みと実際の手順

コメント

コメントを投稿

このブログの人気の投稿

Emporio、テーマデザイナーでできるオススメ設定

-
イメージ
Bloggerでは テーマデザイナー（旧テンプレートデザイナー） という、テーマの設定ツールが提供されている。 これがなかなか微妙なところがあるツールで、そのへんは以下にまとめた。 >> Emporio、テンプレートデザイナーでできないフォント調整とその対処 が、テーマデザイナーでできる 有用な設定 ももちろんたくさんある。 今回はテーマEmporioで、テーマデザイナーを使ってできるオススメの設定を紹介する。 すべて自分でもやっている設定である。 とりあえずテーマデザイナーの”使える”側面を知っていただければ幸いです(・∀・)
続きを読む

Bloggerで目次を出すスクリプトを、適用先に合わせてカスタマイズする

-
イメージ
Bloggerには目次を出す機能がない。 なのでカスタマイズが必要だが、定番の方法は Javascriptで記事の見出しから目次を自動生成 する方法だろう。 見出しをつけて記事を書くだけで目次化できるのでこれは楽ちんだ。 ネットにはそういうコードを発表してくれてる人があちこちいるので、自分も基本的にコピペで目次生成に成功した。 ただ本来のコードは（この記事の目次のように）項番が自動付与されるのだが、それが適用先のブログの見出しのフォーマットに合わなかった。 なので少しコードをいじってこのような↓目次を出している。 適用先のブログの状況によって他にも細かなカスタマイズが必要にもなった。 今回はそのへんのカスタマイズも含め、Bloggerへの目次の導入につきまとめてみたい。
続きを読む

Emporioサイトでフォント調整のため設定した、実際のCSS定義を公開する

-
イメージ
テーマEmporioを使ったサイトをこれまで2つ作ったのだが、おかげでEmporioの フォント調整 についてかなり経験が積めた。 今では Emporioを使うならフォント設定はこのワンセットだろう！ というのが確立されたので、参考までに紹介する。 解説がいらないという人は、実際に自分のEmporioサイトで使われてるコードを載せてますので「 実際のCSS定義 」までズギャンと行っちゃってください(・∀・)
続きを読む