Simplicityを少し改造してみた 番外編 part13 画像のアスペクト比を16:9にする & その他

Simplicityの公式フォーラムを見ていると、たまにサムネイルのサイズやその比率等の質問がチラホラあるように思います。自分ではあまり使う部分ではないのですが、どのようにするかを少し解説と、トップページのリストで、各タイトルや画像等がリンクになっているのをリストアイテムごとリンクにする方法等を書いてみたいと思います。

サンプルとしては、codepenでまたもや書いたわけですが、その埋め込みが以下になります。

See the Pen LVabLz by Hidekichi (@Hidekichi) on CodePen.

当サイトのリストアイテム部分なので、若干デフォルトのリストアイテムと異なる部分がありますが、おそらくイケるだろうと思います。

トップページのリストアイテムのサムネイルを16:9にする方法

このページをご覧になっている方は、すでに御存じだと思いますが、画像そのものはwordpressのuploadフォルダにアップロードしてあるわけで、それらをアップロード時にサムネイルとしていくつかのサイズを作り、本体を表示する前はそれら軽いであろうサムネイルを利用することで便利に使えているわけです。

PHPのライブラリによって、アップロード時にサムネイルは作られるわけですが、いわゆるトリミングがなされているためそれを16:9等にするのはちょっと重くなるかも知れません。なので、完璧に16:9にしておく必要はないにせよ、だいたいの長方形でできればプラグインやtinypng(tinyjpg)等のオンラインサービスを利用して、画像を最適化しておく必要が予めあることを先に書いておきます。
そうすることで、比較的軽くおおよそ不要な部分の少ない画像が利用できますので。

これらの理由の一つに、この後説明する16:9のアスペクト比の画像を作る時、仮に元の画像が4:3であった場合、16:9にする際に上下が切り取られます。実際に切り取っているわけではなく、枠からはみ出ている部分は非表示というcssのoverflow:hiddenが適用されているからです。なのでできるだけ元画像は横長長方形で作っておく必要があります。

jQuery: Youtubeの動画アドレスを書くだけでPlayerを埋め込んでみる
Simplictyの公式フォーラムで、Youtubeのレスポンシブ対応についての質問があり、この前の投稿で、ちょっと説明したんだけれども、簡...

このブログカードでYoutubeのプレーヤーを16:9で表示させているテクニックを利用します。

子テーマjavascript.jsに以下のようなjQueryを書きます。

.entry-card の .entry-thumb、これはトップページのリストのサムネイルが入っている枠になります。それをそれぞれ調べて(.each)、.entry-thumbの中にあるimgのアドレス(src)を抜き出しておきます。

次に、.entry-card .entry-thumbの先頭に.insertと言うブロックを作っておきます。この.insertの背景に先ほどimgから抽出した画像のアドレスを持たせて、サムネイルは背景画像として表示させます。この状態でもうimgには用はありませんから、除去しておきます(.remove)。

次にcssの説明となります。

SCSSだと、

CSSだと、

こんな感じになります。

サムネイルの横幅は、.entry-thumbの横幅になります。上記では横200pxの画像(サムネイル)を表示することになります。
.entry-thumb .insertでは、横幅を100%に設定し、.entry-thumbの幅まで画像を広げます。この時の画像の高さは0です。0にするわけですが、paddingでボトムを56.25%に設定することで縦の領域を確保します。

つまり、仮に横幅が200pxの時、16:9にするためには、200 : x = 16 : 9と言う式になり、16x = 1800で、xは112.5pxになれば16:9であるとわかります。仮に、heightを112.5pxとすれば、横幅が200pxの時はそうですが、150pxにしたい、300pxにしたいとなった時に計算がおかしくなります。なのでpaddingで自動計算です。

仮に、heightに56.25%を入れてみてください。きっと何も表示されないと思います。何故か?答えはとても簡単で中身がないからです。中身がないので何基準で56.25%かわからないわけですね。
あ、56.25%と言うのは、16:9の比率です。16 : 9 = 100% : ?%と言う計算から出せます。16x = 900%で、xは56.25%、そういう感じです。

background-size: coverは「縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する」こういうものです。例えば、正方形の画像をを16:9にする際、縦横比は保持しつつ、背景領域を完全に覆うには、16:9は横長長方形なので横を合わせないといけません。すると、おのずと縦がはみ出ることになります。なので、background-position: center centerで画像の中心を表示させつつ、overflow:hiddenではみ出た部分を非表示にするわけです。

こうすれば、表示されている部分は必ず16:9になります。paddingのボトム部分の割合を任意の割合に変更すれば、独自のアスペクト比で表示させることも可能です。この方法が優れている所は、縦のサイズを気にしなくてもよく、上記セレクタ名で言うならば、.entry-thumbの横幅を決定するだけで勝手に16:9になるというのが最大の特徴です。

また、background-imageで表示されているため、何かしらの別の画像を重ねることも可能です。これによって、半透明のグラーデーション等の画像をこれらに重ねて、一風変わった画像の演出をしてみたり、前面に何かしらのブロックを作ったりして画像を簡単にダウンロードさせないような手法も考えられます。何をしても画像は抜き取ることができますが、面倒臭さを与えることでその頻度を軽減することができると思うわけです。

トップページの各リストのリンクを便利に(?)

例えば、その記事を読みたいと思った時、Simplicityではトップページならリストから、その記事のタイトルか続きを読むか画像あたりをクリックして記事に飛びますよね?
PCだったら、それは大した問題ではないこともあります。しかし、スマホなどになるとできるだけタップターゲットは大きい方が良いわけです。ならいっそのこと、各リストアイテムを記事へのリンクで覆えばいいじゃない!!と言う感じでやってみたのが以下になります。

元々の構造を以下のように並べ替えます

こうすることで、リストアイテムのそれぞれがリンクで覆われてどこをクリックしても記事へ行けるようになります。
構造が変わったので、それようのcssを書かねばなりません。

サンプルで書かれているCSSは、

こんな感じですが、もっとも気をつけないといけないのは、すべてをaタグが覆っているので、必要のない部分にはtext-decoration等でアンダーラインを解除したりする必要があります。
aが起点となってその子要素にそれぞれスタイルしていきますが、基本aは色情報程度しか持たせていないので、それぞれの色やサイズ等はSimplicityオリジナルよりやりやすいかも知れません。やりにくくなっているかも知れません(笑)
更に付け加えるとすれば、構造が変化したため、メディアクエリ等でスマホ用の設定を書く必要があります。

もしscssが使える環境があったりした場合は、是非以下のブログカードを参考にメディアクエリを便利に使ってみてください。

SASS(SCSS)を利用する メディアクエリのアイデア
いやぁ、しかしこのメディアクエリというのは本当に難しいものです。どれが正解かはイマイチわかりませんし、かといって何もしないわけにも行きません...
スポンサーリンク

シェアする

フォローする