読者です 読者をやめる 読者になる 読者になる

何でもない日常だから

幸せだと思う。

はてなブログでの画像配置について考えてみる

はてなブログは文章を書くという事に関しては優れていると思いますが、画像を扱う事に関してはなかなか融通が利かないかなと思います。

画面サイズで挿絵程度で使うには問題ないですが、複数枚貼るときにはなかなか融通が利きません。

さらに最近はレズポンシブデザインでブログを作成している方も多いと思いますが、PC・スマホ両方でなかなかイメージ通りに配置出来ないです。

 

そんな中で自分なりに考えてしている事の備忘録・・・

(見たままモードでの話しですので、その他モードでは該当しないと思います、又このブログはスマホは専用ページになっていますのでスマホで見た場合何やってんだかわからないかもしれません。。。)

 

 はじめに・・・

 はてなブログで画像を扱うには基本的にFotolifeにアップロードし、その中から選択して貼り付けになると思います。

又裏技的な方法として自分のフォルダー等からドラッグ&ドロップには対応。

ただし、コピー&ペーストは出来ない。(作成中のページ内でのコピペは対応している謎仕様です)

ドラッグ&ドロップは狙った所に貼り付けられない事が結構あるのでコピー&ペーストで処理したいです。。。

そして画像配置(例えばセンタリング)するにはHTML編集でするしか方法がありません。基本的な事はボタンでぱっとやっつけたいですよね

  という事で・・・

 自分の使っているテクニック?という程でもないですが、画像を使用する時のワンポイント?

 横に並べる 

2枚の画像を横に並べる為に画像を2枚貼り付けます。

f:id:commseed:20170219205842p:plain

f:id:commseed:20170219205847p:plain

 すると横幅に余裕があってもこのように縦に2枚並んでしまいます。

 どうしてか?HTML編集にしてタグを確認すると・・・

 

1枚毎に<p></p>の段落タグが挿入されています。ま~これは仕様としてあきらめますが、横に配置する為には何か対策しなければなりません。

 

 タグを編集する

1枚毎に改行されているなら、1枚毎に改行しなければ良いです。

と言う事でHTML編集で少しだけ変更を加えます

<p>1枚目の画像URL<p>

<p>2枚目の画像URL<p>

を<p>1枚目の画像URL、2枚目の画像URL</p>という様に1枚目の最後の</p>と2枚目の先頭の<p>を削除します。

すると

f:id:commseed:20170219205842p:plain f:id:commseed:20170219205847p:plain

このように横幅が十分にあれば、横並びで表示されていると思います。

閲覧中のブラウザの横幅を変更すると横並びになったり縦並びになったりすると思います。

これは複数枚でも同様です。先頭と最後を<p></p>で囲ってください。

この方法のメリットは画面サイズで横並びの数が変わるので画像サイズを維持したまま表示可能です。レスポンシブページで生かせると思います。

このようにレスポンシブページならかっちりと配置を指定しなくてちょっと指定をルーズにした方が面白い見え方になる事もあると思います。

又複数枚横に並べていた場合上と下で枚数が違ってバランスが悪くなるのでセンタリングをかけておくと良いかもしれません。 

 <table>タグを使う

アドセンスのダブルレクタングなどで使っている方も多いかと思いますが1つの方法だと思います。他には<li>リストタグを使うのかな?

 

f:id:commseed:20170219205842p:plain

f:id:commseed:20170219205847p:plain

この場合画面サイズに合わせて画像サイズが変化していきます。

画像はたくさん張りたいけれど、だらだらと長くなってしまう事がいやな場合はこちらをオススメします。

ただし枠線が表紙されるのでcss等で消去するか逆にアクセントとして編集すると見映えがよくなると思います。