[PR]記事内のアフィリエイトリンクから収入を得る場合があります

ブログを最近変更した話と画像の説明文の位置について一家言

この記事は 約4 分で読めます。
Mizuka taking pictures for her blogMizuka taking pictures for her blog / Joi

(▲嫁ではありません)
2013年のお盆休みにブログの体裁を少しいじりました。
リピートで見に来てくださっている方はすぐお気づきになられたかと思います。

初めて訪れた方は意味の分からない話ですみませんがまあ、おつきあいください。

どんなところを変えてみたか少し説明をさせてください。
なにしろwebデザインだとかサイト構築だとかド素人なので、おっかなびっくり触るかと思えば、怖いもの知らずでガンガン添削したりして楽しんでおります。

スポンサーリンク

変更したところ

いずれもデスクトップ版の話です。スマホ版はほとんど変えてません。

全体の幅を変えた

いまどきのwebサイトにしては幅がやや狭く古臭い印象がありましたので、今風に幅を広げてみました。

具体的に参考にしたサイトはこういうところです。
ヘッダー、フッターをブラウザ幅いっぱいにする方法 | 簡単ホームページ作成支援-Detaramehp

 

 

 

 

結局意図通りにはできませんでしたが・・・

幅を広げたことでちょっとイケてる見栄えになったかもしれません。前よりは。
幅を広げたのは本文領域だけですが、同時に大方の画像も広く表示しなおしました。

一部直しきれない画像もあり、多少の違和感があるかもしれませんが、ご容赦ください。

動かない左側のソーシャルボタン群を消した

幅を広げたことによりデバイスによっては画面いっぱいに表示されるようになりました。

例えばワシの持っているiPadでは画面いっぱいになりました。

そうすると左側に浮いていたソーシャルボタン群(いいねとか)が邪魔になりました。

よってバッサリと消しました。

これがあったらイイねが増えたりツイートが増えたりするかと期待しましたが、思ったほど効果はなかったので全然名残惜しくはありません。

面白い内容であれば押したい方は上から下まで隈なく探して押してくれると期待しております。

ちなみに今は記事本文の下の方と記事タイトルのすぐ下にイイねとツイートだけは置いてあります。

ヘッダーの画像をモザイク型に変更して各画像からリンクを貼った

ヘッダー画像を細かな写真の集合体にしました。

そもそもこういうヘッダー画像を付けること自体があまり今風とは言えないかも知れませんが、他の手段を取り入れるだけの技量がありませんのでこういう形です。

今までどこかへ出かけたときの写真をちりばめましたが、それぞれ写真に関係のある記事にリンクしてあります。

よろしかったらこれらもご覧になってください。

気が向いたらいずれまたこれらの画像を一新して貼り直します。

画像の上に説明?下に説明?

さて、ワシのブログでは現在画像の上に説明書きを書くようにしております。

どちらかというと画像の下に説明のあるブログを多く見かけます。

ただ、自分が読んでいて説明書きが写真の上にあった方が見やすいと感じるので自分のブログでは画像の上に説明書きを添えるようにしています。

さらに▼印を文頭につけてここから下の写真の説明ですよというふうにしています。

上に文章、下に文章、どちらが正しいという答えはないと思いますが、自分は以下のように判断して上に文章を載せるようにしています。

スクロールして説明文が先に来ているとそのままスクロールして文章を読みながら画像を同時に見られるような気がします。

文章は「読む」で画像は「見る」なんですよね。

逆に、画像が先にあって下に文章があるとその文章を画面の真ん中あたりへ持ってきてから読む癖があります。

すると再びその説明文を咀嚼しながら画像を見ようとすると画面をスクロールして下に戻すか視線を上に向ける手間が発生します(個人的に)。

要するに視線(目玉)をほとんど動かさず閲覧したいのです。(目が細いので上下に動かすのが大儀なのです)

よって上に文章があるほうが文章を読みながら視界の一部に入ってきた画像も同時に見えて楽なんじゃないかと思ってます。

あくまで個人的意見で誰にも押しつけるわけでもなくこういう根拠で上に説明文を書いているという言い訳です。

今日はこう思った

こまかな修正はちょくちょくしているんですが、大きく目につく点はこれくらいです。

これからも訪問してくださる貴方にとって見やすいサイト作りを目指して参ります。

内容ももう少し濃くできるようにがんばります。

タイトルとURLをコピーしました