神戸グルメゲリラ

Nukko Nuko, sometimes gourmet blog

はてなブログのテーマのサイドフレームを左側に配置してみる。判明した問題点と改善策

はてなブログのテーマストアにはサイドフレームを左側に配置したテーマがありません。なんでだろうと以前から思ってまして、試しに自分のブログでトライしてみました。

やってみて初めて発覚したというか大問題があります。

PCで見た場合は問題なく表示されます。左右のフレームを入れ替えるだけの事ですから、テーマのcss作成は、そんな難しい事ではありません。

テーマはレスポンシブ対応にする必要があるので、スマホで表示してみると

オーマイガー!左側に設置したサイドフレームが先頭に表示され、そのずーっと後方に記事のメインコンテンツが表示される。

やる前から気がつけよ!と当然、こうなってしまうのである。

なるほど、こういう問題があるので、だからテーマストアにはサイドフレームが左側にあるテーマが無んだと、納得しましたが

意地になって、cssを捏ねくり回してみました。出来ました!

サイドフレームが左側にあるテーマでレスポンシブ対応のやつ、cssだけで実装できました。現在、自身のブログにあてて、テスト中です。

今、PCで表示してた場合、ブラウザの幅を小さくしてみて下さい。先頭のアイテムであるサイドフレームがメインフレーム後方へレスポンシブします。スマホ向けでこの挙動を実現する必要がありました。

flexboxのflex-direction: row-reverse;で対応、これにより順序を逆にできます。

問題なければ、テーマストア初の左サイドフレームのテーマとしてリリースしてみようかなと、あと「Non-Style」ってコンセプトにして、装飾系のcssを一切廃止、超軽量な表示の軽さを追及したテーマでリリースしてみようかなと考えてます。0.1秒でも早く表示して、モバイルフレンドリーを追及してみようという考えです。

ただし人間の視神経は、0.2秒以下の差異は判別できない性能なので、CSSの処理速度アップが0.2秒以上の成果を上げないと意味ねーって話しがあまりますが

そもろも論として、サイドフレームは右と左、どっちがいいのか

例えば、アマゾンなんかは左側に設置されてたりする。ブログみたいな記事に目線を集中させたい場合は、やはり右側がいいようなのである。

ようするにメインコンテンツの情報が何に基づく情報なのか示した方がいい場合、アマゾンのように、左側にサイドフレームを設置し確認する時の目線が追い易くなる。ブログのメインコンテンツは、サイドフレームと情報の繋がりがなく、単独で表示しているので、サイドフレームを目線から離す効果のある右側に設置がするのが望ましい。

といったところでしょうか

じゃなんで「ブログでサイドフレームを左側にするの試みた!」ということなんですが、単なるcss上の好奇心だけなので、じゃあそれならばと、さらに左側にサイドフレームを設置しても、見易いブログテーマっていうのを考えてみようかと思います。

いまんとこ試してみたいのが、メインコンテンツのフォントの縁取りをほんの僅か入れ太字ぽくする事で、メインコンテンツ全体が鮮明化できるのではないか(これは実施済み)、サイドフレームの幅を狭くして、文字は小さめにする。そしてサムネイル画像を大きめにする。body全体の左右の余白も少なくして、メインフレーム側に割り当てれば、相対的にさらにサイドフレームが細く見えるかと、かなり雰囲気が変わるのではないかと考えてます。

参考になった記事です

www.webcreatorbox.com

サイドフレームのアーカイブとカテゴリの並びも、これを参考にいい感じに仕上げました。飾らない超軽量テーマ「Non-Style(仮)」ほぼ完成しました。近日、テーマストアで公開します。

でもですね!はてなブログ界は右フレームオンリーの世界なので、右に馴れきって違和感ありありのテーマになっちまう確率99%なんですかね。でも少なからず絶対左フレーム派が数名はいてはること信じてアップしたいと思います(笑

 

追記

ほぼ完成しました。もう1日おいて、月曜日夜ぐらいにテーマストアへアップしたいと思います。テーマ名「Lefty」(仮)、アーカイブ一覧はカードタイプにしてタイル上に並べましました。