Vaster2は、Vaster2|レスポンシブ対応済みのblogger日本語テンプレートからダウンロードできます。テンプレートデザイナー有りと無しがあります。
どちらもHTMLの編集することができますが、ある程度HTMLの知識があって自分で編集したい人は「無し」の方が使いやすいです。
これを編集して、枠線は下線だけとし影は削除します。
post-outerを検索して
article-list imgを検索して
残念ながら、IEやEdgeには対応していません。いつのバージョンからかは分かりませんが、Edge 41.16299.248.0では対応していました。
related-posts .related_imgを検索して
<data:post.body/>を検索して、上下にコードを追加します。
次にCSS内に次のコードを追加します。
Bloggerのテンプレート「Vaster」をカスタマイズ①、記事の文字や行間を設定しよう。
<!--CSS-->内に次のコードを追加しました。
上記を追加すると「この記事をシェアする」のボタンが左に寄るので
「/*SNSボタンのカスタマイズ*/」の箇所を修正
どちらもHTMLの編集することができますが、ある程度HTMLの知識があって自分で編集したい人は「無し」の方が使いやすいです。
Homeページの記事リスト枠を修正
デフォルトでは、枠線に影のデザインとなっています。これを編集して、枠線は下線だけとし影は削除します。
post-outerを検索して
.post-outer{
background-color:#ffffff;
border:1px solid #e5e5e5;
box-shadow:1px 1px 2px rgba(0,0,0, .4);
margin-bottom:20px;
}
これを下記に編集。
background-color:#ffffff;
border:1px solid #e5e5e5;
box-shadow:1px 1px 2px rgba(0,0,0, .4);
margin-bottom:20px;
}
.post-outer{
background-color:#ffffff;
border-bottom:1px solid #e5e5e5;
margin-bottom:20px;
}
background-color:#ffffff;
border-bottom:1px solid #e5e5e5;
margin-bottom:20px;
}
記事リストに表示される画像のサイズを変更
記事リストに表示される画像は、最初に添付した画像がサムネイルとして表示されますが、 画像によっては、つぶれて見た目が悪くなるので object-fit: contain; を追加。article-list imgを検索して
.article-list img{
float:left;
width:300px;
height:185px;
padding-right:20px;
}
これを下記に編集
float:left;
width:300px;
height:185px;
padding-right:20px;
}
.article-list img{
float:left;
width:200px;
height:150px;
object-fit: contain;
padding-right:20px;
}
object-fit: contain; は、縦横比はそのままで画像の周りに余白を設けて画像全体を表示させることができます。float:left;
width:200px;
height:150px;
object-fit: contain;
padding-right:20px;
}
残念ながら、IEや
関連記事に表示される画像のサイズを変更
上の「記事リストに表示される画像のサイズを変更」と同様に object-fit: contain; を追加。related-posts .related_imgを検索して
#related-posts .related_img {
margin:5px;
width: 150px;
height: 100px;
transition:all 300ms ease-in-out;
}
これを下記に編集
margin:5px;
width: 150px;
height: 100px;
transition:all 300ms ease-in-out;
}
#related-posts .related_img {
margin:5px;
width: 140px;
height: 100px;
object-fit: contain;
transition:all 300ms ease-in-out;
}
margin:5px;
width: 140px;
height: 100px;
object-fit: contain;
transition:all 300ms ease-in-out;
}
記事の行間変更
本来、本文に関する箇所のline-heightの値を編集すれば良いはずですが、指定しても反映されません。<data:post.body/>を検索して、上下にコードを追加します。
<div class='main-post'>
<data:post.body/>
</div>
<data:post.body/>
</div>
次にCSS内に次のコードを追加します。
.main-post{
color: #333;
font-size:16px;
line-height:1.7;
text-align: justify; }
＜参考サイト＞color: #333;
font-size:16px;
line-height:1.7;
text-align: justify; }
Bloggerのテンプレート「Vaster」をカスタマイズ①、記事の文字や行間を設定しよう。
この記事をシュアするのボタンの大きさを変更
.sns li {
float:left;
width:30%;
height:54px;
margin:20px 3px;
list-style:none !important;
}
これを下記に編集
float:left;
width:30%;
height:54px;
margin:20px 3px;
list-style:none !important;
}
.sns li {
float:left;
width:15%;
height:60px;
margin:5px 3px;
list-style:none !important;
}
float:left;
width:15%;
height:60px;
margin:5px 3px;
list-style:none !important;
}
Feedlyボタンのコードを修正
デフォルトのコードではボタンが機能しません。
a href='http://cloud.feedly.com/#subscription%2Ffeed%2FサイトのＵＲＬ'
これを下記に編集
a href="https://feedly.com/i/subscription/feed/サイトのURL/feed"
<ul>を利用したリストの位置コードを修正
<ul>を使用したリスト表示は、<ol>に比べ右よりになっているので位置を指定しているコードを修正します。 ソース内を探しましたが該当箇所の特定ができなかったので、<!--CSS-->内に次のコードを追加しました。
body ul{
position: relative;
right: 1em
}
position: relative;
right: 1em
}
上記を追加すると「この記事をシェアする」のボタンが左に寄るので
「/*SNSボタンのカスタマイズ*/」の箇所を修正
/*SNSボタンのカスタマイズ*/
.sns{
margin:10px auto;
text-align:center;
width:100%;
}
これを下記に編集
.sns{
margin:10px auto;
text-align:center;
width:100%;
}
/*SNSボタンのカスタマイズ*/
.sns{
margin:10px auto;
text-align:center;
width:100%;
padding-left:1em; ←追加
}
.sns{
margin:10px auto;
text-align:center;
width:100%;
padding-left:1em; ←追加
}
