【当サイトではアフィリエイト広告等を利用しています】

ジンドゥー（jimdo）の独自レイアウト【レスポンシブデザイン】

2020/09/25

 〜独自レイアウト第3弾〜

独自レイアウト3つ目の記事で早くもレスポンシブデザインに挑戦です。第1弾と第2弾もご関心がありましたら見てみてくださいね。

レスポンシブデザインとは？

現代、スマホを用いての閲覧が半数を超えているという調査結果もあるくらいですので、あらゆる端末で最適な表示を目指すレスポンシブデザインはもはや基本となってきています。PC版での表示とスマホ版での表示を調整して、ユーザーに見やすく扱いやすいデザインにすることが目標です。

PC版では以下のような表示から…

PC版のトップ画面の表示

スマホ版では次のようにメニューやその他の表示を調整することができます。最近ではほとんどのウェブサイトがこのような仕様になっています。

⬇⬇⬇

スマホ版のトップ画面の表示

レスポンシブデザインに対応するための変更点

・コンテンツ全体をフレキシブルに変化するように調整する

・サイドバーの位置も端末によって変化するようにする

・モバイル用のメニューを作る(ハンバーガーメニュー）

大体これくらいの変更を加えると良さそうです。今回紹介するコードはサイドバー位置を常に下に持ってきて基本的にコンテンツが全画面になるような設定にしています。

ではHTMLコードの変更点から見ていきます。

HTMLコード

HTMLコードとしてはモバイルナビゲーション用のコードを追加します。赤字の部分が追加したコードで、内容も多少変更しています。

<div id="container">
    <div id="header">
        <div class="top-image">
            <a href="/"><img src="top.png" alt="" /></a>
        </div>
        <div id="nav-top">
            <div id="toggle">
                <span>.</span> <span>.</span> <span>.</span>
            </div>
            <nav id="header-nav">
                <var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>
            </nav>
        </div>
    </div>
    <div id="content">
        <var>content</var>
    </div>
    <div id="sidebar">
        <var>sidebar</var>
    </div>
    <div id="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>
</div>

CSSコードの変更

CSSがとにかく長くなってしまいますね。デフォルトの状態からLayoutの下部分を大幅に変更していきます。

/*  Layout
----------------------------------------------- */
body {
    background:#fff;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container
{
    margin:0 auto;
    max-width:980px;
    background:#fff;
}
#header
{
    width:100%;
    clear: both;
    display:flex;
    justify-content: space-around;
    padding: 0;
    verflow: hidden;
}
#header .top-image
{  
    padding:5px;
}
#content
{
    margin:0 auto;
    padding:0 10px;
}
/*ナビゲーションレイアウト PC用 */
@media screen and (min-width: 769px) {
#nav-top #toggle {
    display: none;
  }
  nav#header-nav ul li a:link,
  nav#header-nav ul li a:visited {
    color: #666666 !important;
  }
  nav {
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding: 20px 5px;
    align-items: flex-start;
  }
  nav ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  nav ul li {
    position: relative;
    float: left;
  }
  nav ul li:not(:first-child) {
    border-left: none;
  }
  nav ul li a {
    display: inline-block;
    padding: 5px 20px;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 16px;
  }
  nav ul li a:link,
  nav ul li a:visited {
    text-decoration: none;
  }
  nav ul li a:hover {
    text-decoration: underline;
  }
  nav ul li:hover > ul {
    display: block;
  }
  nav ul ul {
    position: absolute;
    top: 100%;
    display: none;
  }
  nav ul ul li {
    float: none;
    margin: 0;
    width: 200px;
    background: rgba(255, 255, 255,.9);
  }
  nav ul ul ul {
    position: absolute;
    left: 100%;
  }
}
/*ナビゲーションレイアウト スマホ用*/
@media screen and (max-width: 768px) {
#header{
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
  }
  #nav-top {
    margin: 0;
  }
  #nav-top nav {
    position: absolute;
    top: -150vh;
    left: 0;
    padding: 60px 0 0 0;
    z-index: 100;
    overflow: auto;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh-50px);
    text-align: left;
    transition: .3s ease-in-out;
    background: rgba(255,255,255,.95);
  }
  #nav-top nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #nav-top ul li {
    line-height: 1.5;
  }
  #nav-top ul li a {
    display: block;
    color: #666666 !important;
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    padding: 10px 0 10px 50px;
  }
  #nav-top ul li ul li a {
    padding: 10px 0 10px 60px;
  }
  #nav-top ul li ul li ul li a {
    padding: 10px 0 10px 70px;
  }

/* クリック時 */
  .openNav nav {
    transform: translateY(150vh);
  }
  #nav-top.openNav nav {
    background: rgba(255,255,255,.95);
  }
  .openNav #toggle span:nth-child(1) {
    top: 11px;
    border-color: #666666;
    transform: rotate(-45deg);
  }
  .openNav #toggle span:nth-child(2),
  .openNav #toggle span:nth-child(3) {
    top: 11px;
    border-color: #666666;
    transform: rotate(45deg);
  }
/* トグルアイコン */
  #toggle {
    position: absolute;
    top: 35px;
    left: 20px;
    z-index: 200;
    width: 25px;
    height: 20px;
    cursor: pointer;
  }
  #toggle div {
    position: relative;
  }
  #toggle span {
    position: absolute;
    display: block;
    width: 100%;
    border-bottom: solid 3px #666666;
    transition: .38s ease-in-out;
  }
  #toggle span:nth-child(1) {
    top: 0;
  }
 #toggle span:nth-child(2) {
    top: 8px;
  }
  #toggle span:nth-child(3) {
    top: 16px;
  }
/* スマホ用コンテンツ設定 */
#container
{
 overflow: hidden;
 margin:0
 width: 100%;
 padding: 5px
}
#content
{
 clear: both;
 margin:0 auto;
 width: 100%;
 padding: 20px 0px 10px 0px;
}
#sideber
{
  margin:0 auto;
  width: 100%;
}
#footer
{
 clear: both;
 margin:0 auto;
 width: 100%;
 padding: 20px 0px 5px 0px;
 overflow: hidden;
}
}

細かな部分までは説明がしきれないですが、一応解説をしてみます。

PC画面で#container部分をmax-widthで記載することで、PC画面の幅に合わせてコンテンツが丁度合うようになります。

#header部分には「flex」の便利なコードがありまして、横並びで等間隔にメインのロゴとメニューが並ぶように調整しています。ナビゲーションメニューは2階層目以降が下に並んでいくようなコードとなっています。

そしてスマホ用のナビゲーション等のために@media screen and (max-width: 768px) という記載をして横幅768px以下になるとスマホ用のメニューが出現し、PC用のメニューが消えるように指示しています。

さらにスマホ専用のナビゲーションの設定を行い、トグルメニューの記載が入ってくるのでなかなかの長文になるわけです。スマホ用のコンテンツは全体的に画面最大幅に来るように調整します。

ヘッダー編集

「管理メニュー」⇒「基本設定」⇒「ヘッダー編集」からhead部分に記載します。

ここのコードを書かないとJavaScriptを動かすことができないです。JavaScriptについてはHTML、CSSと比べて勉強するのはさらに難しくなってきます…。

それでもとりあえず、スマホ用のトグルメニュー（ハンバーガーメニュー）を追加して動かすためのコードを記載しましょう。わからなくても書いたら動くので楽しいです。

<meta name="viewport" content="width=device-width,initial-scale=1" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
//<![CDATA[
    $(function() {
      $('#toggle span').text('');
      $('#toggle').click(function() {
        $('#nav-top').toggleClass('openNav');
      });
    });
//]]>
</script>

一応説明としては、1行目のmeta name〜というのがサイトを閲覧している端末の画面サイズ等の情報を得るために必要なコードで、レスポンシブに対応させるにはとりあえず書いておかないといけない部分です。

そして2行目script type〜という部分はJavaScriptを動かすためのjQueryのコードを読み込ませる記載です。これにはファイルにアップロードする方法もありますが、このコードをそのまま書いてもらえると、外部からjQueryのファイルを読み込む形になります。

「jQuery」というのもまた難解なのが出てきた感じですが、とりあえず書いておきましょう。さまざまな指示を発動させるために必要な暗号文みたいなものですね。バージョンが3.5.1が執筆時点で最新のものでした。

そして最後の記述がトグルメニューを動かすためのJavaScriptコードとなります。短く済むのが良いですよね。ほんとに難しくて覚えるのはしんどいですが…

（注意）スマートフォン表示はオフにしておく！

ここで注意点は「管理メニュー」⇒「デザイン」⇒「スマートフォン表示」から、スマホ用のレイアウトはオフにしておきましょう。

ジンドゥー独自レイアウトでレスポンシブ対応まとめ

独自レイアウトにてのレスポンシブに対応するところまできましたね。HTML、CSSのみではスマホ用のメニューを表示させることは難しく、JavaScriptの領域に突入することになります。上記のコードは自由にコピペして使ってくださいね。

そうは言ってもヘッダー編集部分への短い記載を行うことで対応できますので、最初は意味はわからなくともコピペしましょう。

実際にトグルメニューが動いて上からメニューが出てくるのを見ると意外と感動しますし、どういう意味なのかは後々勉強していけば良いと思います（私も勉強中です）。

ジンドゥークリエイターでの基本的な操作法は次の記事で扱っています。

Next Post Previous Post
No Comment
Comment
comment url