vaster2 カスタマイズまとめ ページナビゲーション ダブルレクタングル目次他 - まるまる録

ブログ

vaster2 カスタマイズまとめ ページナビゲーション ダブルレクタングル目次他

更新日:

vaster2とは無料ブログBloggerにおける、外部提供者による無料ブログテンプレートのひとつです。
Bloggerの元々のテーマは、日本語では劣るものが多いのに対して、日本ではトーマスイッチさん作成のvaster2がBloggerでいちばんのテンプレートと言われています。

このページは現在のブログに引っ越す前のブログ、Bloggerで使用テンプレートvaster2に行ったカスタマイズの主要なものをまとめたものです。
私は素人なので、コピぺだけで簡単に行えるものということになります。

元にしたサイトURLも引いておきますので、必要な際は、さらに詳しい説明を参照しながら行ってください。

スポンサーリンク

navibarを消す【vaster2】

タブレット版ブログのnavibarを消しました。

navbarを消す

管理画面「レイアウト」→「Navbar」の編集画面のボタンをオフにする。

それだけでできます。ただし、そのあとに上部に空間ができてしまうので、それを詰めようとあれこれさがしました。

結果、下のコードを、cssの ]]/b:skin の前に入れました。

body .navbar { height: 0px; }

自分の場合はトップに画像を入れるので、0pxの部分は15pxにして少し空けました。

 

LINEラインボタンとPOCKETを入れ替える【vaster2】

CSS 「Feedy」のSNSボタンの後に以下を追加。

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

1750行前後にあるSNSボタンの箇所に以下のコードを追加。
配置は好きな場所で良いそうです。

<li class='line'>
<a expr:href='&quot;http://line.naver.jp/R/msg/text/&quot; + data:blog.pageName + &quot; &quot; + data:blog.canonicalUrl' target='_blank'><i class='fa'>@</i><br/>LINE</a></li>

下のサイトさんです。ありがとうございます。
休日の空間

 

ページナビゲーション【vaster2】

bloggerのブログだと、150記事以上が遡れない。

vaster2だとprevとnextの2つしかないということと、それ以上にページが遡れないという問題があるらしい。

なので下の方法を導入しました。

 

注意!ぺージが非公開の間は動作しません。ブログの設定を、「一般公開」にしてから、動作を確認してください。

 

しなければならないことは、2つです。

ソースをコピーして、</body>の前に入れ替える

これより下のソースをコピーして、</body>の前に入れ替えをします。

このソースのあるサイト
https://www.stylifyyourblog.com/2011/10/pagination-in-blogger.html

下に転載します。

<script type='text/javascript'>;var home_page=&#39;/&#39;;var urlactivepage=location.href;var postperpage=4;var numshowpage=4;var upPageWord =&#39;Prev&#39;;var downPageWord =&#39;Next&#39;;</script><script type='text/javascript'>//<![CDATA[eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ... \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))//]]></script>

var postperpageの数字部分は、表示する数字の数です。

var postperpage=10;
var numshowpage=3;

10と3の部分を、それぞれお好きな数字にできます。

CSS部分の「ページナビゲーション」の入れ替え

次にソースのCSS部分の「ページナビゲーション」を、一度全部消し、下の部分をコピーしたものと入れ替えます。

/* ページナビゲーション
------------------------------------------------ *
.blog-pager,#blog-pager{
background: none;
text-align: initial !important;
}
.showpageNum a,.showpage a {
font-size: 14px;
padding:8px 10px;
color: #333;
background-color:#fff;
border:1px solid #dedede;
margin:3px 8px;
display: inline-block;
}
.showpageNum a:hover,.showpage a:hover {
text-decoration:none;
color:#fff;
background:#00f;
}
.showpageOf{
font-size: 14px;
padding:8px 10px;
color: #666;
background-color:#fff;
border:1px solid #dedede;
margin:3px 8px;
display: inline-block;
}
.showpagePoint {
font-size: 14px;
padding:8px 10px;
color: #333;
background-color:#ddd;
border:1px solid #dedede;
margin:3px 8px;
display: inline-block
}
#blog-pager .pages{border:none;
}

下のサイトさんです。ありがとうございます。

http://neverenough777.blogspot.jp/2016/06/bloggervaster150.html

 

番号付きページナビがラベルページで動作しない場合の対処法

上に書いた方法で、ページナビゲーションを導入しています。

トップページを表示したときはいいのですが、ラベルから特定のカテゴリーの記事を見ようとクリックした際に「前へ」「後ろへ」の「previous」しか出てこない。

その場合のHTMLの書き換え方法です。

・Vaster2の場合

・「テンプレートのバックアップ」を取る(コード書き換え部分が多いため)
・「HTMLの編集」で「expr:href='data:label.url'」を検索する
・該当部分を全て「expr:href='data:label.url + &quot;?&amp;max-results=10&quot;'」に書き換える
・「HTMLの編集」で「data:label.url + &quot;?max-results=10&quot」を検索する
・該当部分を全て「data:label.url + &quot;?&amp;max-results=10&quot」に書き換える
※Vaster2では「data:label.url + &quot;?max-results=10&quot」が指定されているので、これを書き換える

 

これはvaster2の場合ですが、blogger全般の方法も下記サイトに記載されています。

下のサイトさんです、ありがとうございました。

【Blogger】番号付きページナビを導入して、ラベルページに適応されない場合の対処法【Vaster2】

 

 

連絡フォームをページに設置 ナビゲーションバーからアクセスする方法

ガジェットで追加した連絡フォームが、サイドバーに表示されると場所を取るため、ページに設置して、ナビゲーションバーにタイトルのみ置くようにします。

お世話になっているメモロウさんのサイト

1.ガジェットで連絡フォームを追加。この時はサイドバーに設置されます。
2.新しくページを追加。次のスクリプトを貼る。

これは「作成」ではなくHTMLで貼ります。

<script>
var blogId = '自分のブログIDを入力';
var contactFormMessageSendingMsg ='送信中...';
var contactFormMessageSentMsg = 'メッセージを送信しました。';
var contactFormMessageNotSentMsg = 'メッセージを送信できませんでした。';
var contactFormEmptyMessageMsg ='メッセージを入力してください。';
var contactFormInvalidEmailMsg = '有効なメールアドレスを入力してください。'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>お名前:</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>メールアドレス*必須:</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>お問い合わせ内容 *必須:</div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='送信する' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

 '自分のブログIDを入力'には、アドレスバーに表示される「blogID=」の文字列の後の数字の羅列をコピーします。

3.サイドバーの元の連絡フォームを削除。

4.お好みと必要に応じてカスタマイズする。

・黄色の背景を非表示に

黄色の背景が目立つので、送信ボタンを押すまで表示しないというのをカスタマイズしました。

 

<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>


の部分を

<div style='text-align: center; max-width: 450px; width: 100%'><div class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></div><div class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></div></div>

にする。

・必須の文字を赤色に

<div>メールアドレス<span style="color: red;">*必須</span></div>

・フォームの横幅を広く 

.contact-form-name, .contact-form-email {
max-width: 300px;
width: 100%;
margin-top: 3px;
margin-bottom: 10px;
}
.contact-form-email-message {
max-width: 480px;
width: 100%;
}

これはCSSに追加しましたが、 いったん変化なしなので、後でまた試してみます。

 

vaster2の行間はCSSだけでは広げられない HTMLにも追加して動作

以前vaster2での行間設定を書いたのですが、なぜかvaster2の場合は、通常のCSSの変更だけでは広がらないようです。

HTMLにもコードを追加するという方法で、やっとうまくできました。

まず普通のCSSの記述

.main-post{
 color: #333;
 font-size:16px;
 line-height:1.7;
 text-align: justify;} 

HTMLにコードを追加
<data:post.body/>の箇所を探します。

その上下に一行ずつを足します。

<div class='main-post'>
<data:post.body/>
</div>

こちらのサイトさんです。ありがとうございます。

覚えておきたいAutoCAD / LTのテクニック

<a href="http://autocad-lt-civil.blogspot.jp/2017/08/bloggervaster2html.html">覚えておきたいAutoCAD / LTのテクニック&nbsp;</a></div>

スマホのフォントが大きいサイズなのを小さくする

スマホで確認したところ、vaster2は、フォントが大きいです。

タブレットだとちょうどなのですが。

それで、それを標準的な大きさにしてみました。

「/*   レスポンシブデザイン

--------------------------------------------------- */  」     

のあとの「レスポンシブ」のCSSを探して、そこに

.main-post{

font-size:14px;

line-height:1.6;

を足します。

これで、記事本文のフォントサイズの指定ができます。

記事のタイトルが大き過ぎるときは、

.article-list-title h2{

以下がその部分ですので、

.article-list-title h2{

font-size:16px;

line-height:1.4em;

display: inline-block;

overflow: hidden;

height:3.8em;

}

のように、フォントサイズ部分の数字を変えてください。

ただ、その場合は、スマホは適正な大きさになりますが、タブレットで見た場合はどうしても文字が小さくなりますね。

できれば、あとでこの設定も考えてみます。

目次の自動生成

こちらのサイトを参考にしました。ありがとうございます。

Google Bloggerのカスタマイズ備忘録-4

 

amazonprime アマゾンプライムのバナーリンクはここ

通常のAmazonのバナーリンク一覧からは見つからないので、Amazon アソシエイトプログラムのオフィシャルブログからたどりました。

http://affiliate-blog.amazon.co.jp/2015/06/primebounty201507.html

この時点でのキャンペーンは終了していますが、上の記事の、記事の終わりの方

・Amazonプライムのテキストリンク作成はこちら<br />・Amazonプライムのバナーリンク作成はこちら<br /> (ページをスクロールしてお好みのサイズをご利用ください。)

の「こちら」から、見つけることができます。

 

アドセンスをレスポンシブでダブルレクタングル表示にする

アドセンスの審査に通った連絡が1月20日にあったので、広告を設置してみました。

参考にしたサイトさんはこちらです。

Bloggerでアドセンス広告をダブルレクタングル表示にする方法

上の方がお詳しいので、その通りにできると思います。

上を見てもわからないという時は、当方が実際やってみた通りに書き足しましたので、以下の解説を参考にしてください。

css部分の探し方

css部分というのがどこかわかりにくいという方がいたので、HTMLから下の文字列を探してください。

}]]></b:skin>

 

この文字列を含むCSS部分は、通常折り畳み部分の中に隠れて表示されているので、折り畳み部分の▲印をクリックして開くことができます。

または、確実な方法として、「テーマ」を表示したら、controle+Fキーを押して、右上にsearchの小窓を表示。
そこに上記文字列をコピーすると、すぐにその箇所が表示されます。

}]]></b:skin>より、上の部分がCSS部分です。

慣れるとコードの書き方が、HTMLとは違うのがわかります。

cssに追加

その }]]></b:skin> より上に、スマホではアドセンスの片側を非表示にするコードを貼り付けます。

.adslot_1 { display:inline-block; }
@media (max-width: 768px) { .adslot_1 { display: none; } }

これは、スマホでは広告を横並びに2つ表示するのが禁止されているため、スマホでは一つを表示しないようにするというもの。

htmlの方にtableを追加

横並びにするレイアウトは、tableタグというのを使います。表を使う時に使うタグです。

以下を <!--この真下にアドセンスを挿入 記事中-->の下に入れます。

<table width="100%">
<tr>
<td colspan="2">
<span style='font-size: xx-small;color:#C0C0C0'>スポンサーリンク</span>
</td>
</tr>
<tr>
<td align="left" valign="top">
【左の広告】
</td>
<td align="right" valign="top">
【右の広告】
</td>
</tr>
</table>

 

広告のコードをコピーと修正

その【左の広告】【右の広告】の各部分に、ひとつずつ、レクタングル広告のコードをコピーしたものを貼り付けます。

数字部分を広告の大きさを修正するため、それぞれ300と250にします。

縦横の大きさです。

”width: 300px;height: 250px;”

他に

”data-ad-format="auto"”

を削除。あるいは、あってもいいそうですが、当方は素人なので、よく把握できていません。

左の広告と、右の広告では、上記のように表示の設定に違いがあるため、

最初にコピーした方(左の広告)は

<ins class='adsbygoogle adslot_1' data-ad-client='ca-pub-******' data-ad-slot='******' style='display:block;width:300px;height:250px'/>

下の方(右の広告)が

<ins class='adsbygoogle' data-ad-client='ca-pub-****** data-ad-slot='******' style='width:300px;height:250px'/>

のようにそれぞれ書き換えました。

bloggerまたはvaster2のasyncのエラーの対処

審査コードの貼り付けのときもやったかと思いますが、bloggerまたはvaster2のときには、エラーが出るそうなので、

<script async src='~

の箇所は

<script async='async' src='~

とします。

最初にバックアップもお取りください。

きちんと間違いなくやれば、だいじょうぶですので、落ち着いてお試しくださいね。

 

feedlyボタンのエラー

これは、いろいろ試したものの、どれをやってもうまくいきませんでした。どうやら元々のfeedlyの方に問題があるのではないかと思います。

 

 http://cloud.feedly.com/#subscription%2Ffeed%2F***%2Ffeed

 のままでも、エラーとなり

他のサイトの改善案

 https://feedly.com/i/subscription/feed/***/feed

 スラッシュに変えても どちらも駄目だったので、諦めることにしました。
エラーが出るままでは使おうとした人に申し訳ないので、feedlyボタンは削除することにしました。

無料ブログならbloggerとseesaa おすすめはvaster2 メリットとデメリット

-ブログ

Copyright© まるまる録 , 2018 All Rights Reserved Powered by STINGER.