人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

歪まない「同じタグ・カテゴリ・月」の記事画像

2017年 07月 08日
ページ末尾に表示される「ページナビゲーション画像」は、ブログを訪れた人に他のページの興味を誘う、上手い仕掛けだと思います。 しかし、この機能は正方形のサムネイルを生成するので、縦横比が2:3の写真画像などは横幅が圧縮されて、残念な表示になります。

これは、簡単なスキンアレンジによって、元画像の縦横比のサムネイルを生成させる事が可能です。 アレンジ方法は、サムネイルの「高さを一定にする」か「幅を一定にする」かの2種の方法があります。 ただし、幅か高さのどちらかがフリーになるため、この部分のデザイン上の「崩れ」を許容せざるを得ません。 私はそれでも、歪まないサムネイルのデザインを選んでいます。



以下は「ピックアップブロガー」のスキンで、これは高さを固定した例です。 上の項はシステム側のデフォルトの指定、下の項はスキンアレンジで追加されています。

.thumnail_next_bbs {
border: solid 1px #cdcdcd !important;
margin: 0 !important;
padding: 4px;
float: left;
display: block;
width: 114px;
height: 114px; }

.thumnail_next_bbs {
margin: 0 3px 0 0 !important;
width: auto !important; }

上項では、サムネイルの枠線「border」と、サムネイルの間隔「margin」、枠線と画像の余白「padding」等が指定されています。 幅「114px」高さ「114px」の値は、本文幅内に5個のサムネイルが納まる様に、システムが指定したものです。

下項はスキンアレンジで上項を修正しています。「margin」はサムネイルの間隔を少し開く指定です。 そして「width:auto」の指定で、サムネイルの幅が「本来の縦横比」になります。 下図は実際のサムネイルの様子です。

歪まない「同じタグ・カテゴリ・月」の記事画像_a0349576_12223883.png

しかしこのアレンジは、横長の元画像が多い場合に、サムネイルが次行に送られてしまいます。 他ページの最初の挿入画像が無作為に元画像に選ばれるため、この崩れは起こりがちです。

歪まない「同じタグ・カテゴリ・月」の記事画像_a0349576_12232295.png

この例では、掲載する画像の縦横比がおよそ決まっている場合は、アレンジの項に「height:100px !important;」等の指定を追加すれば、崩れを減らせます。「100px」の値は単なる例で、使用しているスキンの本文幅から適当な値を決める必要があります。

下図は、IEの「要素の検査」機能を使って、「height:100px」に変更した状態です。

歪まない「同じタグ・カテゴリ・月」の記事画像_a0349576_12243723.png

これでもサムネイルが4個の場合で、横幅のあるサムネイル5個で崩れない様にするには、更に高さを抑えるべきでしょう。



次は当ブログの方式で、サムネイルの幅を固定し、高さをフリーにする方法です。 上の項はシステム側のデフォルトの指定で、下の項はスキンアレンジで追加したものです。

.thumnail_next_bbs {
border: solid 1px #cdcdcd !important;
margin: 0 !important;
padding: 4px;
float: left;
display: block;
width: 108px;
height: 108px; }

.thumnail_next_bbs {
width: 118px !important;
height: auto !important;
padding: 0 !important; }

上項は先の例と同様で、幅「108px」高さ「108px」の値だけが違います。 これは、システム側が本文幅に合わせて指定したものです。

下項は私がスキンアレンジで修正した内容です。 サムネイルの余白を「padding:0」で切り詰め、本文幅に納まるサムネイルの最大幅を探して、「width:118px」の値を決めました。「height:auto」でサムネイルの高さが、元画像の縦横比に即したものになります。 下図は実際のサムネイルの様子です。

歪まない「同じタグ・カテゴリ・月」の記事画像_a0349576_01420346.png

このアレンジは、サムネイルの配置崩れが生じません。 その代わり上図の様に、高さの不ぞろいが避けられません。 本文に挿入する最初の画像の縦横比が一定なら、不ぞろいがなくなりますが。



以上の例を参考にして、どちらかの下側の項を、スキンのCSSに追記すれば、歪まないサムネイルを実現できます。 後は、崩れを抑える工夫が必要です。 使用している本文幅、サムネイルの余白、枠線、間隔、元画像、などの条件で変わりますが、幅や高さの適当な値を指定する必要があります。

なお、使用中のスキンを始めてアレンジする場合は、以下のリンクを最初に読んでください。



by Ataron2 | 2017-07-08 02:41 | ブログスキンのアレンジ