Simplicityを少し改造してみた 番外編 part14 1カラムデザインのアイデア 画像をメインカラムから外してみる

まだ完全にできているわけではないのですが、形的にできたような気がするので公開してみたいと思います。
ってCodepenではすでに公開しているのであれなんですけれども。

サイドバーは、右側(設定可能です)にパネルとして移動させています(右側濃いグレー部分)。画面幅が十分にとれるのであれば、表示しておいても良いのですが、codepenでも案外、幅を使うデザインなのでひとまず閉じいる状態にしています。クリックすることで表示はされます。このパネルの中身は特にデザインしていないので、フォントカラーなどはひとまず考慮してません。すぐに直せるんですけどね。

See the Pen bdPpzx by Hidekichi (@Hidekichi) on CodePen.


※ 直接codepenで見たとしても1240px以上の表示がおそらく必要です。上記はメインカラムの左右に配置したブロックが非表示になっていますので直接codepenをご覧になられるようお願いします。

メインとなる記事部分のカラム幅を広げることはできるのですが、それをすると1行に対する文字数が増えることもありひとまずはデフォルトにしています。

さて、何をしているかと言いますと、記事内にある画像にalignleft、alignrightがついてある場合、その画像をそれぞれの方向のメインカラムの横に設置したブロックに移動させています。
Screenshot_from_2015-08-22 20_54_05画像が入っていた箇所には[image]と言うラインができており、そこをマウスオーバーすると左右に振った対応する画像、つまり元々そこにあった画像に赤枠がついてどの画像かがわかるようになっています(該当するimgタグにalign***がついているものはページ中央付近にあるため、そこそこスクロールしなくてはなりません)。

Screenshot_from_2015-08-22 20_54_13また、左右のブロック(グレー部分)に配置してある画像をマウスオーバーすると#mainに拡大して表示されます。

色々なSimplicityを利用しているサイトを見てみると、あまり画像を左右に回りこみさせているシチュエーションが見られなかったので、あまりそういう利用法をされないのかも知れませんが、こんな感じにしておくと、センター配置、いわゆる#mainの幅いっぱいで表示している画像が目立つと思うんです。

記事が文字ばかりになる恐れもあるのですが、その分、今までより行間をとってもあまり違和感がなくなるのではないかとも思います。画像とテーブルのデータなどが混在するようなサイトでは見栄えも多少は・・・。

jQuery自体は大したことをしてないので、特に説明するような箇所もないのですが、メイン部分の左右のブロック(グレー部分)は、#body-inの先頭と最後尾にそれぞれパネルを入れてその幅は、(#body-in – #mainの幅) / 2で自動的に計算してます。#body-inをposition:relativeにして、その中のパネルをabsoluteで配置し、left:0と、right:0を左右のパネルに入れることで#mainの左右にパネルが入っているような感じになっています(一応リサイズ対応)。

背景色がグレーになっているのでパネルっぽいですが、これはbackground-colorを取り除けば#mainの記事だけをもっと目立たせることができます。構造がわかるようにムリに背景色を入れている次第です。

現時点(2015/08/22)ではまだ手を入れていませんが、画面幅がモバイルサイズになった時は、いわゆる通常の画像の表示になるようにするべきなんだろうと思います。そうしないとそこにどんな画像が入っているかがわからないので。

このアイデアはどちらかというとPC向きのアイデアかと思うので、スマホが主流になりつつある現在の状況ではあまり利用する場面がないかも知れないのですが、画面が広い(であろう)PCモニターであれば、こういうこともできるという可能性と言うか、アイデアとして。

スポンサーリンク

シェアする

フォローする