カンタンBlogger学習 #05 Gridデザインのテーマ作成

2023年2月23日

GoogleBlogger 学習 特集

eyecatch これまででBloggerの基本的な構造が理解できたので、実際にBloggerシステムを使ったWebページを作ってみたいと思います。 今回の目標は、トップページでGridデザイン方式のタイル形式に画像が並ぶ表示にして、それぞれの記事ページを表示するところまで作る予定です。 ちなみに、ホームページで必要なトップページナビゲーションメニューとフッタも同時に完備して、簡易なホームページを完成させたいと思います。

ヘッダ・フッタの作成

ホームページを作る時に、ナメてはいけないのが、ヘッダとフッタのです。 ヘッダは、webマーケテイングでは、「ファーストビュー(First View)」と言われて、いわゆるホームページを開いた時に一番最初に表示される重要な位置にあります。 ここをちゃんと丁寧に作っておかないと、どんなにキレイなwebサイトを作ったとしても、使いづらいホームページと認識されてしまうんですよね。

ヘッダのソースコード

<!--<< sample用 --> <meta charset='UTF-8'/> <link rel='stylesheet' href='header.css' /> <!-- sample用 >>--> <header> <div class='title'>ブログタイトル</div> <nav> <input id='menu_toggle' type='checkbox' style='display:none;'/> <ul> <li><a href='/'>Home</a></li> <li><a href='/service/'>Service</a></li> <li><a href='/contact/'>Contact</a></li> </ul> <label for='menu_toggle'> <span></span> <span></span> <span></span> </label> </nav> </header> 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 nav{ margin-left:auto; } header nav *{ font-size:0.8rem; line-height:32px; } header nav > ul{ display:flex; align-items:center; gap:10px; } header ul, header ol, header li{ list-style:none; margin:0; padding:0; }

ヘッダの表示確認

フッタのソースコード

<!--<< sample用 --> <meta charset='UTF-8'/> <link rel='stylesheet' href='footer.css' /> <!-- sample用 >>--> <footer> <nav> <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> footer{ background-color : var(--color-1); height:100px; padding:10px 20px; } footer *{ 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; } footer ul, footer ol, footer li{ list-style:none; margin:0; padding:0; }

フッタの表示確認

Grid(トップページ)のHTML作成

Grid部分のソースコード

<!--<< sample用 --> <meta charset='UTF-8'/> <link rel='stylesheet' href='top.css' /> <!-- sample用 >>--> <main class='contents'> <div class='grid'> <a href='javascript:void(0)'> <img src='img/sample-1.jpg'/> <div class='title'>Grid表示テスト</div> <div class='date'>2023年1月1日</div> </a> <a href='javascript:void(0)'> <img src='img/sample-1.jpg'/> <div class='title'>ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> <div class='labels'></div> <div class='date'>2023年2月2日</div> </a> <a href='javascript:void(0)'> <img src='img/sample-2.jpg'/> <div class='title'>あいうえおかきくけこさしすせそたちつてとなにぬねの</div> <div class='date'>2023年3月3日</div> </a> <a href='javascript:void(0)'> <img src='img/sample-3.jpg'/> <div class='title'>祇園精舎鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。</div> <div class='date'>2023年4月4日</div> </a> </div> </main> 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:#5ED7F2; } 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; } main .grid a{ text-decoration:none; } @media (max-width:409px){ main .grid{ width:100%; grid-template-columns: 1fr; } } @media (min-width:410px){ main .grid{ width:390px; grid-template-columns: 1fr 1fr; } } @media (min-width:620px){ main .grid{ width:600px; grid-template-columns: 1fr 1fr 1fr; } } @media (min-width:830px){ main .grid{ width:810px; grid-template-columns: 1fr 1fr 1fr 1fr; } } @media (min-width:1040px){ main .grid{ width:1020px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } *, *:before, *:after { -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -o-box-sizing : border-box; -ms-box-sizing : border-box; box-sizing : border-box; }

Gtip(top)の表示確認

記事ページの作成

<!--<< sample用 --> <meta charset='UTF-8'/> <link rel='stylesheet' href='article.css' /> <!-- sample用 >>--> <main> <article> <h1>file_get_contentsでPOSTリクエスト送信</h1> <div class='published'>2023年2月2日</div> <div class='labels'> <a class="label-item" href="https://blog.myntinc.com/search/label/Javascript">Javascript</a> <a class="label-item" href="https://blog.myntinc.com/search/label/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</a> <a class="label-item" href="https://blog.myntinc.com/search/label/%E5%AD%A6%E7%BF%92">学習</a> </div> <div class='blog-body'><img alt="" border="0" data-original-height="768" data-original-width="1280" src="" style='width:100%;height:300px;background-color:#5ED7F2;'> <h2>ソースコード</h2> https://example.com/sample.php?mode=test&amp;id=001 <code>function post_access($url=null , $queries=array()){ if(!$url){return;} $query = http_build_query($queries, "", "&amp;"); $options = array( 'http' =&gt; array( 'method' =&gt; 'POST', 'header' =&gt; 'Content-Type: application/x-www-form-urlencoded', 'content' =&gt; $query, ) ); $context = stream_context_create($options); return file_get_contents($url , false , $context); }</code> <h3>実行</h3> <code>$queries = array( 'mode' =&gt; test, 'id' =&gt; 001, ); post_access('https://example.com/sample.php' , array());</code></div> </article> </main> 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: #80e2a5; color:white; padding:5px 10px; font-size:0.8rem; margin:3px; border-radius:4px; text-decoration:none; } main article .labels > *:hover{ color:#eee; } main article .blog-body, main article .blog-body *{ white-space:pre-wrap; word-break:break-all; } main img{ max-width:100%; } *, *:before, *:after { -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -o-box-sizing : border-box; -ms-box-sizing : border-box; box-sizing : border-box; } 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; } 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: #80e2a5; color: #ffffff; } h3{ font-size: 1.4rem; padding: 5px 0; line-height: 1.1; border-bottom: solid 2px #80e2a5; }

記事ページの表示確認

※記事の内容はサンプル用です。

テーマ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{ } /* 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 nav{ margin-left:auto; } header nav *{ font-size:0.8rem; line-height:32px; } header nav > ul{ display:flex; align-items:center; gap:10px; } /* 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> <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> <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> 今回作ったHTMLパーツとこれまで学習したBlogger用のページ切り分けを使って、xmlを構築してみました。 ヘッダ部分とフッタ部分のリンクリストは、今の所、固定で書き込んでいますが、次回はこれをウィゲット対応させてみたいと思います。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。