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

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

カスタマイズ HTML, CSS, JavaScript
2022/01/25
4
vanillaice (Akira)
vanillaice (Akira)
Instruction

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。

ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ゚Д゚)ノ

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

はじめに

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

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

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

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

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

向いているテンプレート

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

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

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

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

必須事前作業 3工程

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

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

必須作業1 親要素のクラス名を確認

<!--body_img--> で検索すると、html内にヒットします。場合によっては複数箇所存在しますが、付近に <!--body_img_none--> の文字列を見つけられるものが対象です。ほとんどの場合は「複数見つかるうちの1つ目」だろうと思います。ブラウザ上で作業する方はキーボードの

Ctrl + F
* MacはCtrlをCommandに変更

でページ内文字列検索を行ってください。

この文字列の 直前(またはすぐ上) には必ず <div class= から始まるhtmlタグが存在しています。そのタグの中に存在する class="ここの文字列" 緑色の部位、つまりclass属性の値(いわゆる「クラス名」)を記憶します。

例1: <!--body_img--> の直前のタグを確認 = grid-image-wrapper

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

例2: <!--body_img--> の直前のタグを確認 = grid-thumbnail

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

例2 のように、ダブルクォーテーションが無い場合もありますが、気にしなくてOKです。

必須作業2 サムネイル画像表示用変数の変更あるいは確認

先程検索した <!--body_img--> から、今度は 直近下の方 にある <!--/body_img--> の間に必ずサムネイル用変数が記されていますのでそれを確認します。

変数の目印は <% この文頭文字列です。右開きブラケットにパーセントの記号ですね。そして左開きブラケットまでに image の単語が含まれています。含まれない場合はターゲットではありませんので注意してください。

ここが <%topentry_image_url> ならばそのままでOKです。変更の必要はありません。これ以外のものであれば <%topentry_image_url> に変更。

例: サムネイル変数が違う場合

<!--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 とかちょっと嫌な感じの比率になりますが、まだ深く考えなくて良いです。

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

アスペクト比計算ツール

アスペクト比計算ツール

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

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

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

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

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

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

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

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

TinyPNG – Compress WebP, PNG and JPEG images intelligently

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!

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

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

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

例: grid-image-wrapper の場合の検索文字列場合

.grid-image-wrapper::before

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

元のルールセット

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

例: 数値が 141.4141 の場合の変更

.grid-image-wrapper::before {
  content: "";
  display: block;
  padding-top: 141.4141%;
}
本の表紙
映画ポスター

まとめ

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

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

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

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

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

* 本記事は予約投稿です

Related post

Comments  4

-
2022/02/16 (Wed) 02:11

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/02/17 (Thu) 00:31

To Halo 検索結果サムネイルの件 内緒さん

こんばんは ('0')/

> 検索結果のサムネイルの縦横比を調整する事は可能でしょうか

.thumbnails {
で検索するとスタイルシート内に1箇所あります。このルールセット内
height: 100px;
の一行を削除。

続いて以下の内容をスタイルシート最終に追加。

.thumbnails-anchor {
display: block;
position: relative;
}
.thumbnails-anchor::before {
content: "";
display: block;
padding-top: 141.0256%;
}
.thumbnails-image {
position: absolute;
top: 0;
left: 0;
}

一度お試しください。

-
2022/02/17 (Thu) 02:27

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2022/02/17 (Thu) 20:44

To Halo 検索結果サムネイルの件 内緒さん(完了のご報告)

こんばんは ('0')/

記事内にある通り、サムネイル変数を原画URLに変更(あるいは維持)する作業はいかなるページに於いても必須です。
上手く行ったようで良かったです。お疲れ様でした :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)