サロン向けWordPressテーマ制作中。HTML/CSSコーディング終了。

2026年2月17日

サロン向けWordPressテーマ制作中です。HTML/CSSコーディングが終了しました。jQueryで動きも付けています。

そしてGitHub Pagesで公開しました↓

HAIR ＆ MAKE Bay

デザインは以前WordPressテーマLightningで作った美容室をベースにしています↓

WordPressテーマ「Lightning」で架空の美容室サイトを作りました。作り方を軽く解説。| プログラミング独学の軌跡

これからPHPを書いてWordPressテーマ化をしてきます。

とりあえずここまでどんな感じで作ったのか説明します。

トップページのメインビジュアルやスタイルギャラリーのスライダー。

WordPressテーマを作るのは今回で3回目。もう慣れたものです。

トップページのメインビジュアルやスタイルギャラリー部分はスライダーになっていますが、以前作ったテーマ「Bayside Cafe」で使ったものをそのまま利用してます。

メインビジュアルのスライダーはCSSで、スタイルギャラリーのスライダーはjQueryプラグイン「Slick Slider」で実装してます。

リセットCSSではなくサニタイズCSSを使う。

以前作ったテーマBayside Cafeの失敗を活かして、今回はリセットCSSではなくサニタイズCSSを使いました。

リセットCSSを使うとブロックエディタのブロックたちもすべてスタイルがリセットされてしまうんです。
そのため、後でeditor.cssにブロック一つ一つのスタイルを書く必要がでてきてしまいます。

その点、最低限のスタイルを残したサニタイズCSSならその心配はありません。

head部分のコードはこんな感じになります↓

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HAIR&MAKE Bay</title>
    <link rel="stylesheet" href="css/sanitize.css" media="all">
    <link rel="stylesheet" href="css/slick.css" media="all">
    <link rel="stylesheet" href="css/slick-theme.css" media="all">
    <link rel="stylesheet" href="css/main.css" media="all">
    <link rel="stylesheet" href="css/responsive.css" media="all">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 </head>

まず最初にサニタイズCSSを読み込んで、そのあとにスリックCSSやメインCSS、レスポンシブCSSなどを読み込んでます。

フォントオーサムも読み込んでます。

コーディングのコツ。

コーディングもきれいになってきました。

おおまかなコードを載せておくと↓

<header>
   <div class="header-inner container">
      <!-- ロゴ -->
      <h1 id="header-logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </h1>
      <!-- ナビゲーション -->
      <nav class="globalnav-pc pc">
        <ul>
          <li><a href="index.html">HOME<br>ホーム</a></li>
          <!----------------省略----------------->
    </div>
</header>

<main>
      <!-- スライドショー -->
      <div class="slide pc">
        <img src="img/slide1.jpg" alt="">
        <img src="img/slide2.jpg" alt="">
      <!----------------省略----------------->

     <!-- コンセプト -->
     <section class="concept">
      <div class="container">
        <h2 class="home-h2">CONCEPT</h2>
        <!----------------省略----------------->
      </div>
     </section>

     <!-- メニュー -->
     <section class="salon-menu">
      <div class="container">
        <h2 class="home-h2">MENU</h2>
        <!----------------省略----------------->
      </div>
     </section>
<!----------------省略----------------->

メニューセクションのクラスを「menu」ではなく「salon-menu」としたのは、「menu」というクラスは他（プラグインなど）で使われる可能性が高く、被ってしまうかもしれないからです。クラス名はなるべくテーマオリジナルの名前をつけましょう。テーマ名が決まっているならテーマ名を入れるといいです。

各セクション部分はsection要素の中にcontainerクラスをつけたdiv要素を入れてます。

そしてCSSはこうしてます↓

/*スマホ画面*/
.container{
  padding:0 15px;/*左右に15px余白*/
}

/*パソコン画面*/
@media screen and(min-width:678px){
  .container{
    max-width:940px;/*最大コンテンツ幅*/
    margin:0 auto;/*コンテンツ中央寄せ*/
    box-sizing:content-box;/*左右のpadding15pxも含めてコンテンツ幅940pxにする*/
  }
}

これでうまくコンテナーができます。

section要素に直接containerクラスをつけてしまうと、そのセクションに背景画像を画面幅いっぱいに広げたいときに邪魔になってしまいます。

containerに左右のpaddingを指定しているので、sectionには左右のpaddingは指定しないようにしましょう。

フォントサイズとline-height

私はフォントサイズとline-heightはいくつがいいか、いろいろなホームページを見て調べました。

サイト	フォントサイズ（本文）	フォントサイズ（グローバルナビ）	line-height（本文）
カフェレストランA	14px	14px	2.5
テーマTreeデモサイト	16px	14px	2.6
某書籍デモサイト	14px	14px	2
イタリアンレストランA	16px	22px	2.3
フレンチレストランA	14px	14px	2.2
フレンチレストランB	15px	14px	1.8
フレンチレストランC	14px	14px	1.8
Lightningでもサイト	16px	14px	1.7