テーマのコンセプト
"Focus"は美しい3カラムデザインのブログを実現したテーマです。
1400px以上の広い画面幅で3カラム、それ以下では2カラム‐1カラムと変化するレスポンシブウェブデザインを採用しています。メインコンテンツを読みやすいように細心の注意を払ってデザインしました。
またブログサイトでよく見かける多くの要素(アセット)を予め用意しました。記述サンプルからコピペしてテキストを入れ替えていただくだけですぐにご使用いただけます。
書くことに集中できる、読むことに集中できるテーマ、それが"Focus"です。
// Focusの使用を推奨する人 //
- もともと3カラムブログを運営している人
- 多くの情報をファーストビュー内に表示させたい人
- 幅の広い画面を有効活用したい人(PCからのアクセスが多い人)
- 細かなCSSカスタマイズが面倒な人
なお、基本的な枠組みはシンプルで素晴らしいテーマ"SOHO"を利用させていただきました。
グローバルナビゲーションやシェアボタンの設定は"SOHO"の方法を流用いただきます。
デモサイトリンク/製作者サイト
デモサイト
※2017年10月23日公開時、一部の開発途上の時のコードを間違ってデモサイトに適用していたためスマホ表示がおかしくなっていました。現在修正済み。
2カラムの見本サイト
http://insight.lifemake.design/
注意事項
- テーマを適用しただけでは3カラム表示になりません。2カラム表示になります。(それでも十分使えます)
- 3カラム表示は表示幅が1400ピクセル以上の時に適用されます。(カスタマイズ可能です)
- はてなブログの構造上、かなり強引に3カラム表示させています。そのためにJavaScriptが使用されていますが、他のJavaScriptと相性が悪い場合表示崩れが起きる場合があります。
- サイドバー内でスクロールに合わせて追尾する目次を用意していますが、上記の理由で追尾しません。3カラム化しなければ追尾します。
- やはり上記理由ではてなブログの純正プロフィールモジュールの表示が崩れることがあります。その場合はFocusで準備しているオリジナルプロフィール用HTMLをご利用ください。
- 1カラムレイアウトになったときに3カラム時に左側のサイドバー内に存在したモジュールは非表示になります。(縦長になるのを防ぐため)
3カラム化の手順
- テーマをご自分のブログにインストールします。
- 詳細設定 > headに要素を追加 部分に必要なコードがあるか確認します。
- カスタム >フッタHTMLに「⑥-6 3カラム左右振り分け表示のためのJS」を記入(コピペ)します。
- カスタム > カスタマイズCSS に カスタマイズ用のCSS「3カラム化(左右サイドバー)」を記入(コピペ)します。
- サイドバー内のモジュールを右⇒左⇒右⇒左の順番で上から交互に配置します。(適度なモジュールがないときは中身が空のHTMLモジュールを配置でOK)
- 最後に正しく表示されているか確認します。(モジュールの順番が微妙に反映されないときはHTMLモジュールを追加すると機能する場合があります)
フィードバック・質問
デモサイト内のフィードバックページにコメントください。
ただ、GanapatiはCSSもHTMLもしっかり勉強したことはないので答えられないときはご容赦ください。
その他
- Focusを一緒に機能アップさせてくれる「コードに強い方」いらっしゃったら是非ご連絡ください。
- もし気に入っていただけたら製作者のブログもご紹介いただけると嬉しいです。
リリースログ
2018年3月1日 HTTPS対応(テーマのCSS部分)
2017年10月23日 ファーストリリース
※随時更新します。テーマ外のデザインCSSやフッタHTMLでの変更も考えられるので、デモサイトもしくは製作者のブログに読者登録いただけますと幸いです。
既知の問題
- 3カラムレイアウト表示時、グローバルメニューにおいて下層のメニューのHoverが2項目目途中で切れる問題。(※main部分がメニューより前面に存在しているため)
- サイドバー内の表示崩れ(サイドバー内のタブメニューを諦めれば崩れないはず)
- サイドバー内の追尾目次が追尾しない問題(3カラムにするためのJSがクラスなどを入れ替えるため目次追尾のためのJSが上手く働かない)
※解決できる方からのご連絡をお待ちしております。(*- -)(*_ _)ペコリ