Blogger海外製テーマ「Seoify」の日本語化&アドセンス向けカスタマイズ方法

「Hello、Blogger～」

今回は最強の無料ブログサービス”Google Blogger”の海外製テーマ「Seoify」を紹介したい。

2020年4月現在、当ブログ「セツナワールド」で使用中のテーマがそうなんだけどね。前は「ZELO」の無料版を使わせてもらってた。

ちなみに海外ではテーマではなく、”Template”と呼ぶのが一般的。

※2020年8月より、「QooQ」（くうく）に変更。
※2020年9月より、「Smart」（試験運用中）に変更。
※2021年2月より、「QooQ」に変更（出戻り）。
※2021年10月より、「JetTheme」（海外テーマ）に変更。
※2022年5月より、「Imaginary」（日本語テーマ）に変更。

「Seoify」無料版と有料版の違い？

まず僕がBloggerで使用しているのは「Seoify」無料版である。

有料版（$10程度）は、Header広告枠の直下に”Trending Posts”というコンテンツがあるけど、無料版にはない。

見た目の部分ではここが一番違っている。

その他、フッターの著作権表示を外せなかったり細かい機能の違いはあるが、多くのブロガーにとっては想定の範囲内だと思う。

「Seoify」トップページのカスタマイズ

「Seoify」をテストブログにアップロードしてみる。初期状態でもなかなかの視認性で期待がもてる。

具体的な「Seoify（無料版）」のダウンロード方法なんかは、記事の最後にまとめるとして。まず僕が行ったいくつかのカスタマイズ（修正）を紹介する。

高機能ゆえ、なんだかんだ癖強めなのが海外製テーマ。必要なもの、不必要なものを見極めていく作業が必要。

こちらはセツナワールドに「Seoify」を適用していた時のキャプチャー動画。

不要な画像・リンクの削除・ガジェットの編集

まず「Seoify」管理画面のレイアウト画像。

なかなかの情報量だよね；；

赤枠のガジェット（Theme Options）の機能がよくわからず鬱陶しいので僕はテーマから削除した。テーマ固有のガジェットなので、レイアウトからは削除できない。

ひとつは”Facebook SDK”関連の機能。

別にそのままにしておいても問題はないと思われる。

以下は、その他のガジェットの解説（変更など）。

「Main Logo」・・・Seoifyのロゴ画像を削除してブログ名を表示。

「Main Menu」・・・”HOME”以外のリンクを全て削除。その後、ツイッターと固定ページのリンクを追加。ドロップダウンメニューを活用したい場合は、ガジェットから編集可能。

※リンクリストの名前には、アイコンフォントが使用できる。

「Header ADS」・・・ヘッダー広告は現在使っていないのでガジェットを削除。”Facebook SDK”と表記があるので、”Theme Options”と関連したガジェットなのかも？

※仮にアドセンスコードを入れた場合でも正常に表示する事ができる。

「Main Social」・・・各種SNSボタンをサイドバーに表示する事ができる。

「About Us」・・・ここから”Seoify”のフッターロゴ画像を削除できる。また独自のロゴ画像など設置することもできる。

「Follow Us」・・・各種SNSボタンをフッターに表示する事ができる。

「Link List」・・・フッターにリンクリストを設置できる。僕は広告表示に必要な”プライバシーポリシー”を追加している。

フッターにコピーライトを表示する方法

「Seoify」のデフォルトのコピーライト（クレジット表記）は” Design by - Templateify ”の部分となる。無料版はこれを削除することは出来ない。（※実際問題、削除可能だが；；）

ただしこれはテーマの著作権であって、サイトコンテンツの権利ではない。よってブログ独自のコピーライトを追加設置することは問題ない。

今回は当ブログで採用している、自動更新型のコピーライトを設置する方法を解説してみる。

Blogger用のサンプルコード

<span class='copyright-text2'>
<script type='text/javascript'>
//<![CDATA[
function cr_year(yyyy) {
  var data = new Date();
  var now_year = data.getFullYear();  
  if(yyyy != now_year){
   document.write("- "+now_year);
  }
}
//]]>
</script>
<i class='far fa-copyright'></i> 2018
<script type='text/javascript'>
//<![CDATA[
cr_year("2018");
//]]>
</script>
 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</span>

こちらは「c2018 - 2020 セツナワールド」＿と表示させるサンプルコードである。コピーライトのマークはアイコンフォントを使って表示させている。

” 2018 ”の部分は、自身のブログの開始年に変更する。
ブログタイトルは自動的に取得される。

以下はCSS。

.copyright-text2 {
    text-align: center;
    display: block;
}
.copyright-text2 a {
    color: #fff;
    padding-left: 4px;
}

CSSの追加場所は、メディアクエリに影響しない場所ならどこでもOK。僕はCSS記述箇所の一番上に追加している。HTLMの構造に準じた場所ならフッター部分（セクション）に追加すればいい。

※「Seoify」のメディアクエリは”max-width”で上書きしていく方式。

コピーライト、サンプルコードの追加場所

コードの追加場所は、” </footer> ”で検索する。

divの閉じタグが2つ並んでいるので、その間に設置する。

※僕はテーマをカスタマイズする時は、バックアップしたデータを” TeraPad ”（テキストエディタ）で編集している。Blogger上でHTMLを編集すると思わぬエラーに見舞われる事があって面倒だから。

「Seoify」記事ページ・SNSボタンの削除・差し替え

SNSボタンは、前テーマ「ZELO」から移植するので「Seoify」のコードは削除する。

その前に、記事タイトル下にSNSボタンが表示されないようにしておく。

” postShareButtons ”＿と検索して赤枠部分のコードを削除する。

つぎに「Seoify」の各種SNSボタンのコードを削除する。

”  ”＿と検索する。

そのすぐ下の、<div class='post-share'>～</div>間のコードを削除して「ZELO」のモノと入れ替える。

※CSSごと入れ替えるので、divダグも削除する。

日本語化不要？フォントの設定方法

Bloggerの海外テーマは、日本語環境では使いにくいというイメージだった。

「Seoify」の初期フォントは、”' Nunito',sans-serif” （Googleフォント）となっている。ちなみにテーマ配布サイトの説明には自動翻訳機能の一文がある。

デフォルトでもまあまあの視認性だが、慣れ親しんだメイリオなどを設定したい場合は、” Theme Fonts ”_と検索をかける。

Site Font、Title Font、Meta Font、Text Fontの4箇所に「 'Meiryo' 」を追加する。フォント名はシングルクォーテーションで囲む。

あとは見出しのデザインだったり、前テーマで使用していた文字装飾のスタイル（CSS）など移植していく。このテーマに関しては、そこまで日本語化が難しいワケではない。

アドセンス広告を設置する方法

「Seoify」で記事中にアドセンスを設置する場合、以下のコード修正が必要になる。

まず、” <data:post.body/> ”＿と検索をかける。

黄色のマーカー部分をそれぞれ以下のように書き換える。

” ★ ”＿の部分にアドセンスのコードを設置すると、記事タイトル直下と記事の読み終わりに広告が表示されるようになる。

【※重要】Seoifyでアドセンスを使う場合の注意点！？

「Seoify」で自前のアドセンスコードを設置する場合、赤枠部分（ウィジェット出力）のコードは削除したほうがいいかもしれない。

こちらの検証では、このコードがあると自動広告の挙動が不安定になる現象が発生している。スクリプトコードのみを自前のコードと入れ替えるなどしたが、どうも調子が悪い。

ということで、この赤枠部分はまるごと削除したほうが安全だと判断した。

※コードの場所は、” </head> ” で検索をかける。

記事中、h2（見出し）上にアドセンスを表示する方法

「Seoify」はデフォルトで見出しの上（h2）にアドセンスを表示することはできない。前テーマ「ZELO」では可能だった。

このやり方に関しては以下の記事を参考にして欲しい。凄い分かりやすい解説記事なので、その通りやるだけでいい。

こちらの記事では、2番目と4番目のh2タグ上にアドセンスを表示する感じになっている。僕は1番目と3番目に表示するようにしている。

「Seoify」ダウンロード＆インストール

※こちらのページから「Seoify」の無料版または有料版を入手できる。

フリー版を入手するには赤枠「1」をクリックする。

移動先のページで赤枠「2」をクリックすると、ZIPファイルがダウンロードできる。

Bloggerで新テーマをスマートに適用する方法

海外製テーマに限らず、Bloggerで新テーマを試す場合はテストブログで一度検証するのが安全だ。

そして新テーマをアップロードする際は必ず現在のデータをバックアップしておくべし。

この手の作業は失敗を前提に進めるべきなのだ。

テーマの初期化が必要な理由

Bloggerでいきなりテーマを変更すると、古いテーマのガジェットがそのまま新テーマのレイアウトに残ってしまうことがある。

もちろん削除できるが、テーマのHTML内に必要ないゴミコードが残る可能性がある。（※ガジェットを出力するためのコードなど。）

せっかく新規テーマにしたのに、なんだかすごく気持ち悪い。

このような不具合を回避するには、最小構成のHTMLで一度テーマをリセット（上書き）するのが手っ取り早い。

<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<b:skin>
</b:skin>
</head>
<body>
<b:section id='mainSection'>
<b:widget id="Blog1" type="Blog">
<b:includable id="main">
</b:includable>
</b:widget>
</b:section>
</body>
</html>

こちらのコードはコンテンツのないフレームのみのフォーマットなので、適用するとブログは真っ白な状態になる。

これで気持ちよく新テーマを適用できる準備が整った。

Blogger海外製テーマはWordPressレベル？

海外製テーマの導入は今回が初めてだが、無料テーマとはいえ構造的にはWordPressに肉薄する印象を受けた。
コードの記述方法なども合理的でちょっと感動した。

一番の衝撃が、JavaScriptが多用されているにもかかわらず動作が軽いこと。

Bloggerのサーバーが結構強い事もあり、ブログの表示速度は安価なレンタルサーバーよりも明らかに高速だったりする。

素晴らしいよね；；

「Seoify」を使い始めて3週間くらい経過したが、SEO上の問題も今のところは発生していない。興味があれば自己責任で試してくれ^^。

Bloggerテンプレート「Imaginary」のカスタマイズとアドセンス申請について