ひかえめなサイトのために

Pico（このサイト）のテンプレートをちょっと変えたい

横幅を少し変えたい

index.twigの、
<body{% if config.theme_config.widescreen %} class="widescreen"{% endif %}> これの意味がわからなかったのだが、

ChatGPT：
これはTwigテンプレートエンジンの構文です。

TwigはPHPでよく使われるテンプレートエンジンで、PHPコードをHTMLに埋め込む代わりに、より読みやすい構文を提供します。

このコードは、config.theme_config.widescreenがtrueの場合、bodyタグにwidescreenクラスを追加します。

• {% if config.theme_config.widescreen %}: これはTwigのifステートメントです。config.theme_config.widescreenがtrueの場合、ifステートメントの中身が実行されます。

• class="widescreen": これはbodyタグにwidescreenクラスを追加します。

• {% endif %}: これはifステートメントの終了を示します。

つまり、config.theme_config.widescreenがtrueの場合、bodyタグにwidescreenクラスが追加されます。これは通常、CSSで定義された.widescreenクラスのスタイルがbodyタグに適用されることを意味します。

で、CSSにこれがあって。

.container {
    max-width: 48em;
    padding: 0 0.5em;
    margin: 0 auto;
}
.widescreen .container { max-width: 72em; }

config.ymlにこれがある。

theme_config:                       # Additional theme-specific config
    widescreen: false               # Default theme: Use more horizontal space (i.e. make the site container wider)

このfalseをtrueに書き換えると、.widescreenのmax-width: 72em;が効くようになる。私はtrueに書き換えたのち、この幅を60emにした。

ヘッダーとメインとフッター

とりあえず、CSSの基礎的な設定らしきところの意味がわからなかったのでChatGPTにきいて、理解を確認してみた。

body { display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }
#header, #footer { flex: 0 0 auto; }

この場合、ヘッダーとフッターはコンテナのサイズが小さくなっても縮小されない、メインはヘッダーとフッターが使った残りのスペースを占める（たとえ中身がなくても）、ということであっていますか？

はい、あなたの説明は正しいです。

• body { display: flex; flex-direction: column; }: これにより、bodyエレメントがflexコンテナになり、その子要素（#header, #main, #footer）が列方向（上から下へ）に並びます。

• #main { flex: 1 0 auto; }: これにより、#mainエレメントは、残りの空間を占めます。つまり、#headerと#footerの高さを除いた残りの空間を占めます。たとえ#mainエレメントの中身がなくても、その高さは残りの空間全体に広がります。

• #header, #footer { flex: 0 0 auto; }: これにより、#headerと#footerエレメントは、それぞれのコンテンツの高さに応じてサイズが変わります。コンテナのサイズが変わっても、その高さは変わりません。

つまり、#headerと#footerの高さは、それぞれのコンテンツに応じて自動的に調整され、#mainエレメントは、それらの間に残されたスペースを占めます。これにより、#mainエレメントが残りの空間全体に広がり、#headerと#footerの高さが固定されることが保証されます。

サイドバーを作りたい

index.twigの他に、side.twigを用意した。そしてindex.twigの

<div id="nav" role="navigation" tabindex="-1">
    <ul>
        {% for page in pages(depthOffset=-1) if page.title and not page.hidden %}
            <li{% if page.id == current_page.id %} class="active"{% endif %}>
                <a href="{{ page.url }}">{{ page.title }}</a>
            </li>
        {% endfor %}
    </ul>
</div>

この部分をまるっと移した。そしてindex.twigのメイン部分をこのように書き換え、CSSも追加した。もちろんChatGPTに助けてもらった。

index.twig:

<div id="main" role="main">
    <div class="container">
    <div id="content">
        {{ content }}
    </div>
    <div id="sidebar">
        {% include 'side.twig' %}
    </div>
</div>
</div>

CSS:

#main .container {
    display: flex;
}
#content {
    flex: 1;
}
#sidebar {
    width: 14em;
    background-color: #E2EFF7;
    padding-left: 5px;
    margin-left: 2em;
}

@media (max-width: 767px) {
  #main .container {
      flex-direction: column;
      padding-top: 0em;
  }
  #sidebar {
      width: 95%;
      margin: 0 auto;
  }
}

display: flex;で横並びにしてあるから、スマホ用にはこれを解除すればいいんだろうと思ったんですが、そもそも解除ではなく縦並びを指定するとか。
bodyに指定してあるものそのままだった。

これで、PCではコンテンツの右側にサイドバーが表示され、スマホではコンテンツの下にサイドバーが表示される。

で、このサイトはコードをいっぱい表示してるので、折り返して表示するように一行追加した。

pre { white-space: pre-wrap ; }

これやらないと横スクロールバーが出てきて、サイドバーがどっかいっちゃうんです、、

ハンバーガーメニューの削除

テーマ内、jsフォルダ内のpico.jsの、// responsive menuからmain();の上までを削除。
これだけでいちおうハンバーガーメニューは出てこなくなります。

contentフォルダ直下とサブディレクトリのindexを自動リンクでメニューに表示するのは、まあ、ラクなのでそのまま使うことにしました。あらかた必要なページが出来上がってから、ファイル名を変えて表示順を調整すればいいかなと。
あるいは、必要なページができているなら、そこでサイドバー用twigにhtmlタグでリンク貼ってもいいわけだし。

あとは、メニューの文字が右寄りになったりするのを調整してあげればよい。

余談：CSSのどれがどこに効いているのか調べる方法

昔、無料のSeesaaブログでスタイルシートのカスタマイズをしたときのこと。CSSにあまり詳しくなかったので（今もだけど）、どのコードがどこに影響を及ぼしているのかがわからなくて、それを調べる方法として見つけたのが「赤枠線をつける方法」。
ようするに、

border: 2px solid red;

これを付け足せばその要素に赤い枠線がつくので一目瞭然！ということ。

今回、おおざっぱなことはわかっても、細かいところが「これ、どこだ？」なので、この方法で調べながら調整していこうと思うのよね。

今のところ、メニューの順番がちょっと変だけど、落ち着いたら直します^^;