Google Bloggerのカスタマイズ備忘録－２

0 Blogger

 Vaster2の導入とカスタマイズ その２

Google翻訳ガシェット

PC画面とスマホ画面
　Google翻訳を普通の手順に沿って組み込んでも思ったような表示構成になってくれません。　Bloggerのレイアウトから組み込まないで、別途Googleでコードを取得して直接記述する方法でもダメでした。　これに対処するにはCSSに体裁を記述してやれば大丈夫です。
私のブログではPC表示の場合はサイドバーに埋もれる感じで右端に表示し、スマホの場合は普通に左側に鎮座させています。　そのCSSを掲載しておきます。　@media screen and (max-width: 768px){ 以下がレスポンシブ対応用です。
/* Google翻訳を適正に表示させるため */
#google_translate_element{
  width:1050px;
  height:0px;
  margin:0 auto;
  text-align: right;
}
#google_translate_element img {
  display: inline;
}
@media screen and (max-width: 768px){
#google_translate_element{
  width:100%;
  height:25px;
  margin:0 auto;
  text-align: left;
}
}

　ついでにHTML内の翻訳ガシェットの記述も載せておきます。　翻訳言語は de,en,es,it,ja,ko,pt,ru,zh-CN の９言語に限定しています。　また、翻訳言語選択時にメニューがベロ～ンと表示された際に公告に被さると規約違反らしいので配置に注意する必要があります。
<!-- 翻訳ウェジット -->
<b:widget id='Translate1' locked='false' title='' type='Translate' version='1'>
  <b:widget-settings>
    <b:widget-setting name='displayMode'>SIMPLE</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div align='right' id='google_translate_element'/>
    <script>
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({
          pageLanguage: &#39;<data:pageLanguage/>&#39;,
          includedLanguages: 'de,en,es,it,ja,ko,pt,ru,zh-CN', 
          autoDisplay: &#39;true&#39;,
          layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
        }, &#39;google_translate_element&#39;);
      }
    </script>
    <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

記事中の広告を半レスポンシブ表示にする

　この上↑にある様な記事中の広告をレスポンシブタイプにすると広告の大きさに違和感があるので、PCの場合とスマホの場合とで大きさをそれぞれ一定にしてあります。　先ず、記事中に公告が表示できるようにスクリプトを記述します。　記述する場所は<head>と</head>の間です。
<!--記事中のADS埋め込み-->
<script type='text/javascript'> 
 $(document).ready(function(){ $(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#MBT-google-ad&#39;).html()); 
 $(&#39;#MBT-google-ad&#39;).html(&#39;&#39;); }); 
</script>

　次に、記事本文中の広告を表示できるように記述します。　オリジナルVaster2.xmlの412行目に以下のコードを記述します。　また、記事中なので誤ってクリックしちゃう事を防ぐために「Sponsored Link」と明示しています。
<span style='color:#666;margin-bottom:5px;'/>
<!--ここにアドセンスを挿入  記事中：468x60 or 320x100 -->
<div style='text-align: center;'>
  <span style='font-size:12px;margin-top:0px;margin-bottom:0px;/'>Sponsored Link</span><br/>
  <!-- photoofthelife_main-section_AdSense1_1x1_as -->
  <script async='async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <div class='inner_adsense_pc'>
    <ins class="adsbygoogle"
      style="display:inline-block;width:468px;height:60px"
      data-ad-client="あなたのクライアント番号"
      data-ad-slot="あなたのスロット番号"
    ></ins>
  </div>
  <div class='inner_adsense_phone'>
    <ins class="adsbygoogle"
      style="display:inline-block;width:320px;height:100px"
      data-ad-client="あなたのクライアント番号"
      data-ad-slot="あなたのスロット番号"
    ></ins>
  </div>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

　更にPCとスマホで広告サイズを切り替える様にCSSに体裁を記載します。　PCでは468×60サイズとし、スマホは320×100としました。
サイズの異なる広告を用意し、スマホとPCとで表示・非表示を反転させています。　こんな面倒な手法にしたのは、この部分でスクリプトを動作させると何故かスタックエラーが発生するためです。
/*  記事中のアドセンス用  */
.inner_adsense_pc {
  display:inline-block;
}
.inner_adsense_phone {
  display:none;
}
@media screen and (max-width:768px) {
.inner_adsense_pc {
  display:none;
}
.inner_adsense_phone {
  display:inline-block;
}
}

　記事本文中に公告を掲載するかどうかは、投稿記事でコントロールします。　区切りを挿入する事でその位置に公告が挿入されますので、投稿記事として邪魔にならない部分に入れるべきでしょう。
広告は区切り位置に入る

スマホ用のグローバルメニューを変更

スマホ用のグローバルメニュー

　Vaster2ではスマホ用のグローバルメニューがべろ～んと広大な一列表示で出てしまう。　デザイン的にも機能的にも気持ち良くないので、スマホ時は横４段表示にしてコンパクトにまとめることにしました。　メニューがごちゃごちゃするのは宜しくないと思うけど、スマホ表示の時にサイドバー内の「カテゴリ」が遥か下の方に行っちゃうので、メニューにカテゴリ選択機能を持たせてあります。

　オリジナルVaster2.xml内のレスポンシブデザインCSSにある .header-nav li を書き換えます。　CSSファイルにしてある方はCSSファイルの記述を書き換えてください。
.header-nav li {
/*  float:none; */
  text-align: center; /*リストの文字の位置*/
  width:24%;
  border:outset 2px #5ba9c5;
}

まとめ

　Google Chromeで動作解析すると、まだまだ妙な部分がありそうです。　これから鋭意修正して行こうと思います。

Sponsored Link
Sponsored Link

0 件のコメント :

コメントを投稿

Sponsored Link