FOCUS

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

Focusで使用しているボタンとバルーンの使い方

Focusに標準で設定してあるボタン及びバルーンの使い方とカスタマイズ方法をご紹介します。必要に応じて種類を増やすとブログが華やかになります。

Focusで使用している主なカラーコード一覧

Focusで使用しているメインカラー・アクセントカラーなどのコード一覧です。該当部分を入れ替えるかデザインCSSで上書きすることでサイトの雰囲気を変えることができます。

引用などで使えるBOXデザインの使い方

Focusテーマに設定してある様々なBox表示を活用する方法について説明しています。うまく活用してブログ本文にリズムを生み出しましょう!

カテゴリアーカイブ(記事一覧)ページの見出し表示をCSSで変更してみました。

カテゴリアーカイブページのトップに表示される見出しがあまりにシンプルで寂しい感じがしたのでカスタマイズしてみました。読者目線でもカスタマイズしたほうが親切です。

サイドバー内のはてなモジュールをタブ化して表示する方法

はてなブログにおいてサイドバー内に配置するモジュールをタブ化して重ねて表示する方法をご紹介します。サイドバー内がすっきりと表示されます。

投稿記事内で表示する目次の設定方法

はてなブログテーマFocusで使用している記事内目次の設定方法についてご紹介します。カスタマイズ方法なども。

サイドバー内で表示する目次の設定方法

サイドバー内に(追尾型)目次を表示する方法です。

はてなブログでオリジナルのプロフィールモジュールを設定する方法について

はてなブログにオリジナルのプロフィールを設定する方法。

3カラム表示に必要な設定について

Focusで3カラム表示を実現するまでの手順をご紹介します。

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

Focusを使いこなすための3カラム表示の考え方について 3カラム表示時の構造について 2カラム表示時の構造について 1カラム表示時の構造について デモサイトでの設定事例 サイドバー設定画面 実際の3カラム表示画面との対応 使いこなしのポイント 左サイドバ…

Focusでグローバルナビを追加する方法

グローバルナビを設置する方法をご紹介します。

Focusで設定画面からhead要素に追加するコード

head要素に追加するコードは2つだけFocusでhead要素に必要なコードは2つだけです。 アイコンフォントを表示するためのFontawesome 一部の要素を動かすためのjqueryライブラリ 既に入れてある人も結構いるかもしれません。ダブる必要はありませんので、すでに…

フッタHTML内に記入するコード(ファーストリリース時)

Focusの特徴である3カラムレイアウトの実現にはJavaScriptなどをフッタ内に記述する必要があります。ファーストリリース時のコードを記載します。

カスタマイズ用デザインCSS(ファーストリリース時)

Focusを便利に使うためのCSSはデザインCSSにも多く入っています。デモサイトで使用しているCSSをご紹介します。

テーマのコード(ファーストリリース時)

Focusで使用されているテーマコードをご紹介します。

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

Focusで使用される各種要素(アセット)一覧をご紹介します。テーマの設定が完了したら記事作成に集中できるように多くの要素を事前に準備しています。

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

はてなブログテーマFocusについての説明です。テーマのコンセプトや注意事項、3カラム化の手順などの簡単な説明をしています。