どうも。
Vaster2 の簡単なカスタマイズの続きです。
トップページを自分の記事にあったスタイルに変更する位なので、難しい機能等を追加する訳ではありません。
もともとは、画像領域内に対して20px の余白が設けられていましたが、CSSの該当箇所のpadding-right: 20pxをobject-fit: cover;に置き換えたので余白が無くなった訳です。
ちなみにpadding は詰め物の意味。
表示領域から内側方向への余白部になります。
marginは外側方向への余白となります。
日付/タイトル/スニペットの各左側にmarginを付けなければならないと思っていたのですが、表示領域から隙間を取るようにしました。
これで、追加変更する箇所は1箇所で済むわけです。
変更対象は前回と同じCSS内.article-list imgで記述されてます。
Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.article-list imgの部分を探します。
（HTML編集画面でCtrl＋fで.article-list imgを検索。）
追加するプロパティは前回置き換えたobject-fit: cover ;の直下にmargin-right: 20px を追加します。
まぁ素人なので必ずしも正解ではありませんが、特に表示遅延も無いので良しとします。
Vaster2 の簡単なカスタマイズの続きです。
トップページを自分の記事にあったスタイルに変更する位なので、難しい機能等を追加する訳ではありません。
トップページのサムネ画像と記事タイトル等の表示間隔を開けます。
トップページの記事に表示されるサムネ画像の表示方法を変更したのですが、日付/タイトル/スニペット/カテゴリが画像にピッタリと寄り添ってしまいました。
もともとは、画像領域内に対して20px の余白が設けられていましたが、CSSの該当箇所のpadding-right: 20pxをobject-fit: cover;に置き換えたので余白が無くなった訳です。
ちなみにpadding は詰め物の意味。
表示領域から内側方向への余白部になります。
marginは外側方向への余白となります。
変更箇所は1箇所
CSSを変更して画像の表示領域の右外側に20pxの隙間を空けるだけなので、プロパティmargin-rightの指定をするだけです。日付/タイトル/スニペットの各左側にmarginを付けなければならないと思っていたのですが、表示領域から隙間を取るようにしました。
これで、追加変更する箇所は1箇所で済むわけです。
変更対象は前回と同じCSS内.article-list imgで記述されてます。
Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進み、CSS内の.article-list imgの部分を探します。
（HTML編集画面でCtrl＋fで.article-list imgを検索。）
追加するプロパティは前回置き換えたobject-fit: cover ;の直下にmargin-right: 20px を追加します。
 |
| 問題無さそうです。 |
まぁ素人なので必ずしも正解ではありませんが、特に表示遅延も無いので良しとします。
