カンタンBlogger学習 #06 ヘッダメニューのウィジェット化

2023/02/23

Bloggerを使ってホームページが作り込める事が段々と分かってきました。そして、基本的な構造が、Wordpressとある程度同じ様な構造で考えられる事も理解できてきました。そんなWordpressにもあるウィジェットという構造について今回は学習をしてみたいと思います。

ウィジェットとは？

iPhoneやAndroidのスマートフォンを使っていると「ウィジェット」という言葉を聞くことがあります。これは、Home画面や特定の画面に、ショートカットを追加できる機能の事を指します。一方、Wordpressもウィジェットがあり、これは、ヘッダメニューやサイドメニューといった、メニュー項目や、ガジェットやプラグインなどの機能を自由に追加できる機能の事を指します。そして、GoogleBloggerのウィジェットというのも、Wordpressのウィジェットと同じ意味合いであると考えて問題なさそうです。ただし、Wordpressはプラグインなどと直結した機能などが使える一方、Bloggerでは、あまりサードパーティを便利に使う機能は無く、独自でプログラミングして実装してしまう方が良いと考えました。ちなみに、Bloggerのウィジェット機能は、管理画面の「レイアウト」（サイドメニュー）で使用することができます。

ウィジェット搭載ソースコード

前回作ったコードを少し手直しして、メニューリンクと、ブログタイトル部分をウィジェット化してみました。 headerタグの箇所をまるまる以下のように変更します。

<header>
  <div class='title'><a href='/'><data:blog.title/></a></div>
  <nav>
    <input id='menu_toggle' type='checkbox' style='display:none;'/>
    <ul>
      <li><a href='/'>HOME</a></li>
      <li><a href='https://myntinc.com/'>MYNT</a></li>
      <!-- <li><a href='about.html'>ABOUT US</a></li> -->
      <li><a href='https://myntinc.com/#contact'>CONTACT</a></li>
    </ul>
    <label for='menu_toggle'>
      <span></span>
      <span></span>
      <span></span>
    </label>
  </nav>
</header>

<header>
  <b:section id='header' class='header'>
    <b:widget id='Header1' type='Header'>
      <b:includable id='main'>
        <div class='title'><a href='/'><data:blog.title/></a></div>
      </b:includable>
    </b:widget>

    <b:widget id='PageList1' locked='false' title='ふがふが' type='PageList'>
      <b:widget-settings>
        <b:widget-setting name='pageListJson'><![CDATA[{"1859458349133099262":{"href":"https://mynt-test.blogspot.com/p/blog-page.html","position":0,"title":"aa"},"4875718642935428462":{"href":"https://mynt-test.blogspot.com/p/bb.html","position":1,"title":"bb"}}]]></b:widget-setting>
        <b:widget-setting name='homeTitle'>ホーム</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <div class='widget-content'>
          <ul>
            <b:loop values='data:links' var='link'>
              <li>
                <b:class cond='data:link.isCurrentPage' name='selected'/>
                <a expr:href='data:link.href'><data:link.title/></a>
              </li>
            </b:loop>
          </ul>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
    </b:widget>
  </b:section>
</header>

bloggerのxmlでおなじみの、section > widget > includable という構造をheaderタグ内に組み込みました。この<b:widget>というタグが、レイアウトでそのまま表示されるようになります。そして、type属性が、ガジェット追加で選ばれた内容になるという仕組みであることがソースを眺めて理解できました。

ガジェットtype一覧

とりあえず、今後使うだろうなと思って、ガジェットについて調べてみました。ウィジェットをXMLでセットする時に参考にしてください。

ページ : PageList

注目の投稿 : FeaturedPost

ブログ検索 : BlogSearch

HTML / Javascript : HTML

自己紹介 : Profile

ブログアーカイブ : BlogArchive

フォロワー : Followers

画像 : Image

ラベル : Label

リンクリスト : LinkList

テキスト : Text

人気の投稿 : PopularPosts

ブログの統計情報 : Stats

ブログリスト : BlogList

フィード : Feed

ロゴ : BloggerButton

登録用リンク : Subscribe

翻訳 : Translate

リスト : TextList

連絡フォーム : ContactForm

ウィキペディア : Wikipedia

帰属 : Attribution

不正行為の報告 : ReportAbuse

今回完成したソースコード

コピペで使えるように、今回変更したxml全体を表示しておきます。

<!DOCTYPE html>
<html
  b:version='2'
  class='v2'
  expr:dir='data:blog.languageDirection'
  expr:lang='data:blog.locale'
  xmlns='http://www.w3.org/1999/xhtml'
  xmlns:b='http://www.google.com/2005/gml/b'
  xmlns:data='http://www.google.com/2005/gml/data'
  xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<title><data:blog.title/></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<b:include data='blog' name='all-head-content'/>

<b:skin><![CDATA[

:root{
  /* --color-1 : #19c3ba;
  --color-2 : #80e2a5; */
  --color-1 : black;
  --color-2 : #80e2a5;
}

html,body{
  width              : 100%;
  height             : 100%;
  padding            : 0;
  margin             : 0;
  border             : 0;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  font-size:16px;
  /* line-height:32px; */

  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}


img{
  max-width:100%;
}

ul,ol,li{
  list-style:none;
  margin:0;
  padding:0;
}

a{
  text-decoration:none;
}

input,textarea {
  -webkit-appearance: none;
}

.center{
  text-align:center;
}
.right{
  text-align:right;
}
.red{
  color:red;
}
.text{
  white-space:pre-wrap;
  word-break:break-all;
}
.small{
  font-size:0.8rem;
}

h1,h2,h3,h4,h5,h6{
  font-weight: bold;
  margin:0;
}

h1{
  font-size: 2.3rem;
  margin-bottom:1rem;
}

h2{
  font-size: 1.8rem;
  padding: 10px 15px;
  border-radius: 4px;
  line-height: 1.1;
  background: var(--color-1);
  color: #ffffff;
}

h3{
  font-size: 1.4rem;
  padding: 5px 0;
  line-height: 1.1;
  border-bottom: solid 2px var(--color-1);
}

h4{

}

h5{

}

h6{

}


/* widget-clear */
.widget{
  margin:0;
}

/* Header */
@import 'header/hamburger.css';

#header{
  padding:20px;
  display:flex;
  gap:10px;
  align-items:start;
  height:100px;
  margin:0 auto;
}

#header .title,
#header .title *{
  font-size:1.5rem;
  font-weight:bold;
  color:black;
}

#header .PageList{
  margin-left:auto;
  
}

#header .PageList ul{
  display:flex;
  align-items:center;
  gap:20px;
}

#header .PageList ul *{
  font-size:0.8rem;
  line-height:32px;
}



/* Footer */
footer{
  background-color : var(--color-1);
  height:100px;
  padding:10px 20px;
}
footer *{
  color:white;
  font-size:0.8rem;
  line-height:32px; 
}

footer nav ul{
  display:flex;
  justify-content:center;
}
footer nav ul li a{
  display:block;
  padding:5px 10px;
}

footer .copy{
  display:block;
  text-align:center;
}

@media (max-width:768px){

}

/* Main */
main{
  min-height:calc(100vh - 200px);
  padding-bottom:50px;
  margin-top:20px;
}

/* Grid */
main .grid{
  --color-bg:black;
  --size-image-height   : 160px;
  --size-border-width   : 4px;
  --size-borfder-radius : 8px;

  display:grid;
  flex-wrap:wrap;
  gap:10px;
  justify-content: center;
  grid-auto-rows: minmax(var(--size-image-height) auto);
  width:100%;
  font-size:0;
  margin:0 auto;
}

main .grid > *{
  width:100%;
  height:100%;
  border:var(--size-border-width) solid var(--color-bg);
  display:flex;
  flex-direction:column;

  box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  transition-property:transform , box-shadow;
  transition-duration:0.3s;
  background-color:var(--color-bg);
  border-radius: var(--size-borfder-radius);
  font-size:0;
  overflow:hidden;
}
main .grid > *:hover{
  transform:translate(-4px,-4px) rotate(-1.5deg);
  box-shadow:7px 7px 6px rgba(0,0,0,0.5);
}

main .grid img{
  width:100%;
  height:var(--size-image-height);
  object-fit:cover;
  background-color:white;
}

main .grid .title{
  padding:3px 5px;
  font-size:0.8rem;
  white-space:pre-wrap;
  word-break:break-all;
  color:white;
  border-top:1px solid white;
}
main .grid .date{
  font-size:0.6rem;
  color:#eee;
  text-align:right;
  margin-top:auto;
}

/* Article */
main article{
  width:768px;
  max-width:100%;
  margin:0 auto;
}

main article .published{
  font-size:0.8rem;
  color:#999;
  padding:10px;
}
main article .labels{
  padding:10px;
  text-align:right;
  font-size:0;
  white-space:normal;
}
main article .labels > *{
  display:inline-block;
  background-color:var(--color-1);
  color:#ddd;
  padding:5px 10px;
  font-size:0.8rem;
  margin:3px;
  border-radius:4px;
}
main article .labels > *:hover{
  color:white;
}

main article .blog-body,
main article .blog-body *{
  white-space:pre-wrap;
  word-break:break-all;
}

/* Code */
code{
  border: 0;
  padding : 20px;
  display:block;
  line-height:1.4rem;
  overflow-x: auto;
  white-space:pre;
  background-color :  #364549;
  font-weight:normal;
  color:white;
  max-height:90vh;
  border:1px solid #364549;
}

code{
  font-family: SFMono-Regular, Consolas, 'Courier New', 'BIZ UDGothic', Meiryo, monospace; 
}

code[name]::before{
  content:attr(name);
  display:block;
  margin-top:-20px;
  margin-left:-20px;
  margin-bottom:20px;
  color:white;
  border-bottom:1px solid white;
  background-color:white;
  padding:5px 10px;
  color:black;
  width: calc(100% + 40px);
  position: sticky;
  top: -20px;
  left:-20px;
  font-size:0.8em;
  background-color: #eee;
}


/* Responsive */
@media (max-width:409px){
  #header{
    width:100%;
  }
  main .grid{
    width:100%;
    grid-template-columns: 1fr;
  }
}

@media (min-width:410px){
  #header{
    width:410px;
  }
  body[data-style='article'] #header{
    width:100%;
  }
  main .grid{
    width:390px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width:620px){
  #header{
    width:620px;
  }
  body[data-style='article'] #header{
    width:100%;
  }
  main .grid{
    width:600px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width:768px){
  body[data-style='article'] #header{
    width:768px;
  }
}

@media (min-width:830px){
  #header{
    width:830px;
  }
  body[data-style='article'] #header{
    width:768px;
  }
  main .grid{
    width:810px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width:1040px){
  #header{
    width:1040px;
  }
  body[data-style='article'] #header{
    width:768px;
  }
  main .grid{
    width:1020px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

]]></b:skin>

<script>/*<![CDATA[*/

/*]]>*/</script>
</head>

<body>

<header>
  <b:section id='header' class='header'>
    <b:widget id='Header1' type='Header'>
      <b:includable id='main'>
        <div class='title'><a href='/'><data:blog.title/></a></div>
      </b:includable>
    </b:widget>

    <b:widget id='PageList1' locked='false' title='ふがふが' type='PageList'>
      <b:widget-settings>
        <b:widget-setting name='pageListJson'><![CDATA[{"1859458349133099262":{"href":"https://mynt-test.blogspot.com/p/blog-page.html","position":0,"title":"aa"},"4875718642935428462":{"href":"https://mynt-test.blogspot.com/p/bb.html","position":1,"title":"bb"}}]]></b:widget-setting>
        <b:widget-setting name='homeTitle'>ホーム</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <div class='widget-content'>
          <ul>
            <b:loop values='data:links' var='link'>
              <li>
                <b:class cond='data:link.isCurrentPage' name='selected'/>
                <a expr:href='data:link.href'><data:link.title/></a>
              </li>
            </b:loop>
          </ul>
          <b:include name='quickedit'/>
        </div>
      </b:includable>
    </b:widget>
  </b:section>
</header>

<main>
<b:section id='メイン' class='main'>
  <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' visible='true' version='2'>
    <b:widget-settings>
      <b:widget-setting name='showDateHeader'>true</b:widget-setting>
      <b:widget-setting name='commentLabel'>comments</b:widget-setting>
      <b:widget-setting name='showShareButtons'>true</b:widget-setting>
      <b:widget-setting name='authorLabel'>By</b:widget-setting>
      <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
      <b:widget-setting name='timestampLabel'>-</b:widget-setting>
      <b:widget-setting name='reactionsLabel'/>
      <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
      <b:widget-setting name='style.layout'>468x60</b:widget-setting>
      <b:widget-setting name='showLocation'>false</b:widget-setting>
      <b:widget-setting name='showTimestamp'>false</b:widget-setting>
      <b:widget-setting name='postsPerAd'>3</b:widget-setting>
      <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='showCommentLink'>true</b:widget-setting>
      <b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='postLocationLabel'>Location:</b:widget-setting>
      <b:widget-setting name='showAuthor'>false</b:widget-setting>
      <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
      <b:widget-setting name='showLabels'>true</b:widget-setting>
      <b:widget-setting name='postLabelsLabel'>カテゴリ</b:widget-setting>
      <b:widget-setting name='showBacklinks'>false</b:widget-setting>
      <b:widget-setting name='showInlineAds'>true</b:widget-setting>
      <b:widget-setting name='showReactions'>false</b:widget-setting>
    </b:widget-settings>

    <b:includable id='main'>
      <b:switch var='data:blog.pageType'>
        <b:case value='index'/>
          <b:if cond='data:blog.searchQuery'>
            # 検索結果
            <b:loop var='post' values='data:posts'>
              <b:include name='articles' />
            </b:loop>

          <b:elseif cond='data:blog.searchLabel'/>
            # ラベル検索結果
            <b:loop var='post' values='data:posts'>
              <b:include name='articles' />
            </b:loop>

          <b:else/>
            <script>document.body.setAttribute('data-style','articles')</script>
            <b:include name='articles' />

          </b:if>
        <b:case value='item'/>
          <script>document.body.setAttribute('data-style','article')</script>
          <b:include name='article' />

        <b:case value='static_page'/>
          <b:include name='article' />

        <b:default/>
          <b:if cond='data:blog.url == data:view.url path "//static"'>
            <h2>固定ページ一覧(js)</h2>
            <ul id='item_lists'></ul>
            <b:include name='js_statics' />

          <b:elseif cond='data:blog.url == data:blog.url path "//blog"'/>
            <h2>ブログ一覧(js)</h2>
            <ul id='item_lists'></ul>
            <b:include name='js_blogs' />


          <b:else/>
            その他 : <data:blog.pageType/>
            <b:include name='articles' />
          </b:if>

      </b:switch>
    </b:includable>

    <b:includable id='articles'>
       <div class='grid'>
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.dateHeader'>
          <script style='display:none'>var dateHeader = '<data:post.dateHeader/>'</script>
          </b:if>

          <a expr:href='data:post.url'>
            <img expr:src='resizeImage(data:post.firstImageUrl,320,"1:1")' />
            <div class='title'><data:post.title/></div>
            <div class='labels'></div>
            <div class='date'><script>document.write(dateHeader)</script></div>
          </a>
        </b:loop>
      </div>
    </b:includable>

    <b:includable id='article'>
      <b:loop var='post' values='data:posts'>
        <b:if cond='data:post.dateHeader'>
        <script style='display:none'>var dateHeader = '<data:post.dateHeader/>'</script>
        </b:if>

        <article>
          <h1><data:post.title/></h1>
          <div class='published'><script>document.write(dateHeader)</script></div>
          <div class='labels'>
            <b:loop values='data:post.labels' var='label'>
              <a class='label-item' expr:href='data:label.url'><data:label.name/></a>
            </b:loop>
          </div>
          <div class='blog-body'><data:post.body/></div>
        </article>
      </b:loop>
    </b:includable>

    <b:includable id='js_blogs'>
<script>/*<![CDATA[*/
feed('/feeds/posts/default?alt=json&max-results=10&callback=item_lists')
/*]]>*/</script>
    </b:includable>

    <b:includable id='js_statics'>
<script>/*<![CDATA[*/
feed('/feeds/pages/default?alt=json&max-results=10&callback=item_lists')
/*]]>*/</script>
    </b:includable>

  </b:widget>
</b:section>
</main>

<footer>
  <nav style='display:none;'>
    <ul>
      <li><a href='/company/'>会社概要</a></li>
      <li><a href='/kiyaku/'>利用規約</a></li>
      <li><a href='/privacy/'>プライバシーポリシー</a></li>
      <li><a href='/security/'>セキュリティポリシー</a></li>
    </ul>
  </nav>
  <div class='copy'>© 2017 Copyright © MYNT, Inc. All Rights Reserved.</div>
</footer>
</body></html>

カンタンBlogger学習 #06 ヘッダメニューのウィジェット化

ウィジェットとは？

ウィジェット搭載ソースコード

ガジェットtype一覧

ページ : PageList

注目の投稿 : FeaturedPost

ブログ検索 : BlogSearch

HTML / Javascript : HTML

自己紹介 : Profile

ブログアーカイブ : BlogArchive

フォロワー : Followers

画像 : Image

ラベル : Label

リンクリスト : LinkList

テキスト : Text

人気の投稿 : PopularPosts

ブログの統計情報 : Stats

ブログリスト : BlogList

フィード : Feed

ロゴ : BloggerButton

登録用リンク : Subscribe

翻訳 : Translate

リスト : TextList

連絡フォーム : ContactForm

ウィキペディア : Wikipedia

帰属 : Attribution

不正行為の報告 : ReportAbuse

今回完成したソースコード

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログアーカイブ

ラベル

カンタンBlogger学習 #06 ヘッダメニューのウィジェット化

ウィジェットとは？

ウィジェット搭載ソースコード

ガジェットtype一覧

ページ : PageList

注目の投稿 : FeaturedPost

ブログ検索 : BlogSearch

HTML / Javascript : HTML

自己紹介 : Profile

ブログアーカイブ : BlogArchive

フォロワー : Followers

画像 : Image

ラベル : Label

リンクリスト : LinkList

テキスト : Text

人気の投稿 : PopularPosts

ブログの統計情報 : Stats

ブログリスト : BlogList

フィード : Feed

ロゴ : BloggerButton

登録用リンク : Subscribe

翻訳 : Translate

リスト : TextList

連絡フォーム : ContactForm

ウィキペディア : Wikipedia

帰属 : Attribution

不正行為の報告 : ReportAbuse

今回完成したソースコード

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログ アーカイブ

ラベル

ブログアーカイブ