Vaster2 カスタマイズ Part2

Vaster2 カスタマイズ /

https://caffellatte-torte.blogspot.com/2017/03/vaster2-part2.htmlVaster2 カスタマイズ Part2

Vaster2 カスタマイズ Part2

トップページのサムネイル画像の表示を変更

CSSのコードを変更。オリジナルのテンプレートだと380行目から385行目あたり。

/* トップページの記事のサムネイル画像サイズ ----------------------------------------------- */ .article-list img{ float:left; width:300px; height:200px; object-fit: cover; }

サムネイルと記事のタイトル等の間に余白を設定する。

/* 記事一覧のタイトル ----------------------------------------------- */ .article-list-title{ overflow:hidden; } .article-list-title h2{ color:#505050; font-size:24px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6), -1px -1px 1px rgba(255, 255, 255, 0.5); text-shadow:1px 2px 3px #808080; margin-left: 20px; /*ここに余白を設定*/ } article-list-link{ color:#000; } .article-list-link:hover{ text-decoration:none; } /*記事一覧の公開日、カテゴリ名 タグ設定 ----------------------------------------------- */ .snippet{ font-size:14px; padding:0 !important; color:#888; margin-top:15px !important; margin-bottom: 5px; margin-left: 20px; /*ここに余白を設定*/ line-height:1.4em !important; word-break:break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .post-timestamp { font-size:14px !important; #margin-left: initial; margin-left: 20px; /*ここに余白を設定*/ opacity:0.7; color:#888; padding-bottom:2px !important; margin-right: 15px !important; display:inline-block; margin-top:0; } .post-tag{ font-size:14px !important; background:#008ec2; padding:1px 4px !important; color:#fff; margin-top:0; display:inline-block; }

ブログ記事のタイトル名の見出しを変更

CSSのコードを追加。

/* ブログ記事のタイトル名の見出し ----------------------------------------------- */ .entry-title { padding:10px 10px 10px 10px; font-size:28px; text-shadow: 1px 2px 3px #808080; border-left: 5px solid #008ec2; font-weight: 700; margin-top: 0px; margin-bottom: 5px; border-bottom: 3px double #ccc; border-top: 3px double #ccc; border-right: 3px double #ccc; background: -webkit-repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 3px, #ffffff 3px, #ffffff 6px); background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 3px, #ffffff 3px, #ffffff 6px); }

HTMLを書き換え。オリジナルのテンプレートだと1402行目から1404行目あたり。

＊変更前

<h1 class='entry-title'> <data:post.title/> </h1>

＊変更後

<!--ブログ記事のタイトル名--> <div class='entry-title'> <data:post.title/> </div> <!--ブログ記事のタイトル名ここまで-->

サンプル