ドットエイト机上研究所

WordPress オリジナルテーマ製作のために、デザインをもとに製作したHTMLについて紹介します．

デザイン

ブログサイトにありがちなレイアウトのデザイン案です．
グローバルナビゲーション部分の背景など、HTML化の際に検討の必要な要素がいくつか存在します．

HTMLサンプルの概要

https://www.dot8.jp/sample/paws8/paws8-theme-design.html

背景は、以前紹介した「【コピペでOK】CSSだけで背景に泡/雪を表現」を適用しております
幅918pxまで1カラムレイアウト、それ以上の幅では2カラムレイアウトです
コンテンツ幅は最大1200px
ロゴの横とヘッダー部最下部（パンくずリストの上）、2カ所のナビゲーションを準備
「文字サイズを大きくできるように」という要望を案外聞くので、クッキーに設定を保存する文字サイズ可変ボタンを設置
- 文字サイズ可変の必要性議論については省略（個人的には必要性に疑問もあるのですが、要望があれば実現しないわけにはいかないので）
- 標準よりも文字を小さくする必要性については、必要性を全く感じないので「小」が標準サイズ（16px）
  中、大と25%ずつ大きくなる
- フォントサイズ設定はcookieに保存
検索フィールドはテーマ製作時に調整する予定のため、デフォルトの見た目のまま
グローバルナビ部背景の木々は、svg画像

詳細は、リンク先のページを確認してください（準備中）

フォルダ・ファイル構成

📁 サイトルート
     ├ 📁 [assets]
     │  ├ 📁 [css]
     │  │  ├ normalize.css
     │  │  └ paws_common.css
     │  ├ 📁 [img]
     │  │  ├ dot8-horizontal.svg ：ロゴ
     │  │  ├ koiwai.jpg ：コンテンツ部に表示のサンプル画像
     │  │  └ tree.svg ：グローバルナビ部背景にある木々の画像
     │  └ 📁 [js]
     │  　  └ paws_fontsizecookie.js
     └ 📁 [sample]
     　  └ 📁 [paws8]
     　  　  └ paws8-theme-design.html

サイト管理の都合で「paws8-theme-design.html」を下層フォルダに配置しています．
フォルダ構成には深い意味はありませんので、構成は変更しても問題ありません．パスもあわせて変更してください．

ソースコード

HTML

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>dot8 - コーディング代行・HTMLリファクタリングでWeb製作のお手伝い</title>
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<link rel='stylesheet' id='normalize-css' href='/assets/css/normalize.css?ver=0.1' media='all'>
<link rel='stylesheet' id='paws_common-css' href='/assets/css/paws_common.css?ver=0.1' media='all'>
<script src="assets/js/paws_fontsizecookie.js?ver=0.1"></script>
</head>

<body>
  <input class="hidden" id="font_s" type="radio" name="fontsize" value="s"><input class="hidden" id="font_m" type="radio" name="fontsize" value="m"><input class="hidden" id="font_l" type="radio" name="fontsize" value="l">
  <div class="bodywrap">
    <header class="header">
      <div class="site-branding">
        <p class="site-description">サイトデスクリプション</p>
        <p class="site-title">
          <a href="#">
            サイトタイトル
          </a>
        </p>
      </div>
      <div class="header__logoarea-wrapper">
        <div class="site-logo">
          <a href="#" class="custom-logo-link" rel="home">
            <img src="assets/img/dot8-horizontal.svg" class="custom-logo" alt="">
          </a>
        </div>
        <nav class="PrimaryNavigation">
          <ul class="PrimaryNavigation__list-ul">
            <li class="widget_search">
              <form role="search"  method="get" class="search-form" action="https://www.dot8.jp/">
                <label for="search-form-1">検索</label><input type="search" id="search-form-1" class="search-field" value="" name="s"><input type="submit" class="search-submit" value="検索">
              </form>
            </li>
            <li id="font-size">文字サイズ<label for="font_s" onClick="setValue(`font_s`);">小</label><label for="font_m" onClick="setValue(`font_m`);">中</label><label for="font_l" onClick="setValue(`font_l`);">大</label></li>
            <li>
              <a class="PrimaryNavigation__link" href="#">プライマリーナビ01</a>
            </li>
            <li>
              <a class="PrimaryNavigation__link" href="#">プライマリーナビ02</a>
            </li>
            <li>
              <a class="PrimaryNavigation__link" href="#">プライマリーナビ03</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="ad-area">
        <p class="ad-label">スポンサーリンク</p>
        <div class="ad-wrap">&nbsp;</div>
      </div>
      <nav class="global-nav">
        <ul class="global-nav__list">
          <li>
            <a href="#">ドットエイト机上研究所</a>
          </li>
          <li>
            <a href="#">リンク01</a>
          </li>
          <li>
            <a href="#">リンク02</a>
          </li>
          <li>
            <a href="#">リンク03</a>
          </li>
        </ul>
      </nav>
    </header>
    <div class="breadcrumb">
        <a class="breadcrumb-link" href="#"><span>トップ</span></a>
        <span class="breadcrumb-gt">&gt;</span>
        <span class="breadcrumb-child">
          <a class="breadcrumb-child-link" href="#"><span>パンくず</span></a>
        </span>
        <span class="breadcrumb-gt">&gt;</span>
        <span class="breadcrumb-child">
          <span>パンくず</span>
        </span>
    </div>
    <div id="content" class="site-content">
      <div class="content-area">
        <main id="main" class="site-main">
          <article>
            <header class="entry-header">
              <h1 class="entry-title">最小限のWordPressテーマ</h1>
              <figure class="post-thumbnail">
                <img src="assets/img/koiwai.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
              </figure>
              <span class="posted-on"><time class="entry-date published updated" datetime="2023-09-11T09:01:10+00:00">9月 11, 2023</time></span>
            </header>
            <div class="entry-content">
              <p>dot8 アラヤです．</p>
              <h2>H2タイトル</h2>
              <p>ブロックエディターで入力した内容が表示されています．</p>
            </div>
            <footer>
              <div class="post-taxonomies">
                <span class="cat-links">カテゴリー: <a href="#" rel="category tag">カテゴリー１</a>、<a href="#" rel="category tag">カテゴリー２</a> </span>
                <span class="tags-links">タグ: <a href="#" rel="tag">タグ１</a>、<a href="#" rel="tag">タグ２</a>、<a href="#" rel="tag">タグ３</a>、<a href="#" rel="tag">タグ４</a>、<a href="#" rel="tag">タグ５</a>、<a href="#" rel="tag">タグ６</a></span>
              </div>
            </footer>
          </article>
        </main>
      </div>
    </div>
    <aside class="widget-area">
      <div class="widget-area-inner">
        <section class="widget widget_recent_entries">
          <h2 class="widget-title">最近の投稿</h2>
          <nav aria-label="最近の投稿">
            <ul>
              <li>
                <a href="#">最近の投稿</a>
              </li>
              <li>
                <a href="#">最近の投稿</a>
              </li>
              <li>
                <a href="#">最近の投稿</a>
              </li>
              <li>
                <a href="#">最近の投稿</a>
              </li>
              <li>
                <a href="#">最近の投稿</a>
              </li>
            </ul>
          </nav>
        </section>
        <section class="widget widget_archive">
          <h2 class="widget-title">アーカイブ</h2>
          <nav aria-label="アーカイブ">
            <ul>
              <li>
                <a href="#">2023年9月</a>
              </li>
              <li>
                <a href="#">2023年8月</a>
              </li>
              <li>
                <a href="#">2023年7月</a>
              </li>
              <li>
                <a href="#">2023年6月</a>
              </li>
              <li>
                <a href="#">2023年5月</a>
              </li>
            </ul>
          </nav>
        </section>
        <section class="widget widget_categories">
          <h2 class="widget-title">カテゴリー</h2>
          <nav aria-label="カテゴリー">
            <ul>
              <li class="cat-item cat-item-0">
                <a href="#">カテゴリー０</a>
              </li>
              <li class="cat-item cat-item-39">
                <a href="#">カテゴリー３９</a>
              </li>
            </ul>
          </nav>
        </section>
      </div>
    </aside>
    <footer class="footer">
      <p class="copyright">&#169; dot8</p>
    </footer>
  </div>
</body>
</html>

CSS（normalize.cssは省略）

@charset "utf-8";
:root{
  --content_max_width: 1200px;
  --widget_area_width: 360px;
  
  /*
  Once you have determined the values for --content_max_width and --widget_area_width, change the values in lines 24 and 60.
  lines 22 : breakpoint value + 19px
  lines 58 : --content_max_width value + 19px
  */
  --margin_harf: calc((100% - var(--content_max_width)) / 2);
  --site_content_width: calc(var(--content_max_width) - var(--widget_area_width) - 20px);
  --widget_grid_width: calc(var(--widget_area_width) + var(--margin_harf));
}


.header .ad-wrap{
  background-color: rgb(238,238,238);
  height: 280px;
  width: 100%;
}
@media screen and (min-width: 919px){
  .bodywrap{
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: auto var(--widget_area_width);
    grid-template-rows: auto auto auto auto;
  }
  .header{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .header .ad-area{
    margin: 0 auto;
  }
  .breadcrumb{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin: 0;
  }
  .site-content{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin: 0;
  }
  .widget-area{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    margin: 0;
    width:var(--widget_area_width);
  }
  .footer{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    margin: 0;
  }
}

@media screen and (min-width: 1219px) {
  .bodywrap{
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: auto var(--widget_grid_width);
    grid-template-rows: auto auto auto auto;
  }
  .header{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .site-branding{
    margin: 0 var(--margin_harf);
  }
  .header__logoarea-wrapper{
    margin: 0 var(--margin_harf);
  }
  .header .ad-area{
    margin: 0 var(--margin_harf);
  }
  .header .ad-wrap{
    background-color: rgb(238,238,238);
    height: 280px;
    width: 1200px;
  }
  .global-nav{
    margin: 0 var(--margin_harf);
  }
  div.breadcrumb{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    padding-right: var(--margin_harf);
    padding-left: var(--margin_harf);
  }
  .site-content{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    margin: 0 0 0 auto;
    width:var(--site_content_width);
  }
  .widget-area{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    margin: 0 auto 0 0;
    width:var(--widget_area_width);
  }
  .footer{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    margin: 0 var(--margin_harf);
  }
}


html{
  background-color: rgb(235,235,232) ;
  color: rgb(51,54,49);
  min-height: 100vh;
}

input.hidden{
  display: none;
}

#font_s:checked ~ .bodywrap{
  font-size:16px;
}
#font_m:checked ~ .bodywrap{
  font-size:20px;
}
#font_l:checked ~ .bodywrap{
  font-size:24px;
}

.header{
  background:repeat-x left bottom /400px auto url("../img/tree.svg"),linear-gradient(rgb(235,235,232) 10%, rgb(251,251,251) 50%);
}

.site-branding{
  display: grid;
  grid-template-columns: auto auto 1fr;
}

.site-description{
  grid-column: 1 / 2;
  font-size: 0.625em;
  line-height: 0.625em;
  margin: 0 0.625em 0 0;
  padding: 0.5em 0;
}

.site-title{
  grid-column: 2 / 3;
  font-size: 0.625em;
  line-height: 0.625em;
  margin: 0;
  padding: 0.5em 0;
}
.site-title a:link{
  color: rgb(51,54,49);
  text-decoration: none;
}
.site-title a:visited{
  color: rgb(51,54,49);
  text-decoration: none;
}
.site-title a:hover{
  color: rgb(51,54,49);
  text-decoration: underline;
}
.site-title a:active{
  color: rgb(51,54,49);
  text-decoration: none;
}

.logic{
  grid-column: 2 / 3;
  font-size: 0.625em;
  line-height: 0.625em;
  margin: 0;
  padding: 0;  
}

.header__logoarea-wrapper{
  display: grid;
  grid-template-columns: 1fr auto;
}

.site-logo{
  margin: 0;
}

.custom-logo{
  height: 42px;
  width: auto;
}

.PrimaryNavigation{
}

.PrimaryNavigation__list-ul{
  direction: rtl;
  list-style-type: none;
}

.PrimaryNavigation__list-ul li{
  display: inline-block;
  margin:0 0.5em;
}

.PrimaryNavigation__list-ul li:first-child{
  margin-right:0;
}

.PrimaryNavigation__list-ul li a:link{
  color: rgb(51,54,49);
  text-decoration: underline;
}
.PrimaryNavigation__list-ul li a:visited{
  color: rgb(51,54,49);
  text-decoration: underline;
}
.PrimaryNavigation__list-ul li a:hover{
  color: rgb(51,54,49);
  text-decoration: none;
}
.PrimaryNavigation__list-ul li a:active{
  color: rgb(51,54,49);
  text-decoration: underline;
}

#font-size label{
  border: 0 none;
  cursor: pointer;
  margin: 0 0 0 0.5em;
  padding: 0;
}
#font_s:checked ~ .bodywrap label[for="font_s"]{
  text-decoration: underline;
}
#font_m:checked ~ .bodywrap label[for="font_m"]{
  text-decoration: underline;
}
#font_l:checked ~ .bodywrap label[for="font_l"]{
  text-decoration: underline;
}

.search-form label{
  display: none;
}

.header .ad-label{
  font-size: 0.75em;
  margin-bottom: 0.5em;
  text-align: center
}

.global-nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.global-nav li{
  display: inline-block;
  margin: 0.75em;
}

.global-nav li:first-child{
  margin-left: 0;
}

.global-nav li:last-child{
  margin-right: 0;
}

.global-nav li a:link{
  color: rgb(51,54,49);
  text-decoration: underline;
}
.global-nav li a:visited{
  color: rgb(51,54,49);
  text-decoration: underline;
}
.global-nav li a:hover{
  color: rgb(51,54,49);
  text-decoration: none;
}
.global-nav li a:active{
  color: rgb(51,54,49);
  text-decoration: underline;
}

.breadcrumb{
  background: linear-gradient(rgb(213,213,213),rgb(235,235,232) 4px);
  font-size: small;
  padding: 10px 0 6px;
}
.breadcrumb a:link{
  color: rgb(51,54,49);
  text-decoration: underline;
}
.breadcrumb a:visited{
  color: rgb(51,54,49);
  text-decoration: underline;
}
.breadcrumb a:hover{
  color: rgb(51,54,49);
  text-decoration: none;
}
.breadcrumb a:active{
  color: rgb(51,54,49);
  text-decoration: underline;
}

.site-content{
  background-color: rgb(251,251,251);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  z-index: 10;
}

.entry-title{
  margin-top: 0;
}

.post-thumbnail{
  margin: 0;
}

.post-thumbnail img{
  height: auto;
  max-width:100%;
}

.widget-area{
  position: relative;
  z-index: 10;
}

.widget{
  background-color: rgb(251,251,251);
  border-radius: 10px;
}

.widget .widget-title{
  background-color: rgb(51,54,49);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-sizing: border-box;
  color: rgb(251,251,251);
  margin-top: 0;
  padding: 0.25em 0;
  text-align: center;
}

.copyright{
  margin: 1em 0;
  text-align: center;
}


/* css spark/snow effect */
html::before{
  animation: anim 5s linear infinite;
  animation-timing-function:ease-in;
  content:"●";
  color: rgb(255,255,255);
  font-size: 16px;
  position: fixed;
  top: -5%;
  text-shadow: 5vw  -100px 2px , 10vw -400px 3px , 20vw -500px 4px , 30vw -580px 1px , 39vw -250px 2px , 63vw -180px 0 , 78vw -220px 4px , 86vw -320px 9px , 94vw -170px 7px;
  z-index: 1;
}

html::after{
  animation: anim 7s linear infinite;
  animation-timing-function:ease-in;
  content:"●";
  color: rgb(255,255,255);
  font-size: 16px;
  position: fixed;
  top: -5%;
  text-shadow: 2vw  -100px 2px , 13vw -400px 3px , 24vw -500px 4px , 33vw -580px 1px , 39vw -250px 2px , 65vw -180px 0 , 72vw -220px 4px , 89vw -320px 9px , 97vw -170px 7px;
  z-index: 2;
}

body::before{
  animation: anim 13s linear infinite;
  animation-timing-function:ease-in;
  content:"＊";
  color: rgb(255,255,255);
  font-size: 16px;
  position: fixed;
  top: -5%;
  text-shadow: 5vw  -100px 2px , 10vw -400px 3px , 20vw -500px 4px , 30vw -580px 1px , 39vw -250px 2px , 63vw -180px 0 , 78vw -220px 4px , 86vw -320px 9px , 94vw -170px 7px;
  z-index: 3;
}

body::after{
  animation: anim 19s linear infinite;
  animation-timing-function:ease-in;
  content:"＊";
  color: rgb(255,255,255);
  font-size: 16px;
  position: fixed;
  top: -5%;
  text-shadow: 2vw  -100px 2px , 13vw -400px 3px , 24vw -500px 4px , 33vw -580px 1px , 39vw -250px 2px , 65vw -180px 0 , 72vw -220px 4px , 89vw -320px 9px , 97vw -170px 7px;
  z-index: 4;
}

@keyframes anim {
  100% {
    color: transparent;
    top: calc(100% + 580px);
  }
}

JavaScript

function setValue(strNum){
  const name = `fontsizecookie`;
  let period = 7;
  let value = strNum;
  let nowtime = new Date().getTime();
  let clear_time = new Date(nowtime + (60 * 60 * 24 * 1000 * period));
  let expires = clear_time.toGMTString();

  document.getElementById(`font_s`).setAttribute(`checked`,false);
  document.getElementById(`font_m`).setAttribute(`checked`,false);
  document.getElementById(`font_l`).setAttribute(`checked`,false);
  document.cookie = name + `=` + escape(value) + `; expires=` + expires;
  
  if(getCookie(`fontsizecookie`)){
    if(getCookie(`fontsizecookie`) === `font_s`){
      document.getElementById(`font_s`).checked = true;
      document.getElementById(`font_s`).setAttribute(`checked`,true);
    } else if(getCookie(`fontsizecookie`) === `font_m`){
      document.getElementById(`font_m`).checked = true;
      document.getElementById(`font_m`).setAttribute(`checked`,true);
    } else if(getCookie(`fontsizecookie`) === `font_l`){
      document.getElementById(`font_l`).checked = true;
      document.getElementById(`font_l`).setAttribute(`checked`,true);
    } else {
      document.getElementById(`font_s`).checked = true;
      document.getElementById(`font_s`).setAttribute(`checked`,true);
    }
  } else {
    document.getElementById(`font_s`).checked = true;
    document.getElementById(`font_s`).setAttribute(`checked`,true);
  }
  return ``;
}

function getCookie(cookie_name){
  let st=``;
  let ed=``;
  
  if(document.cookie.length>0){
    st=document.cookie.indexOf(cookie_name + `=`);
    if(st!=-1){
      st=st+cookie_name.length+1;
      ed=document.cookie.indexOf(`;`,st);
      if(ed==-1) ed=document.cookie.length;
      return unescape(document.cookie.substring(st,ed));
    }
  }
  return ``;
}

window.addEventListener(`DOMContentLoaded`, function(){
  document.getElementById(`font_s` ).setAttribute(`checked`,false);
  document.getElementById(`font_m` ).setAttribute(`checked`,false);
  document.getElementById(`font_l` ).setAttribute(`checked`,false);
  
  if(getCookie(`fontsizecookie`)){
    if(getCookie(`fontsizecookie`) === `font_s`){
      document.getElementById(`font_s` ).checked = true;
      document.getElementById(`font_s`).setAttribute(`checked`,true);
    } else if(getCookie(`fontsizecookie`) === `font_m`){
      document.getElementById(`font_m`).checked = true;
      document.getElementById(`font_m`).setAttribute(`checked`,true);
    } else if(getCookie(`fontsizecookie`) === `font_l`){
      document.getElementById(`font_l` ).checked = true;
      document.getElementById(`font_l`).setAttribute(`checked`,true);
    } else {
      document.getElementById(`font_s` ).checked = true;
      document.getElementById(`font_s`).setAttribute(`checked`,true);
    }
  } else {
    document.getElementById(`font_s`).checked = true;
    document.getElementById(`font_s`).setAttribute(`checked`,true);
  }
  return ``;
});

WordPress オリジナルテーマ HTML について

デザイン

HTMLサンプルの概要

フォルダ・ファイル構成

ソースコード

コメントするコメントをキャンセル

デザイン

HTMLサンプルの概要

フォルダ・ファイル構成

ソースコード

コメントする コメントをキャンセル

コメントするコメントをキャンセル