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>
