Simplicityを少し改造してみた 番外編 part14-2 1カラムデザインのアイデア2

どうやっても1カラムにした時に考えさせられるのはサイドバーです。
サイドバーがなければ、その機能をどこに持たせるかを考えると良い案がなかなか出てきません。前回(以下ブログカード)では、メインの部分横に画像を貼り付けられるパネルを用意したものでした。横幅を使うアイデアだったため、スマホの時にはあまり有効ではありませんでした。

Simplicityを少し改造してみた 番外編 part14 1カラムデザインのアイデア 画像をメインカラムから外してみる
まだ完全にできているわけではないのですが、形的にできたような気がするので公開してみたいと思います。 ってCodepenではすでに公開してい...

で、今回はもう少し何とかできそうな感じのものを考えてみました。よりによってそこそこの横幅がいるのでcodepenで見ていただく方が良いかと思います。PCデフォルトの1070pxよりは多少小さくしていますが、最低でも1000pxぐらいは表示できる環境が必要です。PCデフォルトの1070pxにしました。タブレット以上の解像度を想定してます。

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

動作と、やっていること

メイン記事の背後にうっすらと青いパネルがあるかと思います。PCの場合はそこにマウスオーバーするとパネルが出現します。タブレットの場合はカーソルがなくマウスオーバーできないので、クリックした時にパネルが開くようになっています。

パネルが開くと、パネルが非透過になり、今度はメインの部分が透過し、右に避けます。jQueryのスクリプトの上の方でpanelAlignと言うのがありますので、これをrightにするとパネルは右側に表示され、メインは逆方向に動きます。
ついでに#mainに奥行きを持たせて変形するようにしました。

閉じる時はパネル以外をクリックすると元通りになります。

ついでと言ってはアレなんですが、サイドバー固定のギミックも入れてあります。ただし、追従部分の内容がかなりの高さを持っている場合は、そのフォローをしていないのでフッターにはみ出す可能性は大です。その際は、overflow-yあたりをautoなどにしておいて何とかイケないものかなぁとは思ってますが、そこまでは現状では対応していません。

このスクリプトをひな形にどういうことができるか

2015/09/01 追記
サンプルでは、#mainの有効幅を960px(デフォルト740px)に変更して、その幅からフォントサイズを元の記事の文字数分(約42.5文字)で割り、22.5pxでの表示に変更してあります。記事内のpタグ部分だけではなく、ul,olなどのリスト、h1,2,3の見出しなども変更してあります。また一部画像のセンター寄せもしてありますので、このページのcodepenを参考、あるいはもっと表示結果(result)を大きく表示できる本体を文字の参考までに。

このスクリプトでは、#body-in(#mainや#sidebarなどが入っている見えないブロック)のサイズ内で色々しています。例外は何も処理していないのですが、例えば#mainの幅をもう少し大きくしたいとか、#mainをもっと目立たせたいと言う場合はあるかと思います。

元々#body-inはサイズがPCの場合1070pxですので、#mainのボーダーを含むサイズの740pxの場合、330pxのスペースがあることになります。本来は、#mainの横に#sidebarがあるため、その間隔を含めて1070pxで設定されているのかと思うんですけれども、#sidebarが#mainの背後に隠れたら、その余っている330pxは丸々利用することができるわけです。

330pxというと16pxのフォントサイズで20文字分になります。元々の#mainの横幅が680pxで、左右に合計60pxのスペースがある感じです。記事を表示している680pxは16pxのフォントサイズ計算で42.5文字分となり、もし仮に330pxをまるまる利用した場合、42.5+20で62.5文字分表示でき、かつ左右に30px分のスペースを確保できるという事になります。

62.5文字は16pxフォント計算で約1000pxになります。と言うことは、仮にfont-sizeを20pxにした場合、50文字分、元の文字数と同じぐらいにした場合は、約23.5pxのフォントを利用して元のSimplicityの記事の文字数ぐらいになります。

利用できる文字を大きくすると小さい文字とのギャップがアクセントになって、色んな文字組ができたりもしますし、場合によっては読みやすいデザインも可能でしょう。

あまり、横長になってしまうと顔を振らねばならなくなり読みにくいとか目が疲れるなど言う事にもなりかねませんが、フォントサイズを大きくして横の文字数を40文字前後にするのであれば、画面が大きくなったからと言って読みにくくなることはありません。

しっかりと確認はしてませんが、23.5pxのフォントサイズは、だいたいTwitterの短いツィートの時に出る大きなフォントぐらいなのではないかなぁと思います。

しかし、これはデフォルトの#body-inの横幅なら、最大でそこまでイケると言う話で#body-inがもっと広がれば更にフォントサイズは大きく取ることが可能になります。

このスクリプトのデフォルトでは、#mainをセンターに配置するために左右にmarginを均等に取ることでセンター寄せしています。その際は、

( #body-inの横幅 – #mainの横幅 ) / 2 の値をmarginの左右に入れることで#mainをセンター寄せにできるわけです。これを逆手に取って、ちょっと左とかちょっと右などという設定ももちろん可能であり、パネル部分はマウスオーバーかクリックできるぐらい見えていれば良いので、#body-inの横幅 – #mainの横幅 をした残りのスペースを#mainに還元することで#mainの横幅を広げることができます。例を上げると、

#body-inは1070pxです。
元々の#mainの横幅は740pxなので、330pxがスペースと言うのは前述した通り。

サイドバーのパネルが見えている部分を仮に50pxとすると、280pxが#mainに還元できる幅となるわけです。よって、#mainは740px + 280pxで、1020pxが可能という感じになります。

#mainのパディングをそのままとすると60pxは必要なので、有効な記事の横幅は、1020px – 60pxで、960pxになります。
これを元のSimplicityの横文字数42.5で割ると、フォントサイズは約22.5pxで同じとなります。

サンプル: これは16pxですこれは22.5pxです

横幅が確保できればtableなどでデータを表示してもある程度のデータが並べられますし、大は小を兼ねるではありませんが、小さいものはよりたくさん入れることも可能になるわけですからデザインの可能性は高まるかと思います。

display: flexによる、記事の段組なども可能になるため、情報をぎゅっと詰め込むことも可能です。
逆にそうしてしまうと、スマホなどの小さい画面の時にどうしようと言う事にもなるわけですが、emやremと言う単位をうまく使って、pxによる絶対指定ではなく相対指定にすることで、画面サイズに合わせて最適なフォントサイズを維持することも可能です。

display: flexによるレスポンシブなレイアウトと相対的なフォントや行間などの指定でデザインをより凝ったものにすることが可能になるでしょう。

まぁ結局そうするために色々と考えねばならないこと増えたりして大変になったりするわけですけどね。
ちなみに、jQueryで色々と設定してますが、だいたいの場合CSSで行けそうです。もしかしたら随時cssに変わっていくかも知れません。

しばらくこのスクリプトを色々イジる可能性があるため、上記内容は随時変わるかも知れません。予めご了承下さい。

スポンサーリンク

シェアする

フォローする