 |
| Vaster2の導入とカスタマイズ |
Vaster2の導入とカスタマイズ その１
 |
| アレ |
昔はちまちまとHTMLを直書きしてブログを書いていたけど、facebook が登場してから「日記的」に投稿できるので、もっぱらSNSを使うようになっていました。 でも、facebook では過去の投稿を探したりするのが大変で「書きっ放しの絵日記」でしかない事から、ブログを再開する事にしました。
試行錯誤しながら一通りのカスタマイズを終えたので、備忘録として記事に書いておくことにしました。
なお、ブログの再開に際して Blogger を選択した理由は特に無く、たまたま Google のアレに Blogger があっただけです。（汗）テンプレートの導入
Blogger には魅力的なテンプレートが用意されているけど、日本語対応ベースでレスポンシブデザイン対応のテンプレートは Vaster2 しか無い様です。先ずは作者であるトーマスイッチさんのサイト から Vaster2 をダウンロードします。 作者さんのサイトに記載されてる導入手順に従って、修正した Vaster2.xml を自分の Blogger へアップロードすれば「一応」適用終了です。
色味の変更など細かな事までは書きませんが、ブラウザーのバグ対策とか、外部ガシェットの導入とか、新機能の導入とか、忘れちゃ困る事、などを書き記しておきます。 なお、間違えるとブログ表示がぐちょぐちょになるので、.xml ファイルのバックアップを忘れないでください。
 |
| Bloggerのテンプレートバックアップ |
文字サイズ
Vaster2 のデフォルト状態ではフォントサイズが大きめなので、表示する情報を増やしたい場合はフォントサイズを適宜変更した方が良いでしょう。 でも、フォントサイズを小さくすれば見栄えは良いのだけど、老眼にとっては読み難くて困ります。 特にスマフォ画面で小さな文字を読むのは「苦行」でしかない...ということで、フォントサイズは大きいままとした。ヘッダー画像をランダムに変える
ヘッダー画像によってブログの雰囲気が随分と変わります。 でも、いつも同じじゃ飽きちゃう...けど、定期的に変更するのも面倒だ。 ということで、最初に複数のヘッダー画像を用意しておき、表示する度に切り換えるスクリプトを実装した。 私のブログの場合はヘッダー画像が160×1050でぴったりになる様に組んであり、アクセスする度にヘッダー画像が下記の様に変わります。 |
| 毎回変わるヘッダー画像 |
<!-- ヘッダー画像をランダムに換える -->
<script type="text/javascript">
rdmimg=new Array();
rdmimg[0]="画像０";
rdmimg[1]="画像１";
rdmimg[2]="画像２";
rdmimg[3]="画像３";
rdmimg[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>
<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ファイルを二種類用意する必要があり、明設定と暗設定の都合４ファイルを保存する事になります。
style_dark1.css 暗モード用の基本的なCSS
style_dark2.css 暗モード用の記事一覧用CSS
style_light1.css 明モード用の基本的なCSS
style_light2.css 明モード用の記事一覧用CSS
Vaster2.xml から以下の手順で２種類の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を抜き取ります。 オリジナル 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 {"index" , "archive"}'>
<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を確認して２番目のCSSファイルを読み込みます。
モードボタンの追加
メニューはリンクページガシェットになっているので、<div>としてボタンを追加する事にしました。 HTMLのコードは以下の通りシンプルで、オリジナルVaster2.xmlの923～924行目の間に挿入します。</b:loop>
<!-- 明暗モードボタン -->
<li><div class='header-nav-btn'><i class='fa fa-television'/></div></li>
</ul>
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 を暗モード用に色味等を変えてあなたのサイトに４っつの.cssファイルをアップロードすれば終了です。
カスタマウズした結果を書いたので簡単そうですが、実際には色々と試行錯誤したのでちょっと疲れました。
月間アーカイブは廃止
 |
| 月間アーカイブは廃止 |
アーカイブページにはスクリプトが記述されていて、そのページを表示させれば全記事が一覧表示されるページが出来上がります。 この記事を参考にして組み込みました。
先ず、オリジナル 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 != ""'><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 == "true"'>
<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 == "archive"'>
<!--カテゴリ アーカイブのパンくず-->
<!--記事ページのパンくず-->
<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>
»
<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 != "true"'> » </b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</ul>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!--カテゴリ アーカイブのパンくず-->
投稿日付の時計マークは要らない
下記を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
0 件のコメント :
コメントを投稿