一般社団法人 全国個人事業主支援協会

COLUMN コラム

皆さんこんにちは

先月から始めたBASEのテーマ作成

今回はヘッダーのところを作成していきます。

 

前回Developersを開くところまでやりましたが、その状態でプレビューするとこのような感じになっています。

それを下の画像のようにしていきたいと思います。

 

１．ショップロゴ

まずは中央に配置されているショップロゴを左上に移動していきたいと思います。

【css】

　@media(min-width: 769px) {
      body.shop .wrapper {
        width: 960px;
      }
    }
    body.shop #mainHeader {
      margin: 0 auto 34px;
    }
　body.shop #shopHeader h1 {
      display: block;
      font-size: 30px;
      letter-spacing: 2px;
      text-align: center;
    }
    body.shop #shopHeader h1 {
      margin: 56px 0 34px;
    }
この記述を以下のように変更します。

　body.shop #mainHeader {

            margin: 0 0 34px;
        }
　body.shop #shopHeader {　　←ヘッダーを細長くしてアイテムを横並びに配置するために追加
            display: flex;
            align-items: center;
            padding: 0 32px;
            height: 72px;
        }
　body.shop #shopHeader h1 {
            font-size: 30px;
            letter-spacing: 2px;
            margin-right: auto;　　←ロゴは左、他は右寄せにしたいので追加
        }

 

２．BASEマークとカート

この二つを#shopHeader内の一番下に移動します。

【HTML】

<body id=”{block:IndexPage}shopTopPage{/block:IndexPage}{block:ItemPage}shopDetailPage{/block:ItemPage}” class=”shop template”>
  {block:AppsI18n}{AppsI18nTag}{/block:AppsI18n}
  {BASEMenuTag}　←コイツ
  {block:IndexPage}
  <span id=”max_page” style=”display: none;”>{MaxPageNumber}</span>
  <span id=”next_page” style=”display: none;”>{NextPageNumber}</span>
  {/block:IndexPage}
  <header id=”mainHeader” class=”wrapper”>
　<div id=”shopHeader”>
　～～～～～～～～～中略～～～～～～～～～～
　ここに移動
　</div>
  </header>
ついでにデザインも変更します。ボタンみたいなデザインではなく白丸の中にアイコンというデザインにしてみました。（背景が白だから分からないけど…）
【css】
　#baseMenu {
      box-sizing: border-box;
      position: fixed;
      right: 25px;
      top: 5px;
      z-index: 2002;
    }
    #baseMenu>ul>li {
      float: left;
      list-style: none;
    }
    #baseMenu>ul>li.base {　　←必要ないので消す
      margin: 0 10px 0 0;
    }
    #baseMenu>ul>li a {
      background-color: #fff;
      border-radius: 3px;
      box-shadow: 0 1px 0 1px rgba(150, 150, 150, 0.4);
      cursor: pointer;
      display: block;
      -webkit-font-smoothing: antialiased;
      margin: 1px 0 0;
      padding: 5px 15px;
      text-decoration: none;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
    }
    #baseMenu>ul>li a:hover {　　←一旦ホバーアクションはなし
      box-shadow: 0 0 0 1px rgba(150, 150, 150, 0.2);
      padding: 6px 15px 4px;
    }
この記述を以下のように変更します。

　#baseMenu {

            height: inherit;
            display: flex;
            box-sizing: border-box;
            right: 25px;
            top: 5px;
            z-index: 2002;
        }
        #baseMenu>ul {
            display: flex;
            align-items: center;
        }
        #baseMenu>ul>li {
            float: left;
            list-style: none;
            align-items: center;
            margin-left: 20px;
        }

        #baseMenu>ul>li a {　　←白丸にしてる

            background-color: #fff;
　　　cursor: pointer;
　　　display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 30px;
            text-align: center;
        }
        #baseMenu ul li a img {　　←アイコンを配置
            width: 20px;
            height: auto;
            vertical-align: middle;
        }
３．メニュー
上下のボーダーを消して、横幅を広くします。
【css】
　body.shop #shopHeader nav {
      border-bottom: 2px solid #000;
      border-top: 2px solid #000;
      margin: 0 7px;
    }
　body.shop #shopHeader nav ul li a {
      display: block;
      padding: 10px;
    }
この記述を以下のように変更します。
　body.shop #shopHeader nav {
      margin: 0 7px;
    }
　body.shop #shopHeader nav ul li a {
      display: block;
      padding: 10px;
　  width: 70px;
    }

以上でヘッダー完成です！

ありがとうございました。
The following two tabs change content below.

内田 美樹

システムエンジニアをしています。 フロントエンドを主に、サーバーサイドも書いたりします。 JS/TS/Python/Javaは少しだけ React/Angular/Next/Nuxt/Vue/Nodeなんかを使ったりします。

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア
記事一覧

関連記事

【SEO】クローラーにページを認識させる方法
【SEO】クローラーにページを認識させる方法
困ったときには別の角度から
困ったときには別の角度から
ITエンジニアのフリーランスって実際どうなの？
ITエンジニアのフリーランスって実際どうなの？




全体の人気記事

カテゴリー