QooQからHello World! へお引越し #01 レスポンシブルレイアウトの調整

Blogger の カスタマイズにあたり、QooQからHello World への引っ越し、スタートしました。えいや、で、引っ越ししちゃいましたが、まずは、微妙なレイアウトが気になるので、そこを調整します。

Hello World!テンプレート作者のふでたまごさんのページはこちら

気になってるレイアウト

フルスクリーンで左よりになる

横1920のフルスクリーンの全画面だと、ちょっと左寄りになってます。本文エリアのMAXサイズを広げる、サイドバーは右よせにする、などの対応をしました。

パンくずリストでのスクロールバー

長いタイトルだと、パンくずエリアにスクロールバーが出てタイトルと重なってしまう。スクロールバーをやめて、折り返しにし、ヘッダーとの間のマージン調整をしました。そもそも、タイトルはすぐその下にでてるのだから、その表示もやめる。これをやめると、そもそも折り返しになんてなるようなラベルもなくなる。

PCハーフサイズ時で右側はみだし

これも、幅関係。記事一覧だと収まってましたが、個別記事の場合で画面の半分サイズぐらいであわないところがありました。

修正箇所

幅関係設定ｗをｍ見直し。

オリジナルでは、width 設定部分にvw単位を使われていました。私、この単位での設定慣れてないので、てこずってしまいました。結局、あきらめて%とmax設定ベースに修正しました。

ブレークポイントをBootstrapっぽくしておく

オリジナルでは、@media ブレークポイントが、1024 / 768 / 560 これを、992 / 768 / 576　あと、必要に応じて、1200，1400を使うことにする。

変更したコード周辺

ちょこちょこ見ながら修正したので、全箇所を網羅しているか自信はないですが、変更したあたりの引用をのせておきます。まあ、これは途中経過なので、このままコピペはおススメしません。

 
    /*-----------------------------------------------------------------------------
      レスポンシブル切り替えサイズ　bootstrap の Breakpoint 値ベースに変更
      xs: 0-575      sm: 576-767  md: 768-991
      lg: 992-1199 　xl: 1200-1399  xxl: 1400-
      オリジナル  1024 / 768 / 560 は 992 / 768 / 576 に変更
      1200, 1400 は、必要な場合追加していく
    ----------------------------------------------------------------------------- */
    /* ----------------------------------------------------------------------------
    メイン
    ---------------------------------------------------------------------------- */
    
    /* メインの背景色 */
    .main-wrapper {
      position: relative;
      background: var(--background-color);
      padding: 40px 10%;
      z-index: 1;
    }
    
    /* コンテナ */
    .container {
      display: flex;
    }
 
    /* メイン */
    main {
      width: 63%;
      max-width: 1200px;
      margin-right: 30px;
    }
 
    /* レスポンシブ（PC半分） */
    @media (max-width: 1200px) {
      main {
        width: 67%;
      }
      .main-wrapper {
        padding: 40px 5%;
      }
    }
 
    /* レスポンシブ（タブレット大縦） */
    @media (max-width: 992px) {
      main {
        max-width: 650px;
      }
      .main-wrapper {
        padding: 40px 5%;
      }
    }
 
    /* レスポンシブ（スマホ縦） */
    @media (max-width: 576px) {
      .main-wrapper {
        padding: 30px 5px;
      }
      .container {
        flex-direction: column;
        margin: 0 10px 10px;
      }
      main {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
      }
    }
    /* ----------------------------------------------------------------------------
    サイドバー
    ---------------------------------------------------------------------------- */
    aside {
      width: 33%;
      margin: 0 0 0 auto;
    }
 
    .sidebar {
      height: 100%;
      width: 100%;
    }
    
    .sidebar a {
      text-decoration: none;
    }
 
    .sidebar a:hover {
      opacity: 0.6;
    }
 
    /* レスポンシブ（スマホ縦） */
    @media (max-width: 576px) {
      .sidebar {
        height: auto;
        width: 100%;
        margin-top: 30px;
      }
    }

パンくずリストに表示されてたタイトルを削除する部分

 
                  <!-- 個別記事ページのパンくずリスト -->
                  <b:loop values='data:posts' var='post'>
                    <b:if cond='data:post.labels'>
                      <div class='breadcrumbs' itemscope='itemscope' itemtype='http://schema.org/BreadcrumbList'>
                        <span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'><a expr:href='data:blog.homepageUrl' itemprop='item'><span itemprop='name'>ホーム</span></a>
                          <meta content='1' itemprop='position'/></span>
                        <b:loop values='data:post.labels' var='label'>
                          <i class='fa fa-chevron-right pause-icon'/> <span itemprop='itemListElement' itemscope='itemscope' itemtype='http://schema.org/ListItem'><a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' itemprop='item'>
                              <span itemprop='name'>
                                <data:label.name/></span></a>
                            <meta content='2' itemprop='position'/></span>
                        </b:loop>
                        <!-- パンくずに表示されていたタイトル
                        <i class='fa fa-chevron-right pause-icon'/> <span itemprop='name'>
                          <data:post.title/></span>
                        -->
                      </div>
                      <b:else/>