Google Bloggerのカスタマイズ備忘録ー1

Vaster2の導入とカスタマイズ



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

昔はちまちまとHTMLを直書きしてブログを書いていたけど、facebookが登場してから「日記的」に投稿できるので、もっぱらSNSを使うようになっていました。 でも、facebookでは過去の投稿を探したりするのが大変で「書きっ放しの絵日記」でしかない事から、ブログを再開する事にしました。

試行錯誤しながら一通りのカスタマイズを終えたので、備忘録として記事に書いておくことにしました。
なお、ブログの再開に際してBloggerを選択した理由は特に無く、たまたまGoogleのアレにBloggerがあっただけです。(汗)


テンプレートの導入

Bloggerには魅力的なテンプレートが用意されているけど、日本語対応ベースでレスポンシブデザイン対応のテンプレートはVaster2しか無い様です。

先ずは作者であるトーマスイッチさんのサイトからVaster2をダウンロードします。 作者さんのサイトに記載されてる導入手順に従って、修正した Vaster2.xml を自分のBloggerへアップロードすれば「一応」適用終了です。

色味の変更など細かな事までは書きませんが、ブラウザーのバグ対策とか、外部ガシェットの導入とか、新機能の導入とか、忘れちゃ困る事、などを書き記しておきます。 なお、間違えるとブログ表示がぐちょぐちょになるので、.xmlファイルのバックアップを忘れないでください。
Bloggerのテンプレートバックアップ

文字サイズ

Vaster2のデフォルト状態ではフォントサイズが大きめなので、表示する情報を増やしたい場合はフォントサイズを適宜変更した方が良いでしょう。 でも、フォントサイズを小さくすれば見栄えは良いのだけど、老眼にとっては読み難くて困ります。 特にスマフォ画面で小さな文字を読むのは「苦行」でしかない...ということで、フォントサイズは大きいままとした。

ヘッダー画像をランダムに変える

ヘッダー画像によってブログの雰囲気が随分と変わります。 でも、いつも同じじゃ飽きちゃう...けど、定期的に変更するのも面倒だ。 ということで、最初に複数のヘッダー画像を用意しておき、表示する度に切り換えるスクリプトを実装した。 私のブログの場合はヘッダー画像が160×1050でぴったりになる様に組んであり、アクセスする度にヘッダー画像が下記の様に変わります。
毎回変わるヘッダー画像
先ず、オリジナルVaster2.xmlの826行目にある</head>の上に以下の赤字部分のスクリプトを追加します。 "画像0"とか"画像2"とかは使用する画像へのURLです。 私の場合は160×1050サイズなのでこんな画像です。
<!-- ヘッダー画像をランダムに換える -->
<script type="text/javascript">
rdmimg=new Array();
rdmimg[0]="画像0";
rdmimg[1]="画像1";
rdmimg[2]="画像2";
rdmimg[3]="画像3";
rdmimg[4]="画像4";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#header-inner{background:#000 url('+rdmimg+') top center no-repeat;height:160px;}</style>');
-->
</script>
</head>

次に、bloggerのレイアウト設定で 160×1050サイズの画像を使うように設定します。 ヘッダー画像サイズはご自身のサイトのデザインに合せて変更して下さい。 その後、再度レイアウトで画像を削除し、オリジナルVaster2.xmlの855~856行目の間に下記の記述を追加します。 なお、私はBloggerのガシェットで画像の前にブログタイトルとブログ説明を配置する様にしています。
<b:widget-settings>
<b:widget-setting name='displayHeight'>160</b:widget-setting>
<b:widget-setting name='sectionWidth'>790</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>true</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>1050</b:widget-setting>
</b:widget-settings>

ブログのタイトルや説明を表示させたい場合はCSSで体裁を整えてください。 私の場合は以下の設定をCSSに記述しています。
.Header{
  width:100%;
  background-color: $(header.background.color);
}
#header-inner{
  width:1050px;
  margin:0 auto;
  padding:0;
}
.header h1{
  margin-top:0;
  margin-bottom:0;
}
.header-title p{
  margin-left:20px;
}
.header-title a{
  font-size:40px !important;
  font-weight:700;
  text-decoration:none;
  color:#ffffc8;
  font-style:italic;
  text-shadow:3px 3px 2px #666666;
}
.header-title a:hover{
  text-decoration:none;
}
.header-title a:visited{
  color:#ffffc8;
}
.header-description p{
  font-size:18px;
  color:#ffffc8;
  font-style:italic;
  text-shadow:1px 1px 1px #666666;
  margin-left:40px;
  margin-top:0px;
}

明暗モード機能を付加

私は基本的に明るい背景が好きなんですが、夜間は暗い背景じゃないと眩しい...ということで、明暗モードを切り換えられる様にしました。 やり方を色々と試してみましたが、最終的にCSSを外部ファイルとして用意し、モードに応じてCSSファイルを選択する事で対応しました。 また、モードを指定するボタンとその状態を保存する工夫も必要です。
明モード と 暗モード を切り換えられる

CSSファイルを外部に用意する

困ったことに、BloggerではCSSファイルとかJSファイルをすべて.xmlにべた書きするか、外部のサーバーから読み込むしかありません。 調べてみると、同じGoogleのGoogle Sitesから読み込む事が出来るので、そちらにCSSフォルダを作成してVaster2のCSS設定を抜き出して保存します。 Vaster2の構造上、CSSファイルを二種類用意する必要があり、明設定と暗設定の都合4ファイルを保存する事になります。

style_dark1.css  暗モード用の基本的なCSS
style_dark2.css  暗モード用の記事一覧用CSS
style_light1.css 明モード用の基本的なCSS
style_light2.css 明モード用の記事一覧用CSS

Vaster2.xmlから以下の手順で2種類のCSS部分を削除しましょう。 この時、<b:skin>と</b:skin>も削除してしまうとダメで、下記の様にして下さい。

オリジナルVaster2.xmlの46~776行目をカットし、その内容をstyle_light1.cssとして保存する。 カットした部分には下記の赤文字部分を記述します。
<!-- CSS -->
<!-- <b:skin>が無いと怒られる -->
<b:skin><![CDATA[/*
*/
/* メニューが開いたままになるのを防止(外部CSSでは効かない) */
@media screen and (max-width: 768px){
.grobal-navi{
  width:auto;
  display:none; /* これが必要 */
}
}
]]></b:skin>
赤文字部分はスマホ表示のときにローディング完了までグローバルメニューが開きっ放しになるのを防止する記述を入れています。 この記述は何故か外部CSSファイルだと無効なので、ここに記述してあります。

次に記事一覧用CSSを抜き取ります。 オリジナルVaster2.xmlの779~812行目をカットし、その内容から<b:if...>と<style>と</style></b:if>を削除した上でstyle_light2.cssとして保存します。 <b:if...></b:if>も削除しちゃいましたが、後で書き加えます。

Cookie操作ライブラリを読み込ませる

Cookie操作ライブラリは </body> 直前に記述しないと何故か実行時エラーになっちゃいます。 下記の赤字部分の記述を追加してください。
<!-- jquery.cookie.min.jsは /body の直前で読み込ませないとダメ -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>

</body>

明暗切り換えスクリプトを書く

先ほどstyle_light1.cssを抜き出した部分が ]]></b:skin> で終わっているハズです。 そこから以下の赤字部分のスクリプトを挿入してください。
<!-- CSS -->
<!-- <b:skin>が無いと怒られる -->
<b:skin><![CDATA[/*
*/
/* メニューが開いたままになるのを防止(外部CSSでは効かない) */
@media screen and (max-width: 768px){
.grobal-navi{
  width:auto;
 display:none; /* これが必要 */
}
}
]]></b:skin>

<!-- 画面の明暗制御スクリプト -->
<script TYPE="text/javascript">
<!--
  var css = GetCookie("CSS");
  if(css == ""){
    css = "https://sites.google.com/site/photoofthelife/css/style_dark";  // デフォルトは暗CSS
    SetCookie("CSS", css);
  }
  document.write('<LINK REL="stylesheet" HREF="' + css+"1.css" + '" TYPE="text/css"/>');

  function SetCss(file){
    SetCookie("CSS", file);
    window.location.reload(); // 再描画
  }

  function GetCookie(key){
    var tmp = document.cookie + ";";
    var tmp1 = tmp.indexOf(key, 0);
    if(tmp1 != -1){
      tmp = tmp.substring(tmp1, tmp.length);
      var start = tmp.indexOf("=", 0) + 1;
      var end = tmp.indexOf(";", start);
      return(unescape(tmp.substring(start,end)));
    }
    return("");
  }

  function SetCookie(key, val){
    document.cookie = key + "=" + escape(val) + ";path=/; max-age=2592000;";
  }

$(function(){
  // 明暗ボタンクリックイベント関数
  $(".header-nav-btn").click(function() {
    var css = GetCookie("CSS");
    if(css == "https://sites.google.com/site/photoofthelife/css/style_dark") {
      SetCss("https://sites.google.com/site/photoofthelife/css/style_light"); // 明CSSに切換え
    }else{
      SetCss("https://sites.google.com/site/photoofthelife/css/style_dark");  // 暗CSSに切換え
    }
  });
});

-->
</script>


<!-- アーカイブ・記事一覧の場合 -->
<b:if cond='data:blog.pageType in {&quot;index&quot; , &quot;archive&quot;}'>
<script TYPE="text/javascript">
<!--
  var css = GetCookie("CSS");
  if(css == ""){
    css = "https://sites.google.com/site/photoofthelife/css/style_dark";
    SetCookie("CSS", css);
  }
  document.write('<LINK REL="stylesheet" HREF="' + css+"2.css" + '" TYPE="text/css"/>');
-->
</script>
</b:if>
スクリプトの説明
Cookieを使って明暗モードを覚えさせていて、Cookieとして"CSS"にCSSファイル名を書き込んでいます。 デフォルトは暗モードにしたので、Cookie禁止設定のブラウザでは明モードに変更しても、次回ローディング時は暗モードで始まります。

さて、Cookieに書き込んだCSSファイル名は一部だけで、完成していません。 実際にスクリプトがCSSファイルをローディングするときに"1.css"や"2.css"を末尾に追加してファイル名称を完成させています。 また、https://sites.google.com/site/photoofthelife/css/は私の場合なので、ご自分のサイトに合わせてパス名称を変更してください。

$(".header-nav-btn").click(function() { はボタンをクリックされた場合のイベント処理部分で、現在のCookieを確認して明モードと暗モードを切り換えています。 関数SetCss()では指定されたモード(未完成なファイル名のこと)をCookieに記録し、window.location.reload()関数でページをリロードさせてモード変更を反映しています。

アーカイブ・記事一覧の場合はCookieを確認して2番目のCSSファイルを読み込みます。

モードボタンの追加

メニューはリンクページガシェットになっているので、<div>としてボタンを追加する事にしました。 HTMLのコードは以下の通りシンプルで、オリジナルVaster2.xmlの923~924行目の間に挿入します。
</b:loop>
<!-- 明暗モードボタン -->
<li><div class='header-nav-btn'><i class='fa fa-television'/></div></li>
</ul>
ちょっとお洒落にテレビアイコンで表示しています。 ただし、これだけだと単に表示されるだけなので、header-nav-btn用のCSSをstyle_light1.cssに書き加えます。

CSSに加える記述は以下の通りですが、リンクじゃないのでボタン上にカーソルを持ってきても手アイコンになりません。 なので、:hover指定で cursor:pointer; としてカーソルを変更しています。 これならメニューと動作が同じで違和感がありません。
.header-nav-btn{
  font-size: 14px;
  padding: 10px 20px;
  color: #fff;
  background: #4b99b5;
  text-decoration: none;
  transition:0.3s;
}
.header-nav-btn:hover{
  background-color:#008ec2;
  color:#fff;
  text-decoration:none;
  cursor:pointer; /* カーソルを手にする */
}

暗モードのCSSファイルを用意する

明モードのCSSファイルとしてstyle_light1.cssとstyle_light2.cssが用意されました。 次に、これらの.cssファイルをコピーしてstyle_dark1.cssとstyle_dark2.cssに名前を変更します。
style_dark1.cssとstyle_dark2.cssを暗モード用に色味等を変えてあなたのサイトに4っつの.cssファイルをアップロードすれば終了です。

カスタマウズした結果を書いたので簡単そうですが、実際には色々と試行錯誤したのでちょっと疲れました。

月間アーカイブは廃止

サイドバーにアーカイブをごちゃごちゃ出したくないので月間アーカイブガシェットは削除して、『アーカイブ』をクリックしたらアーカイブページに行く様に変更した。 なので、サイドバーにはプライバシーポリシー等と同様にページリンクガシェットを配置し、アーカイブページへリンクさせました。 なお、Blogger のテーマ編集で月間アーカイブを削除しないとちゃんと消えてくれません。

アーカイブページにはスクリプトが記述されていて、そのページを表示させれば全記事が一覧表示されるページが出来上がります。 この記事を参考にして組み込みました。

先ず、オリジナルVaster2.xmlの1840~1946行まで(<b:widget...> ~ </b:widget>)を削除して、リンクリストガシェットに差し替えます。 差し替えたコードを記載しておきます。

<!-- ■ その他:ページリンク -->
<b:widget id='LinkList1' locked='false' title='その他' type='LinkList'>
  <b:widget-settings>
    <b:widget-setting name='sorting'>NONE</b:widget-setting>
    <b:widget-setting name='text-0'>ブログアーカイブ</b:widget-setting>
    <b:widget-setting name='link-0'>http://あなたのアーカイブページアドレス.html</b:widget-setting>
    <b:widget-setting name='text-1'>このサイトについて</b:widget-setting>
    <b:widget-setting name='link-1'>http://yyyy.html</b:widget-setting>
    <b:widget-setting name='text-2'>プライバシーポリシー</b:widget-setting>
    <b:widget-setting name='link-2'>http://zzz.html</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <li><a expr:href='data:link.target'><data:link.name/></a></li>
        </b:loop>
      </ul>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

ページ内スクリプトはこんな感じです。
<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
var POSTSTOC_SETTINGS = {
    blogURL: 'あなたのドメイン名',  // Blogger の ドメイン を設定
    maxResults: Infinity,           // 最大受信記事数 を設定。Infinity ですべての記事を受信
    sort: {
        key: 'published',           // ソートキー [title, published, updated]
        order: 'default'            // ソート順 [default, asc, desc]
    },
    printby: 'title',               // 表示方法 [title, label, label.nameorder, label.contentsorder]
    newPost: {
        enabled: false,              // 新着記事アイコンを表示するかどうか
        symbol: 'NEW !',            // 新着記事の表示文字列
        term: 30                    // 新着記事判定する日数
    },
    thumbnail: {
        enabled: false,              // サムネイル表示するかどうか
        noImageURL: 'http://garafu.github.io/blogger.toc/release/0.0.5/noimage.png'
                                    // サムネイルが存在しないときに割り当てる画像
    },
    published: {
        enabled: true,              // 公開日を表示するかどうか
        format: 'yyyy/MM/dd'        // 公開日のフォーマット
    },
    updated: {
        enabled: false,              // 更新日を表示するかどうか
        format: 'yyyy/MM/dd'        // 更新日のフォーマット
    }
};
</script>
<link href="https://garafu.github.io/blogger.toc/release/0.0.11/simple.css" rel="stylesheet" type="text/css"></link>
<style>
#main .poststoc-item {
    margin: 1px 0;
}
#main .poststoc-entry span {
    margin: 1px 3px;
}
#main .poststoc-published {
font-size:13px;
}
#main .poststoc-title {
font-size:13px;
}
</style>
<script src="https://garafu.github.io/blogger.toc/release/0.0.11/blogger.toc.min.js" type="text/javascript"></script>
</div>

パンくずリストを修正

パンくずリストを階層っぽく表示する様に変更しました。
オリジナルVaster2.xmlの記述は以下の様になっています。
                      <!--記事ページのパンくず-->
                      <ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
                        <li>
                          <a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
        <span itemprop='title'>
                            Home
        </span>
                          </a>
                        </li>
                        <b:loop values='data:posts' var='post'>
                          <b:if cond='data:post.labels'>
                            <b:loop values='data:post.labels' var='label'>
                              <b:if cond='data:label.isLast == &quot;true&quot;'>
                                <li>
                                  <a expr:href='data:label.url' itemprop='url' rel='tag'>
           <span itemprop='title'>
                                    <data:label.name/>
           </span>
                                  </a>
                                </li>
                              </b:if>
                            </b:loop>
                            <b:else/>
                          </b:if>
                        </b:loop>
                      </ul>
                      <b:else/>
                      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                        <!--カテゴリ アーカイブのパンくず-->
これを全て下記の記述に差し替えればOKです。
                    <!--記事ページのパンくず-->
       <ul class='breadcrumb' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
      <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
      &#187;
      <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
      <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
      <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
      </b:loop>
      <b:else/>
      &#187;Unlabelled
      </b:if>
      &#187; <span><data:post.title/></span>
      </b:loop>
       </ul>
     <b:else/>
                      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                        <!--カテゴリ アーカイブのパンくず-->

投稿日付の時計マークは要らない

下記をCSSに書き足すだけです。
 .fa-clock-o {
    display: none!important;
 }

投稿日付が左にはみ出す

多分、IE系のバグだと思うけど、PCで閲覧する人はIEも居るので修正したい。 以下の様にすればキチンと表示される。 initialってのがIEでは明確に0にしないとダメな様です。
  .post-timestamp {
     font-size:14px !important;
  /*   margin-left: initial; */
     margin-left: 0;

まとめ

カスタマウズした細かな部分はもっと沢山ありますが、一応一段落しました。 残念ながら動作がもっさりしてるので、これから高速化を検討しようと思います。 別途続きを書く予定ですが、参考になったら幸いです。

Sponsored Link
Sponsored Link

0 件のコメント :

コメントを投稿

Sponsored Link