2015年07月08日

WordPressで、YARPPのサムネイルのアスペクト比を修正する


前回前々回の続きです。いい加減秋津洲ネタはやめてまじめに生きマス。
と言った舌の根も乾かぬウチに何ですが、
今回のアイキャッチ画像は実際の秋津洲らしいです。
軍艦にこんなこと言うのも何ですが、ライムグリーン?のラインがちょっとかわいい(・∀・)

さて、前回までの記事ですと、こんな具合でアスペクト比がおかしなことになってました。
01
特にりんごのマークが分かりやすいですね。
あと、トイレのやつもなんだかおかしなことになってます(;・∀・)
他のサムネイルは基本的に正方形のファイルだからよかったんですけどね……

さて、なぜこんなことが起こるかというとですね。
アイコンを表示する箇所が120ピクセル✕120ピクセルの領域でして、
CSSにて『アイコン表示領域のとこにめいっぱいアイコン表示してッ!!ヽ(`Д´#)ノ』的な処理がされてるんです。

最初はまぁこのままでもいいかなと諦観していたのですが、
よくよく考えると、『なんかりんごマークがぶさいくだな…(´・ω・`)』と思い立ちまして。

んで、万一長方形のサムネイルが設定されても、アスペクト比を崩すことがないように、
YARRP内部にカスタマイズを施すことにいたしました。

カスタマイズ工程は2工程です。

  1. includes/template_thumbnails.phpの編集
  2. includes/styles_thumbnails.css.phpの編集

こんな感じ。

1. includes/template_thumbnails.phpの編集
これは、YARRPを導入した時に表示方法を『サムネイル』にした場合に、
実際に発行されるHTMLの大元が入ってます。
こいつを編集してやることで、ある程度発行されるhtmlを操作出来ます。ふふんっ。

以下は編集箇所。

こんな感じでございやす。なんて長ったらしいのかしらッ(´・ω・`)
もっとマシな書き方はなかったのかしらッ!!(´・ω・`)

一応、単純にそのまま縦幅と横幅を比較して、
横に広い画像であれば縦幅を再計算して設定、
逆に縦に細長い画像であれば、横幅を再計算して設定…という感じでしょうか。

あと、この命令文はif文に囲まれていますが(実際のファイルを見て下さいな)
こいつが曲者でして、ifとelseが{}に囲まれてません。
命令文がひとつだけなら大丈夫なのですが、
今回はif文の中にかなり長いコードを書きましたので、
きちんと全体を{}でくくるのを忘れないで下さい。

2.includes/styles_thumbnails.css.phpの編集
こいつはcssを発行するファイルなようでして、
『へぇ~こんなことも出来るのね…( ゚д゚)』と妙に感心いたしました(;・∀・)

詳細はこちら~。
CSSなので、変更したブロックだけ載せます~

こんな感じです。
まぁ特にもうそのまんまって感じすな(´・ω・`) 解説することないっす(´・ω・`)
ただ、『画像が横長だった時に上下中央に配置するための記述』に関しては、
実はこれ、画像だけでなくテキストでもなんやかんやに使えて便利みたいですよ。

そんなこんなで、手入れが終了したら、いつものように記事にアクセスしてみてくださいまし。
02
うん。特にトイレとりんごが分かりやすいですね。すばらしッ!!(`・ω・´)
縦長の画像と横長の画像が混在するため、少々統一性に欠けるのが難点です。
その辺は、各自のご判断という感じでお願い致します。

まぁそんなわけで、とりあえずYARRPの改造はこの辺が終わりにしようかなと思います。
正直、8つも関連記事いらないし、4つぐらいに絞ろうかなぁ…と考えてます。

なんかおれ、YARRPの設定すんげーがんばった気がする(;・∀・)
ちなみに他にもいいやり方って絶対あると思うんで、
ココ見た方で『こんなめんどくさいやり方、行けてないッ!』て方は、
もっとスマートな書き方を教えてクラハイ(;・∀・)


……いや、なんか見つけちゃったもので…(;・∀・)
ここ見てだれか『今年のハロウィンは秋津洲のコスプレするかも……ッ!!』て人とかいたら面白いねぇw

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)