iiie.nagoya

物づくりと生活、"経験"を記事へ

記事一覧ページのアイキャッチ画像サイズを変更する【gram】

f:id:gorislog:20190407194632p:plain

 

はてなブログテーマ『gram』のカスタマイズ記事です。

 

gramsample.hatenablog.jp

 

 

画像サイズを変更する

f:id:gorislog:20190505072410p:plain

 

デフォルトでは、記事一覧ページの画像サイズは影付き白ボックスの横幅100%表示、縦幅は200pxで指定しています。

横幅については、閲覧環境に合わせられるので指定できませんが、縦幅を指定することで、今までよりも画像表示がおおきくなります。

「画像サイズが小さいな」と思っていた方が調整する方法を記載します。

 

やり方

記事一覧ページのアイキャッチ画像サイズは以下のコードをCCSに追記することで変更できます。

 

.page-archive .entry-thumb-link {
height: 400px;
}
.page-archive .entry-thumb {
height: 400px;
}

 

height: 400px;の部分を変更することで、画像サイズを変更できます。

※.page-archive .entry-thumbと.page-archive .entry-thumb-linkのheightは同じ数値にしてください。

 

f:id:gorislog:20190505072530p:plain

 

  • デザインよりカスタマイズ(スパナマーク)を選択
  • デザインCSSをクリック
  • 表示された領域をクリック

 

f:id:gorislog:20190505072619p:plain

 

  • 表示された領域にコードを貼り付ける
  • テスト画面が変更され、画像サイズが大きくなる
  • 変更を保存する