Studio TA Subsite の案内とお知らせ

エキサイトブログ編集のツボ 左右寄せ配置の画像と文字列との間隔

2017年 07月 06日
「ピックアップブロガー」という「優良ブロガー掘り起こし」企画は、私にとっては、時として有意義で参考になるコーナーでした。 現在は「プラチナブロガー」のシステムに移行しましたが、これは正直いただけません。 これには言葉が無く、「プラチナ」を選んだ理由も判りません。 選ばれたいと思っての事ではありません。 人は「言葉」を、たとえバイアスがかかった記事でも、読みたいものなのです。



最初から話がズレましたが、「ピックアップブロガー」の誌面に良いサンプルを見つけたからです。 実物は、以下のリンクを辿ってください。


ブログのシステムを利用したこのコーナーでは、左右寄せ配置の画像が多用されています。 下は2013年12月のページですが、画像と文字が着いて変な印象です。

a0349576_10474572.jpg

これはエキサイト編集部の誌面としては恥かしいですね。 さすがに、翌2014年からは工夫をしています。

a0349576_10565441.jpg

左右寄せ配置の画像は、文字列との間隔を確保するために、余白を追加する様になりました。 下は実際に上の記事に埋めこまれた画像です。

a0349576_10572793.jpg

右寄せ配置の場合は、文字の折り返しで自然に間隔が開くので、幅の狭い余白を左側に追加する様になりました。 こういった画像での工夫は悪くはないのですが、以下のマイナス点があります。

◎左右寄せ配置の画像は、毎回画像アプリで余白を作る必要がある。
◎画像クリックで拡大表示等をすると、余白も表示される。
◎スキン変更などで文書背景色が変わった場合に、余白が露出してしまう。
◎スマホで見た場合に、一般に画像が中央寄せ配置に変わり、余白分はアンバランスになる。

など、余り賢い方法ではありません。

一番良いと思われる方法は、ブログスキンで左右寄せ配置の画像に関して、適当な左右のマージンを指定してやることです。 PCブログスキンからの指定は、スマホ表示には影響しないので好都合です。

編集画面から画像を配置すると、Htmlコードに以下のclass名の「img要素」が埋め込まれます。

左寄せ配置  IMAGE_LEFT
右寄せ配置  IMAGE_RIGHT
中央寄せ配置 IMAGE_MID

このクラス名を使った以下のCSSコードは、それぞれの場合の画像のマージンを指定する例です。

img.IMAGE_LEFT {
margin: 0.22em 1em 0.38em 0em !important; }

img.IMAGE_RIGHT {
margin: 0.22em 0em 0.38em 1em !important; }

img.IMAGE_MID {
margin: 0.22em 0em 0.38em 0em !important; }

◎この記述方法は「 margin: 上マージン値 右マージン値 下マージン値 左マージン値 ; 」と時計周りです。
◎マージン値の単位「em」は、周辺の文字の大きさを基準にする単位です。
◎問題の左右の余白分は「1em(1文字分)」としています。
◎上下の余白分は、使用フォント、行間隔、デザイン意図などによって、各自で適当な値を決定します。
◎最後の「IMAGE_MID」の項目は、中央寄せ配置も上下の余白を統一するためのものです。
◎余白部分の色は気にする必要がなく、先の画像で余白を作る場合の問題点を全てクリアー出来ます。

上記の様なコードをブログスキンに追記して指定すれば、ブログ誌面(PC)上で、文字列との間隔を統一して調整出来ます。

〔注意する点〕
◎以前のページにもスキンの指定は影響しますから、画像に意図的な余白追加の加工をしていた場合は、この指定で余白が過剰になります。 過去のページへの影響は、ざっと確認した方が良いでしょう。
◎左右寄せ配置の画像は、スマホ画面では一般的に中央寄せ配置になります。 それを考えた誌面構成がベターです。
◎左右寄せ配置の画像の横に書き込んだ文字列は、流し込み状態になり、構成にある程度要領が要ります。

なお、今お使いのブログスキンでアレンジや追記を一度もした事がない場合は、必ず以下の手順を参考にマイスキンを作成してください。



〔参考〕
以下のリンク先には、このページの内容に関係する情報があります。 余裕のある方は参考にしてください。



[PR]
by Ataron | 2017-07-06 10:45 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/26971639
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。