Bloggerブログを最新公式テーマ「Contempo」でリニューアルする方法とは?!

blogger Contempo



今年の2月に立ち上げたBloggerの本ブログ(旧 音ものっち)を「音ものバスラ」と名前を変え新しいコンセプトでリニューアルしたのでその方法を紹介します。テーマは最新公式テーマContempo」ですが、特にAdsense広告の配置で苦労?

ブログの誕生日


本ブログ(旧 音ものっち)を立ち上げた最初の誕生日は2019年1月23日でした。

以後6月末まで運用してきましたが、最近になって仕事上でお付き合いを始めたyajirobeeさんの以下のブログからインスパイアーされてリニューアルを決断しました。

- 春夏秋冬〜季節のネタ帳〜

考えたコンセプトは「バスラ」の「バースデーライブ」から「誕生日」と「ライブ」をキーワードとして展開することにしました。

誕生日は、最初は女性アイドルグループのメンバーの誕生日をその季節に沿ってメンバー紹介とともに行うつもりでした。

しかし、それではレッドオーシャンなので、誕生日の解釈を「デビュー/復活/再出発/転身/開拓なども含む」とし、グループの動向を中心に「変化」を捉えて、技術者の視点から独自の表現手法を確立していきたいと思います。

Blogger初心者には?

今回はすでにあるBloggerで作ったブログがベースなので、採用した最新の公式テーマ「Contempo」によるリニューアルの方法について紹介します。

Bloggerのブログを初めて立ち上げる初心者の方は、まず以下の日本語テーマでブログの構築を行って慣れてから今回紹介する方法をお試しください。

blogger日本語テンプレート「Tokyo」ダウンロードページ

上記のページの一番下には、他にも3つの日本語テーマへのリンクがあるので参考にしてください。

Bloggerカスタマイズの参考になるサイトはこちら >>> ラムネグ

Blogger最新公式テーマ「Contempo」

なぜContempoを使おうと考えたか?ですが、元々このブログの記事は「乃木坂46」だの「Perfume」だのレッドオーシャンの土俵でやっているわけですが、その中でのブルーオーシャンを見つけようという方向性の一環です。

つまり、ユニークさを出すことで、ニッチなニーズからのアクセスを期待して、それでGoogle検索の上位表示を狙おうという魂胆です。

ですから、おとなしく一般的なテーマを使いたい方には向きません。苦労すると思うので、Tokyoあたりで頑張った方が労力の投資対効果が高いと思います。

しかし、そもそもBloggerに手を出そうとしているあなたなら、その時点でリスクを取っているので、WordPressを止めてBloggerにする意義は意識した方が良いとは思いますが・・・

Adsenseコードの設置

Bloggerの公式テーマを採用した時に最初に困るのがAdsenseコードの設置場所です。WordPressの一般的なテーマのように簡単には行きません。

今回は上から、右サイドトップmoreタグ記事直下ページ最後、さらに自動広告と、ページ内の5箇所に表示される可能性があります。

「可能性」と行ったのは、自動広告を設定するとGoogleがAIを使って適切な位置に適切な広告を表示するので、こちらの意図した広告が意図した場所に表示されるとは限りません。

レイアウト画面での広告配置

右サイドトップページ最後の広告はレイアウト画面上で「Adsense」ガジェットを配置することで行いました。

テーマのHTML画面上での配置

moreタグ記事直下は「data:post.body/」で検索(Ctrl+F)してその上下に広告コードを配置します。具体的には以下の記事を参考にしてください。

moreタグを使ったアドセンス広告設置方法【ワードプレス/blogger】

自動広告Adsenseサイトからコードをコピーして<head>タグの直下にコピーしました。
自動広告の設定と詳細URL設定をしています。

実際の表示

moreタグの前段階でタイトル下に表示された広告は以下です。


moreタグに移動した結果は以下です。


記事直下は以下です。

下側の広告は自動広告です。

ページ最後は以下です。


合計で5箇所に広告が表示されています。

広告の数が増えるとクリック単価が下がる傾向にあるので、1ヶ月程度様子を観て、収益の低い広告は外すように将来的には考えています。

カスタマイズで参考になる記事集

Contempoに対するカスタマイズ方法ではありませんが、考え方として参考になります。

新規Bloggerブログで最低限カスタマイズする4項目。新テーマ・Emporioで試してみた~TLD、関連記事、Twitterカード、アフィリ~

ページタイトルの後にブログタイトルを追加

【完璧】Bloggerのタイトルをページタイトルの後に付ける方法

上記のコードはContempoでは異なっていたので、検索後に以下のような形で修正しています。

ブログタイトル変更

  <b:if cond='data:blog.pageType == "index" '>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/>|<data:blog.title/></title>
</b:if>

サイドバーにユニークな新着記事を表示

Bloggerのサイドバーに新着記事を表示する方法

目次を表示

[Blogger] 目次を簡単に自動生成(忙しい人向けのコピペ素材)

関連記事を表示

Milliard関連ページプラグインについて | シスウ株式会社

最初は左サイドバーと記事下の2箇所に設置しましたが、記事下が表示されなかったので、左サイドバーを削除すると記事下に表示されました。


ページトップボタンを表示

右下に現れるページトップボタンは、以下のコードを「HTML/JavaScript」ガジェットに貼ってレイアウト画面の一番下に配置しました。

<p id="back-to-top" style="display:none;margin:0;">
<a href='#' rel='nofollow' style='position:fixed;bottom:10px;right:10px;' title='Back to Top'>
<img src='https://i1155.photobucket.com/albums/p559/scrolltotop/arrow86.png'/>
</a>
</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
//Back to Topボタン
$(function(){
var topBtn=$('#back-to-top');
topBtn.hide();

//ボタンの表示設定
$(window).scroll(function(){
  if($(this).scrollTop()>300){
    //---- 画面を300pxスクロールしたら、ボタンを表示する
    topBtn.fadeIn();
  }else{
    //---- 画面が300pxより上なら、ボタンを表示しない
    topBtn.fadeOut();
  }
});

//ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
  $('body,html').animate({
  scrollTop: 0},500);
  return false;
});

});
</script>

ボタンのデザインを変えたい場合は以下のコードの末尾近くの番号を以下のサイトで選んで変えてください。サイトのボタンのコードをコピペしても大丈夫かもしれませんが・・・

<img src='https://i1155.photobucket.com/albums/p559/scrolltotop/arrow86.png'/>

Free Scroll to Top Buttons

「続きを読む」でジャンプ後に目次がトップになる?

トップページの「続きを読む」をクリックすると目次がトップになるので目次以前が見えないだけでなく、最もクリック単価が高いmoreタグ広告(またはタイトル下広告)が見えなくなり広告クリックの機会損失にも繋がります。

Contempoでは「data:post.hasJumpLink」で検索してmoraタグ部分を削除したところ、ページトップにジャンプするようになりました。

「data:post.hasJumpLink」で検索すると5箇所見つかりました。おそらくトップページ(index画面)や検索結果など複数のページに「続きを読む」があるようです。

参考


          <div class='jump-link flat-button ripple'>
            <a expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
              <data:blog.jumpLinkMessage/>
            </a>
          </div>

(参考)
          <div class='jump-link flat-button ripple'>
            <a expr:href='data:post.hasJumpLink ? data:post.url : data:post.url' expr:title='data:post.title'>
              <data:blog.jumpLinkMessage/>
            </a>
          </div>

タイトルのクリックなどではページトップを表示します。

カスタマイズはキリがないので、このあたりにしておきます。

まとめ

ブログの形は整いましたが、課題は記事のタイトルの付け方記事の内容修飾の仕方、貼り付ける画像をフリー画像サイトからダウンロードするか?など多岐に渡ります。

今後試行錯誤を繰り返しながら、アクセス数の変化や広告の収益などをウォッチして最適化していきたいと思います。

ではでは、きらやん


あなたにおすすめの投稿