FOCUS

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

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

f:id:ganapati55:20171011145040j:plain

Focusで3カラム表示を実現するまでの手順

以下手順を紹介します。

なお、以下の記事で構造をなんとなく理解しておくと作業が捗ります。

focus3.hatenablog.com

また、以下の手順を踏まなければ3カラム表示はされません。レスポンシブ2カラムサイトになります。

① まずはテーマストアよりテーマをインストール

当たり前ですがテーマをインストールしてください。

Focus - テーマ ストア

※デザインCSSに記載されていたコードが消えますので、必要に応じて転記しておくことをお勧めします。

② head要素にコードを2つ記入

必須ではありませんが、テーマ全体として機能させるためにコピペしておくと良いです。

※参考

focus3.hatenablog.com

③ フッタHTMLにJavaScriptを記入

3カラム表示に必要なコードは以下の通りです。

<!--⑥-6 3カラム左右振り分け表示のためのJS-->
<script>
    (function (a) {
        a(function () {
            var b = a("#box2-inner"),
                c = a(".hatena-module:nth-child(2n+1)", b).removeClass("hatena-module").css("marginBottom", "1em");
            b = a(".hatena-module:nth-child(2n)", b).removeClass("hatena-module").css("marginBottom", "1.5em");
            c.wrapAll('<div class="hatena-module"></div>');
            b.wrapAll('<div class="hatena-module"></div>')
        })
    })(jQuery);
</script>

このコード自体ではサイドバー内の左右振り分けにはならないのですが、このコードがあることによって、モジュール間のスキマがなくなり、見た目が自然になります。

そのかわり、各モジュールが通常のはてなブログのモジュールの持つclassと少し変わってくるため、たまに配置やデザインでいうことを聞いてくれないモジュールが発生します。CSSに詳しい人は多分自己解決できるレベルでしょうが・・・。

なお、面倒な人はこちらで用意した他の機能も含めたコードを全部コピペしてください。

focus3.hatenablog.com

④ 左右振り分け用のCSSを設定

カスタム > カスタマイズCSS に カスタマイズ用のCSS「3カラム化(左右サイドバー)」を記入(コピペ)します。

/*** 3カラム化(左右サイドバー) ***/
/* Media Queries -wide */
@media (min-width: 1400px) {

#container {
  width: 100%;
}
#content-inner {
  position:relative;
}
#container #content-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 1520px;
    display: block;
}
#wrapper {
  margin-left: 350px;
 z-index: 100;
  position: relative;
}

#main {
    width: calc(100% - 350px);
    float: left;
}

#box2 {
  width:100%;
  max-width:1520px;
  position: absolute;
  left: 0;
  right: 0;
}
.hatena-module {
  width: 300px;
}

/* はてなモジュール_奇数(左) */
.hatena-module:nth-child(2n + 1) {
  margin-left:10px;
  float: right;
  clear: right;
}

/* はてなモジュール_偶数(右) */
.hatena-module:nth-child(2n) {
  margin-left:10px;
  margin-right: auto;
}

/* パン屑リスト中央へ */
#top-box {
    text-align: center;
    }
    
}
/* スマホ1カラムで左サイドは表示しない */
/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 767px) {
.hatena-module:nth-child(2n) {
  display:none;
}
}

このCSSによって1400px以上の画面幅で3カラム表示に切り替わり、サイドバー内のモジュールが右⇒左⇒右⇒左の順番で設定した上から交互に配置されます。

このあたりの構造は前回の投稿でご紹介した通りです。

⑤ サイドバーに表示させるモジュールを設置

前回の投稿を参考にしながらサイドバー内のモジュールを順序だてて並べ替えてください。

並べ替えたら最後に正しく表示されているか確認します。(モジュールの順番が微妙に反映されないときはHTMLモジュールを追加すると機能する場合があります)

その他のカスタマイズ

左サイドバー内のモジュールを2カラム以下で先に表示させたいとき

CSS内の以下の部分から「right」と「left」を入れ替えてください。

/* はてなモジュール_奇数(左) */
.hatena-module:nth-child(2n + 1) {
  margin-left:10px;
  float: right;
  clear: right;
}

/* はてなモジュール_偶数(右) */
.hatena-module:nth-child(2n) {
  margin-left:10px;
  margin-right: auto;
}

コードを入れ替えるとモジュールが左右逆になりますので、再度モジュールの配置を調整してください。そうすれば当初の配置でありながら左側のものが先に表示されるようになります。

スマホ表示時に片方のサイドバーモジュールを消したくない場合

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

上記コードをデザインCSS内から削除してください。

サイドバー表示でできないこと

サイドバー内のモジュール配置順(つまり上からの順番)で2カラム時に表示させたいという方もいるかもしれませんが、基本的にできないと思ってください。

唯一できる方法としてはフッタHTMLに入力したJavaScriptコードを削除することです。

そうすることで2カラム時にはサイドバー設定と同じ順序で表示されるようになりますが、3カラム表示時に上手くモジュール内コンテンツの高さを一定にしないと隙間が空いてしまいます。