FOCUS

はてなブログテーマ"Focus"のカスタマイズやあれこれ

3カラム表示およびレスポンシブ表示に関する基本的考え方

Focusを使いこなすための3カラム表示の考え方について

Focusでは3カラムのカスタマイズコードを適用すると3カラム表示が可能になります。

しかしながらその実態としては、3カラム表示に構造的に対応できないはてなブログを、構造ではなく見た目上で強引に3カラムっぽく表示させているというだけなのです。

そのため、様々な運用ルールがありますので以下の説明をまずはご覧いただいたのちに3カラム化していただければ幸いです。(もちろん3カラム化はマストではありません)

3カラム表示時の構造について

3カラム表示時は以下のような構造になります。

f:id:ganapati55:20171024184938j:plain

1400pxのサイドバーエリアの上にメインコンテンツエリアが乗っかっています。

2カラム表示時の構造について

3カラム化したうえでの2カラム表示時の構造は以下の通りです。(3カラム化のカスタマイズを適用しない場合は他のテーマと同じような構造で自然体でご利用いただけます)

f:id:ganapati55:20171024185031j:plain

ポイントは左サイドバー内のものが右のものの下に表示されるということです。

1カラム表示時の構造について

3カラム化したうえでの1カラム表示時の構造は以下の通りです。(3カラム化のカスタマイズを適用しない場合は他のテーマと同じような構造で自然体でご利用いただけます)

f:id:ganapati55:20171024185046j:plain

ポイントは左サイドバー内のものがスマートフォン等では表示されないということです。(設定は変更できます)

デモサイトでの設定事例

参考までにデモサイトでの設定事例をご紹介します。

サイドバー設定画面

f:id:ganapati55:20171024185100j:plain

※ファーストリリース時のものです。

実際の3カラム表示画面との対応

f:id:ganapati55:20171024185131j:plain

使いこなしのポイント

Focusを3カラムで使いこなすためのポイントをご案内します。

左サイドバー内の表示コンテンツについて

デフォルトの設定のままだと2カラム時には下側に、スマホ表示クラスまで画面幅が狭まると見えなくなります。

なので、サイト内の回遊を促すものや重要なコンテンツは左側には置かないのが賢明です。

例えば、目次とかちょっとした広告などであれば1カラム表示では非表示でもそんなに問題ありませんし、検索窓は1カラム時は別途上部に表示されますので左サイドに設置しても全く問題ありません。

表示が上手く振り分けられない時

サイドバー内に置くモジュールで、class指定のあるHTMLモジュールを置くと上下に接するモジュールと重なるなどの表示崩れを起こす場合があります。この原因は3カラム化やサイドバー内タブメニュー化を実現するためのJavaScriptにあります。

対処法としては - サイドバー内のタブメニュー化を諦める - 空のHTMLモジュールをもう一つ挟んでみる - CSSで直接回避するコードを入れる - 上下の順番やモジュールを組み直してみる - 原因となるモジュールをサイドバー内の一番下に設置する

などがあります。

左サイドバー内の表示コンテンツを1カラムでも消さない方法

左サイドバー内に設置したコンテンツを1カラムにしても消さない方法としては以下のコードをデザインCSS内から取り除くことです。

/* スマホ1カラムで左サイドは表示しない */
/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 767px) {
.hatena-module:nth-child(2n) {
  display:none;
}
}