パソコン/プログラム編

Blogger用Vaster2を簡単にカスタマイズしてみる

Blogger用テーマ「Vaster2」をダウンロードして快適に使わせてもらっていますが、やはり少しだけ自分好みに変更したくなります。

基本的な設定はテンプレートデザイナーで変更可能ですが、少しだけカスタマイズしてみたので参考程度に読んで下さい。備忘録的に、このページはアップデートして行く予定です。

画像を中央寄せにする

スマホ表示では気にならなかったのですが、PC表示では画像がすべて左寄り表示されてしいます。コードを確認するとbloggerの画像配置で使われる<div>型で「center」になっていますが上手く動作しません。

<div class="separator" style="clear: both; text-align: center ; ">～</div>

対策としてはCSSに以下の内容を追加する。

.separator img{
margin-left: auto;
margin-right: auto;
}

注意することは画像を右クリックでセンターにしないと以下のようになっていることがあります。この場合は上記の方法でも動作しません。

<div style=" text-align: center ; ">～</div>

画像サイズ比を適正にする

リスト表示や関連記事の画像が自動的にサイズ変更されて縦横比が変化して見にくくなってしまいます。

対策としてはVaster2のテンプレートから以下の部分を探して「object-fit: cover;」を追加する。また、画像サイズも変更したい場合は「width」「height」の数値も変更する

.article-list img{
float:left;
width:300px;
height:185px;
padding-right:20px;
object-fit: cover;
}

#related-posts .related_img {
margin:5px;
width: 140px;
height: 100px;
transition:all 300ms ease-in-out;
object-fit: cover;
}

追加したガジェットが表示されない

Vaster2になってもテンプレートデザイナー使って追加するとスマホでは初期状態だとblogger標準テーマと同じように表示されないみたいです。そういう場合は以下を追加してみてください。

テーマの編集画面で追加したガジェットを見つけて「mobile='yes'」を追加する。

<b:widget id='Label1' locked='false' mobile='yes' title='カテゴリー' type='Label' version='1'>

ラベルのレイアウトを変更する

ここの『ページ』を参考にさせてもらいました。普通は連続してラベルが表示されますが一行毎に綺麗に並べられます。

.list-label-widget-content ul li a {
font-size: 13px;
color:$(label.color);
transition:0.4s; /* 徐々に変化させる */
padding: 6px 10px;
border: 1px solid $(label.border);
background-color:$(label.background);
width: 100%;
max-width: 278px;
display: inline-block;
float: left;
clear: both;
margin-bottom: -1px;
}
.list-label-widget-content ul li a:hover{
color:$(label.color.hover);
background-color:$(label.background.hover);
text-decoration:none;
}
.list-label-widget-content ul{
list-style-type: none;
padding:0;
margin-top: -4px;
line-height: 1.4em;
}

Vaster2のHTML画面でリストを検索して、上のCSSコードで置き換えます。bloggerブログの複数で試してみましたが、このサイドバーのように上手く動作しています。

LINEボタンを追加

変更しやすい大きめなSNSボタンが最初から付いているのは便利です。しかし、日本では絶対に必要な「LINE」ボタンがないので「Pocket」ボタンと入れ替えてみます。

何時ものように先ずはCSSを追加します。HTML編集画面で260行前後にある「Feedy」のSNSボタンの後に以下の行を追加

/* LINE */
.line a {
background:#fff;
color:#00ff00;
border:2px solid #00ff00;
}
.line a:hover {
background:#00ff00;
　　color:#fff;
}

次に1750行前後にあるSNSボタンの必要な場所に以下のコードを追加する。私は「Twitter」と「Facebook」の間に挿入しました。

不要なボタンを　<!--　　　　－－＞　で囲んで非表示にする。面倒臭かったら削除しても問題ありません。

TOPへ戻るボタンを追加

いろいろ調べて以下のコードが一番簡単に出来そうです。footterのガジェットに記入して動かすだけです。

①「right」は「left」にすれば反対側に表示されます。
②「opacity」は透明度で０～１の間で設定します。

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="ボタン画像のURL" height="48" width="48" style="opacity: 0.5;" />

ここで一番悩むのは「ボタン画像のURL」をどう処理するかです。例えばフリーの画像データをここのページに貼り付けます。このあとHTML編集にして画像のあるURLを「ボタン画像のURL」にします。このページがある限りこのブログでボタン画像が表示されます。

左右に表示させたい場合は上記コードをまるまるコピーして位置「right」を「left」に設定してください。

目次を自動生成する

いろいろ調べて『小粋空間』にある目次の自動生成をVaster2用に改良しました。
主な変更点は

1.外部ファイルの「jquery.toc.js」はHTMLファイルとして埋め込む。
2.外部ファイルで定義されている「h1～h6」をVaster2に合わせる。
3.目次開始レベルを「h3」→「h2」に変更する。

以下のコードをHTML編集画面で、そのままコピーして貼り付けてください。

①「CSS」ファイルを挿入

blogggerの編集なので</skin>を見つけて上側に以下を貼り付ける

/*-------------------------------
　目次のCSS　
--------------------------------*/

#toc:before {
content: "目次";
padding-left: 8px;
}
#toc {
background:#f9f9f9;
border: 1px solid #aaa;
font-size: 95%;
display: table;
margin-bottom: 10px;
padding: 5px;
width: auto;
}
#toc ol,
#toc ol li {
margin: 5px 5px 5px 5px;
padding: 0;
}
#toc a:hover {
text-decoration: underline;
}

②「h1～h6を抽出する関数」をHTML内に挿入

</html>の上側に以下を貼り付ける。

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

<!--

h1～h6を抽出する関数　
-->
<script>//<![CDATA[
(function($){

jQuery.fn.toc = function(options) {
var defaults = {
startLevel: 'h2',
listType: 'ul',
target: 'toc'
};
var setting = jQuery.extend(defaults, options);

var startLevel = setting.startLevel.substr(1, 1);
var data = '';
var currentLevel = 0;
var counter = 1;

var header = [ '.entry-content h1', '.entry-content h2', '.entry-content h3',
'.entry-content h4', '.entry-content h5', '.entry-content h6' ];
var tmpArray = new Array;
for (i=startLevel-1; i<6; i++) {
tmpArray.push( header[i] );
}
var headers = tmpArray.join(',');

$( headers, this ).each(function(){
this.id = "chapter" + counter;
var level = this.nodeName.substr(1, 1) - ( startLevel - 1 );

while(currentLevel < level) {
data += '<' + setting.listType + '>';
currentLevel++;
}
while(currentLevel > level) {
data += '</' + setting.listType + '></li>';
currentLevel--;
}
if ( currentLevel == level ) {
data += '<li>';
}
data += '<a href="#' + this.id + '">' + $(this).html() + "</a>";
counter++;
});
while (currentLevel > 0) {
data += '</' + setting.listType + '>';
currentLevel--;
}
$("#" + setting.target).html(data);
return this;
};
})($) //]]>
</script>

③「目次」コードをHTML内に挿入

記事画面のHTML編集で以下のコードを表示場所に貼り付ける
　
<script>
$(function(){
$("body").toc();
});
</script>

<div id="toc"></div>

④「h4」を定義をCSSに挿入

Bloggerの記事編集画面では「見出し」「小見出し」「準見出し」の3種類(h2～h4)が定義されています。Vaster2で

は「h4」が定義されていないので以下をCSS部分に追加します。場所がわかれば「h2」「h3」が順番に並んでいるのでその後に追加してください。

「<Group description="記事ページ" selector=".entry-content">」部分の下に以下を貼り付ける。

<Variable name="entryh4.border" description="準見出し(h4)の左線" type="color" default="#008ec2" value="#008ec2"/>
<Variable name="entryh4.color" description="準見出し(h4)の文字色" type="color" default="#008ec2" value="#008ec2"/>

「/* 記事のフォント」と「/* ヘッダー」部分の間に以下を貼り付ける

.entry-content h4{
font-size:18px;
padding:15px 0 15px 10px;
border-left: 4px solid $(entryh4.border);
color:$(entryh4.color);
}

AdSenseを記事下に貼り付ける

Vaster2の特徴の一つにAdSenseを簡単に記事内の挿入できることが挙げられます。Blogger標準のテーマだとガジェッドでは記事内には表示できないし、表示する場合はテーマ毎のHTMLを読み解いて挿入しないといけないのです。

HTMLの真ん中辺りに「この真下にアドセンスを設置（記事下）」と言うところを見つけてアドセンスコードに　「async」⇒「async='async'」に書き換えます。

これはHTMLガジェット使用ではオリジナルコードでもエラーが出ないけどVaster2では出てしまうための対策みたいです。

因みに、AdSense で「同期」「非同期」と選択できますが、違いは「非同期」は古いブラウザでは表示されないが表示スピードが速くなるようです。

一般的なダブルレクタングル表示

PCではダブル表示で、スマホではシングル表示にしてみます。AdSense専用ではなく一般的な表示方法です。

CSSで表示を制御します。

/* ダブルレクタングル
----------------------------------------------------*/
.ad-entry-bottom {width:680; padding:0px !important; }
.ad_left {float:left; width:300px;}
.ad_right {float:right; width:300px;}

/* モバイル画面用の設定 */
@media screen and (max-width: 540px) {
.ad_right {display:none;}
}

記事をHTML編集にして表示させたい場所に以下のコードを挿入します。


<div class="ad-entry-bottom" style="margin-bottom:10px;">
<div class="ad_left">

</div>
<div class="ad_right">

</div>
</div>

簡単なコードなどので古いブラウザーではPC表示で崩れるかもしれませんが．．．

AdSenseをダブルレクタングルで表示

PCではダブル表示で、スマホではシングル表示にしてみます。このブログ『FOXISM』を参考にさせてもらいました。CSS部分とHTML部分の2箇所に追加します。

AdSenseのルールで「レスポンシブル」表示しかスマホで消すことが許されていないので右側を「レスポンシブル」タイプにします。

CSSは以下の行を追加してください。

/* ダブルレクタングル用CSS　*/
.ad-entry-bottom{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
.adslot_1 {display:inline-block;width: 300px;height: 250px; }

@media screen and (max-width: 540px){
.ad-entry-bottom{-webkit-justify-content:center;justify-content:center;}
.adslot_1{display:none;}
}

次にVaster2の記事下AdSense挿入場所に以下の行を追加します。


<div class="ad-entry-bottom">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="************"
data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle adslot_1"
data-ad-client="************"
data-ad-slot="**********"
data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

以上で終わりです。ブログ2個で試してみましたが、どちらも正常に動作しました。だだし、表示されるまで時間がかかる場合もあります。私の場合、ほぼ同時に２つのブログで試したのですが、2,3分で表示されてブログと、1時間以上かかってしまったブログがありました。変更しても上手く表示されないときは気長に待ってみましょう～～

ヨメレバ・カエレバ（レスポンシブ）デザイン

Vaster2にカエレバのCSSを導入してみました。カエレバでは「amazonlet風-2」で確認しています。コードは『Yukihy Life』を使用させてもらいました。理由はわかりませんが、たまにゴミが出てレイアウトが崩れることがったので、一部コードを最後部に追加しています(影響ない場合は不要)。

/*--------------------------------------
ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
/*
.shoplinkyahoo a{font-size:10px;}
*/
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}

/*ゴミが表示されなければ以下は不要*/
.kaerebalink-name img,
.shoplinkamazon img, .shoplinkrakuten img, .shoplinkrakukobo img, .shoplinkyahoo img, .shoplinkyahooAuc img,
.shoplinkseven img, .shoplinkbellemaison img, .shoplinkcecile img, .shoplinkkakakucom img,
.shoplinkkindle img, .shoplinkbk1 img, .shoplinkehon img, .shoplinkkino img,
.shoplinkjun img, .shoplinktoshokan img {
display:none;
}

ヨメレバ・カエレバ（レスポンシブ）のCSSにトマレバを追加

いつの間にか、「トマレバ」機能が追加されてます。トマレバとは宿の予約機能ですが、最初に作った「ヨメレバ・カエレバ」CSSに追加が一番するのが楽な気がします。

ここの『リンク』先を参考にして下さい。基本レイアウトはヨメレバ・カエレバと同様に表示されます。

手動で簡易ページナビをつける

ここのページの最後に表示されるページナビですが自動ではなく手動で以下のコードを自分の必要なページに「HTML」画面で埋め込みます。その後、矢印に飛ばしたいページを通常の「作成」画面で「リンク」ボタンから設定するだけです。設定しない矢印方向は薄くなります。

<style type="text/css">
.test {
width:230px; height: auto; margin-left: auto; margin-right:auto;
}
.both_text {
text-align: center; display:inline-block;
width:60px; padding:5px 5px 5px 5px;
color:#CCCCCC; font-weight:bold; font-size:large;
}
.center_text {
text-align: center; display:inline-block;
width:60px; padding:5px 5px 5px 5px;
}
</style>

<div class="test">
<div class="both_text" > ＜＜ </div>
<div class="center_text"> 続きは </div>
<div class="both_text" > ＞＞ </div>
</div>

＜＜

続きは

＞＞

Blogger用Vaster2を簡単にカスタマイズしてみる

画像を中央寄せにする

画像サイズ比を適正にする

追加したガジェットが表示されない

関連記事が表示されない

ラベルのレイアウトを変更する

LINEボタンを追加

TOPへ戻るボタンを追加

目次を自動生成する

AdSenseを記事下に貼り付ける

一般的なダブルレクタングル表示

AdSenseをダブルレクタングルで表示

ヨメレバ・カエレバ（レスポンシブ）デザイン

ヨメレバ・カエレバ（レスポンシブ）のCSSにトマレバを追加

手動で簡易ページナビをつける

人気記事

カテゴリー

ブログアーカイブ

自己紹介

Blogger用Vaster2を簡単にカスタマイズしてみる

画像を中央寄せにする

画像サイズ比を適正にする

追加したガジェットが表示されない

関連記事が表示されない

ラベルのレイアウトを変更する

LINEボタンを追加

TOPへ戻るボタンを追加

目次を自動生成する

AdSenseを記事下に貼り付ける

一般的なダブルレクタングル表示

AdSenseをダブルレクタングルで表示

ヨメレバ・カエレバ（レスポンシブ）デザイン

ヨメレバ・カエレバ（レスポンシブ）のCSSにトマレバを追加

手動で簡易ページナビをつける

この記事をシェアする

人気記事

カテゴリー

ブログアーカイブ

自己紹介