FOCUS

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

はてなブログテーマ”Focus”について

テーマのコンセプト

"Focus"は美しい3カラムデザインのブログを実現したテーマです。

1400px以上の広い画面幅で3カラム、それ以下では2カラム‐1カラムと変化するレスポンシブウェブデザインを採用しています。メインコンテンツを読みやすいように細心の注意を払ってデザインしました。

またブログサイトでよく見かける多くの要素(アセット)を予め用意しました。記述サンプルからコピペしてテキストを入れ替えていただくだけですぐにご使用いただけます。

// Focusの使用を推奨する人 //

  • もともと3カラムブログを運営している人
  • 多くの情報をファーストビュー内に表示させたい人
  • 幅の広い画面を有効活用したい人(PCからのアクセスが多い人)
  • 細かなCSSカスタマイズが面倒な人

なお、基本的な枠組みはシンプルで素晴らしいテーマ"SOHO"を利用させていただきました。
グローバルナビゲーションやシェアボタンの設定は"SOHO"の方法を流用いただきます。

デモサイトリンク/製作者サイト

テーマアセット

見出しなど各種要素(アセット)の確認はこちらから


Focusで使用される各種要素(アセット)一覧 - Focus

注意事項

  • テーマを適用しただけでは3カラム表示になりません。2カラム表示になります。(それでも十分使えます)
  • 3カラム表示は表示幅が1400ピクセル以上の時に適用されます。(カスタマイズ可能です)
  • はてなブログの構造上、かなり強引に3カラム表示させています。そのためにJavaScriptが使用されていますが、他のJavaScriptと相性が悪い場合表示崩れが起きる場合があります。
  • サイドバー内でスクロールに合わせて追尾する目次を用意していますが、上記の理由で追尾しません。3カラム化しなければ追尾します。
  • やはり上記理由ではてなブログの純正プロフィールモジュールの表示が崩れることがあります。その場合はFocusで準備しているオリジナルプロフィール用HTMLをご利用ください。

3カラム化の手順

  1. テーマをご自分のブログにインストールします。
  2. 詳細設定 > headに要素を追加 部分に必要なコードがあるか確認します。
  3. カスタム >フッタHTMLに「⑥-6 3カラム左右振り分け表示のためのJS」を記入(コピペ)します。
  4. カスタム > カスタマイズCSS に カスタマイズ用のCSS「3カラム化(左右サイドバー)」を記入(コピペ)します。
  5. サイドバー内のモジュールを右⇒左⇒右⇒左の順番で上から交互に配置します。(適度なモジュールがないときは中身が空のHTMLモジュールを配置でOK)
  6. 最後に正しく表示されているか確認します。(モジュールの順番が微妙に反映されないときはHTMLモジュールを追加すると機能する場合があります)

フィードバック・質問

デモサイト内のフィードバックページにコメントください。

ただ、GanapatiはCSSもHTMLもしっかり勉強したことはないので答えられないときはご容赦ください。


その他

  • Focusを一緒に機能アップさせてくれる「コードに強い方」いらっしゃったら是非ご連絡ください。
  • もし気に入っていただけたら製作者のブログもご紹介いただけると嬉しいです。

リリースログ

2017年10月23日 ファーストリリース