【Hugo】ブログにサイドバーを追加/レスポンシブデザイン

過去にブログを Hugo で作っていて、テーマはもともとサイドバーがついていないものだったのですが、

サイドバーが欲しかったので付け加えてみました。

サイドバーの構造

そもそもサイドバーってどうやってメインのコンテンツと並立しているのかと。

ふつうに後ろに書くと後ろに続いてしまうか、変な回り込みを起こしてレイアウトが崩れてしまいます。

そこで調べていたところ、こちらのサイトが参考になりました。

→ HTML+CSSによるウェブページ制作例

どうやら CSS の float で浮かせてしまえばいいようです。

最終的にはこんな感じになればいいのかな。

  関連記事【Hugo】ブログの記事ページのサイドバーに固定目次を追加

コーディング

layouts/partials/custom/sidebar.htmlを作成。

とりあえずプロフィールだけ載せます。

sidebar.html
1
<div class="sidebar">
2
    <div class="profile">
3
        <h4 class="sidebar-header">プロフィール</h4>
4
        <img class="avatar-image" src="/images/avatar.png" alt="みどりみち">
5
        <a href="{{ .Site.BaseURL }}about">
6
            <h4 class="to-profile">みどり　みち</h4>
7
        </a>
8
        <p>駆け出しソフトウェアエンジニア。</p>
9
        <p>デザインに凝りがち。</p>
10
        <p>歌うことが好きで、声オタク。</p>
11
    </div>
12
</div>

{{ .Site.BaseURL }}というのが、ドメインまでの URL で、最後の/も含みます。

この HTML ファイルを、layouts/partials/post.htmlの中で呼び出します。

post.html
1
<main class="main single" id="main">
2
    <div class="main-inner">
3
        ...
4
    </div>
5
    {{ partial "custom/sidebar.html" . }}
6
</main>

CSS のほうでは、機能的にはfloatを指定するぐらいで大丈夫です。

/assets/scss/_custom/custom.scss　または　/static/css/custom.css
1
.main-inner {
2
    float: left;
3
    padding-right: 3em;
4
    padding-bottom: 3em;
5
}
6
　
7
.sidebar {
8
    float: right;
9
}

sidebarはfloat: left;でもいいかなと思ったのですが、

main-innerの横幅によってがくがくと位置が変わるのが気に食わなかったので、rightにしています。笑

そうすると拡大縮小のさいに変な回り込みをしたり離れすぎたりするという問題が発生しましたので、

レスポンシブデザインが必要になりました。

  関連記事【初心者向け】サイトのカスタマイズ方法

レスポンシブデザイン

といっても意外とやることは簡単で、 CSS のほうに例えばこんなふうに書けば適用されます。

1
@media (max-width: 1199px) {
2
    /* 画面の横幅が1199px以下の処理 */
3
}
4
　
5
@media (min-width: 1200px) {
6
    /* 画面の横幅が1200px以上の処理 */
7
}

HTML のheadタグ内に

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">

などと書く必要があるのですが、

Hugo のテーマによっては最初から記述のあるのもあります。

それからはブラウザのデベロッパーツールで見ながらちまちまと CSS をいじれば大丈夫です！

他のサイトからデベロッパーツールを開いて、そのときの CSS を見ても

レスポンシブ対応であれば@media ...と書かれているところがあると思うので、

自分の真似したいサイトをそうやって参考にすることもできますね。

どういうときにサイドバーが下に移るんだろう、とか。

custom.scss
1
@media (max-width: 1199px) {
2
    #main {
3
        width: 90%;
4
    }
5
    .main {
6
        padding: 2em 0 15em
7
    }
8
    .container {
9
        width: 100% !important;
10
    }
11
    .main-inner {
12
        width: 100% !important;
13
        padding-right: 0;
14
    }
15
    .sidebar {
16
        float: left;
17
        width: 90%;
18
    }
19
}
20
　
21
@media (min-width: 1200px) {
22
    #main {
23
        width: 1100px
24
    }
25
}

  関連記事【Hugo】ブログにマウスオーバーでふわっと表示する吹き出しを追加

サイドバーの実装と、レスポンシブ対応について書きましたが、

意外とひとつの記事にまとまるぐらいやること自体は簡単です。

書くのは簡単ですが、 CSS をああでもないこうでもないといじるのが一番時間がかかるんじゃないかな。笑

お読みいただきありがとうございました～

ではまた