トップページに縦長サムネイルを利用したい方向けカスタマイズ

追記 2023.10.14
現在弊テンプレートでは縦横比指定の方法が異なります。古いバージョンのテンプレートをご利用の場合のみ本記事を参照してください。

はじめに

サムネイル表示を縦長にする、というカスタマイズではありますが、前述の通り 縦長画像を推奨しているサービスは見当たらない という点に注意。画像が縦に長いとモバイルでは画像1枚だけでデバイス縦全面専有してしまうこともあり、コンテンツが目に入りにくいといった難点もあります。ただサムネイルが縦長だとSEO面でめちゃくちゃ不利になる、といった話も聞きませんので、総合的に方針を決めてください。

アスペクト比 についてなんですが、web上の特に「コーディング関連」では 横 : 縦 だと思って間違いありません。横幅を先、高さが後。16:9 とある場合は 横16:縦9 ですね。日本語で「縦横比」とは言っても「横縦比」とは言わないと思いますから逆になってしまいますが、widthが最初、heightが後です。
* コーディング = html, CSS, JSなどの言語を書き記すこと

本ページの内容は 要約表示タイプ のテンプレートのみ関連があります。全文表示タイプの場合、「各記事のサムネイル」というのはありませんので除外。そして今回は 従来よりも画像の高さが大きくなる(高さが増える)ことを想定 しています。逆(高さを減らす)ことは以降のカスタマイズ作業の流れを踏めば可能ですが、デザイン面などについて言及はありません。

アスペクト比変更に向いているテンプレートと向いていないテンプレート

ここで言う向き不向きは、難易度を指しません。デザインバランスのことだと思ってください。

画像に対し、概要が 縦に配置されている ものですね。画像の上、あるいは下に記事タイトルなどがあれば比較的変更しやすいと言えます。

1. 緻密な計算で成り立っているデザイン
2. 画像に対し概要が横に並んでいる
3. ひとつひとつのアイテムが大きい

1の場合はほぼ確実にレイアウトが崩壊します。
2の場合は画像の高さが大きくなることで右あるいは左に配された概要などとバランスが取りづらくなり、「不格好」と感じる結果になることが多いです。
3の場合、横長でもこれだけの高さを専有するのですから、高さが増えれば相当大きな領域になります。それはおすすめできません。

作業フローを理解するだけでなく「向き・不向き」の選定も重視してください。また、「向いている」と思っても実際に作業が完了してみたらなんとなくダメ、ということももちろんあります。

必須事前作業 3工程

• 親要素のクラス名確認
• サムネイル画像表示用変数の変更あるいは確認
• スタイルシートの変更

ここからは、私が製作したテンプレートでの説明に限定します(他の方の作品がどうコーディングされているのか不明のため)

<div class="grid-image-wrapper">
  <!--body_img-->

<div class=grid-thumbnail>
  <!--body_img-->

<!--body_img--><div class=grid-image-scale><img class="lazyload grid-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url_760x420>" alt="<%topentry_title>"></div><!--/body_img-->

<!--body_img--><div class=grid-image-scale><img class="lazyload grid-image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_image_url>" alt="<%topentry_title>"></div><!--/body_img-->

表示したい画像のアスペクト比を知る

アスペクト比が毎回バラバラ、という場合はどうしようもありません。今回は最初に例えに出したように「フライヤー(配布広告, チラシ)」「映画ポスター」「本の表紙」他にも「CDジャケット(アルバムアート)」など、規格がほぼ統一されているものに対してのアプローチです。フライヤーやポスターは 1：1.414 とかちょっと嫌な感じの比率になりますが、まだ深く考えなくて良いです。

掲載したい画像を一つ選び、以下のサイトを利用してアスペクト比を算出しましょう。

アスペクト比計算ツール

画像のサイズからアスペクト比を計算するツール

aspect.arc-one.jp

画像の実寸を「横幅」「縦幅」(高さ)にそれぞれ記入し、「計算する」を押すだけです。

このサイトさん、非常に便利で、CSSでアスペクト比を固定するにはどうすれば良いか のヒント、というよりもほぼ答えを教えてくれます。ただしどういうCSSを組んでいるかはテンプレートによりますので、テンプレートの方に合わせる必要があります。従って取得すべき箇所は以下のひとつだけです。

htmlが載っていたり、CSSセレクタなども書かれていますがスルーし、padding-top: この数値%; この緑部位の数値だけをしっかり記憶してください。一応説明すると、ここで記されるパーセンテージ単位による指定は 横幅に対し高さがその何パーセントに相当するか で、横のサイズを基準にしています。ここもあまり深く考えなくてOKです。

ここまでが「事前の」必須作業です。念の為ざっくり説明すると、次に本作業であるスタイルシートの編集に移ります。その前に「ターゲットになるセレクタ名の取得」「原画を参照する変数への変更」「比率を指定する数値の決定」を済ませます。

原画を参照表示する変数に変更する必要は、FC2ブログで用意されているサムネイル用変数というのは総じて横長です。今回は縦長にするわけですから、サムネイル化されていない元の画像を利用した表示に変更を行う必要があります。

サムネイル化(縦横サイズ縮小及び軽量化)された画像ではなく、オリジナル画(原画)を表示することになります。ユーザビリティのためにも容量の削減は必ず行うよう配慮してください。
* 縦横サイズの縮小ではなく容量(KB, MBなど)のことです
また逆に、短辺300px以下など小さすぎる寸法の画像を利用するのも避けるようにしましょう。

縦横サイズは長辺1200px程度が妥当です。軽量化(ロスレス圧縮)のおすすめサイトを掲載しておきます。

TinyPNG – Compress WebP, PNG and JPEG images intelligently

Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!

tinypng.com

必須本作業 スタイルシート編集

必須作業1 で記憶したものを セレクタ (今回はクラスセレクタ) と言います。

.セレクタ名::before で検索するとスタイルシート内に1箇所あるはずです。ヒットしない場合は .セレクタ名:before と、コロンの数を2つから1つに変えて検索し直してみましょう。コロン1つの場合はieのフォールバック(後方互換)なので、ie非対応テンプレートであればコロン2つでヒットするかと思います。

.grid-image-wrapper::before

このルールセット (セレクタから始まって { から } までのまとまり) の中に padding-top: 数値%; という一行があります。数値はテンプレートによって異なります。この数値を 必須作業3 で記憶した数値に変更します。

.grid-image-wrapper::before {
  content: "";
  display: block;
  padding-top: 57%;
}

.grid-image-wrapper::before {
  content: "";
  display: block;
  padding-top: 141.4141%;
}

まとめ

スタイルシートに::before(または :before)セレクタが見つからない場合、親のもうひとつ上の親のクラスの方に指定されていることがあります。どうしてもわからなければお尋ねください(弊テンプレート利用のみ)

注意点としては繰り返しにもなりますが

• 著作権等に十分気をつけること(自己責任)
• オリジナルサイズが小さいもの(短辺300px程度やそれ以下など)を使わないこと(高dpiデバイスでぼやけます)
• 容量の削減(圧縮)を怠らないこと
• スマートフォンでの見た目を確認すること

など。あとこの方法というかCSSですが、もう若干古い(時代遅れ)になってきています。最新のもっとスマートな書き方というのがあるので、そちらへシフトして行くことが考えられます。ただ現時点ではスマホでのグリッチがあったり、ieが完全終了を迎えていないというのもあり、実際に変更できるのはまだ1〜2年ほど先かなぁと思っています(個人の感覚です)
なのでいずれ作業チャートとして役に立たなくなる日が来るでしょうが、当面は大丈夫です。たぶん ´∀｀

今回のカスタマイズは応用が効きますので、逆に高さを減らしたりなどもできます。サムネイルを縦長にするデザインについて、若干縦長というのは割とあるんんですが、サンプルのように明らかな縦長の場合は結構思い切ったカスタマイズの部類に入るので、専門的なブログ以外は避けた方が良いと思います。例えば日記と半々で書いているなど。それらの掲載画像もすべて縦に長くなりますので注意してください。いずれにしろ全体のデザインバランスを見ながら行ってくださいね。

* 本記事は予約投稿です