2021年12月21日火曜日

[Blogger]Skeleton Template

まぁ今のままでもある程度の物は作れると思うんだけど、テンプレートのバージョンを上げたいんだよねぇという事で、
こちらのコードを少し変更して試してみた
Blogger Template Boilerplate / Skeleton Code
https://www.softwebtuts.com/2020/12/blogger-template-boilerplate.html
<!DOCTYPE html>
<html
	b:defaultwidgetversion="2"
	b:layoutsVersion="3"
	b:responsive="true"
	b:templateVersion="1.3.3"
	b:templateUrl='indie.xml'
	expr:class="data:blog.languageDirection"
	expr:dir="data:blog.languageDirection"
	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" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title><data:view.title.escaped/></title>
		<b:skin version='1.3.3'>
			<![CDATA[
			/* ------------------
			Template Name:
			Template Name Template URL: Template-URL
			Author: Author
			
			------------------ */
			<!-- Variable definitions -->
			<Group description="Default Customization Vars">
                 <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
                 <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
                 <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
                 <Variable name="body.text.font" description="1" type="font" default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
                 <Variable name="posts.background.color" description="2" type="color" default="#fff" value="#ffffff"/>
                 <Variable name="body.link.color" description="3" type="color" default="#008c5f" value="#008c5f"/>
                 <Variable name="body.link.visited.color" description="4" type="color" default="#008c5f" value="#008c5f"/>
                 <Variable name="body.link.hover.color" description="5" type="color" default="#1d2129" value="#1d2129"/>
                 <Variable name="blog.title.font" description="6" type="font" default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
                 <Variable name="blog.title.color" description="7" type="color" default="#fff" value="#ffffff"/>
                 <Variable name="header.icons.color" description="8" type="color" default="#fff" value="#ffffff"/>
                 <Variable name="tabs.font" description="9" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
                 <Variable name="tabs.color" description="10" type="color" default="#ccc" value="#cccccc"/>
                 <Variable name="tabs.selected.color" description="11" type="color" default="#fff" value="#ffffff"/>
                 <Variable name="tabs.overflow.background.color" description="12" type="color" default="#fff" value="#ffffff"/>
                 <Variable name="tabs.overflow.color" description="13" type="color" default="$(body.text.color)" value="#1d2129"/>
                 <Variable name="tabs.overflow.selected.color" description="14" type="color" default="$(body.text.color)" value="#1d2129"/>
                 <Variable name="posts.title.color" description="15" type="color" default="$(body.text.color)" value="#1d2129"/>
                 <Variable name="posts.title.font" description="16" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
                 <Variable name="posts.text.font" description="17" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
                 <Variable name="posts.text.color" description="18" type="color" default="$(body.text.color)" value="#1d2129"/>
                 <Variable name="posts.icons.color" description="19" type="color" default="$(body.text.color)" value="#6c6f74"/>
                 <Variable name="labels.background.color" description="20" type="color" default="#008c5f" value="#008c5f"/>
			</Group>
			
			/* Your Style Code Starts Here */
			.container{width: 100%;}
			]]>
			</b:skin>
	</head>
	<body>
		<div class="container">
			<header class="header-area">
				<b:section id="header" class="header" showaddelement="yes" name="HEADER" maxwidgets="3" />
			</header>
 
			<main class="main">
				<b:section id="main" class="main" showaddelement="yes" name="MAIN">
					<b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog"/>
				</b:section>
			</main>
 
			<aside class="sidebar">
				<b:section id="sidebar" class="sidebar" showaddelement="yes" name="SIDEBAR" maxwidgets="3" />
			</aside>
 
			<footer class="footer">
				<b:section id="footer" class="footer" showaddelement="yes" name="FOOTER" maxwidgets="3" />
			</footer>
		</div>
	</body>
</html>
利いてるかわからないですが1.3.3上げ、タイトルタグの部分を変更
indie.xml の部分はBloggerの新しいレスポンシブ対応の公式テンプレートによって異なる部分なので削除しても構わないかも

とりあえずいつものブログでテスト
本当に骸骨ですが
レイアウトで目玉が出てるし、投稿部分のコードも違う様
コメントも新しいコメントフォームだ
(前のを使う場合は同じ方のコードですがこっち)
Blogger Template Boilerplate / Skeleton Code - DEV Community
https://dev.to/muzammil/blogger-template-boilerplate-skeleton-code-42f7

ちょっと不明な部分もありますが、これに味付けしていけばできるかも

F(uriouz)

欲しいものリスト
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

コメントを投稿

スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。

注: コメントを投稿できるのは、このブログのメンバーだけです。

Recent Posts

 
"The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License."