公開日：5/12/2020
    シェア：

    Bloggerのテーマを自作する③ヘッダーを設置する

    　

    この記事は更新されていますので、下のリンクをご確認ください

    Bloggerで「空のテーマ」をつくったときに、ヘッダーを設置しましたが、今回は、改めてヘッダーをつくっていきます。
    HTMLコードの勉強も兼ねて、一個ずつ作っていきましょう、

    外枠をつくる

    <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' 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>
	<title><data:blog.pageTitle/></title>
	<b:skin></b:skin>
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
	<!-- Compiled and minified JavaScript -->
	<script src="materialize.min.js"></script>
	</head>
	<body>
		<div id="main" class="container" >
			<div id="header_row" class="row">
			    <div id="title" class="col s12" style="text-align: center">
			    </div><!--title-->
		    </div><!--header-->
		</div> <!--main-->
	</body>
</html>
    <div>でレイアウト枠をつくります。今回は「Materialize」を使っているので、classでいろいろなサイズを作れます。

    このとき、<div id="title" class="col s12">に、style="text-align: center"を入れて、中に入れたパーツが中央に来るようにしています、

    Bloggerのパーツを入れる


    続いて、Bloggerのパーツをいれます。今回入れるのは「ブログのタイトル」です。
    コードは、以前に使った
    <b:section id='s_Header'>
        <b:widget type='Header' id='Header0'>
        <b:includable id='title'>
    	<h1><data:blog.pageTitle/></h1>
        </b:includable><!--title-->
        </b:widget><!--Header-->
    </b:section><!--main-->
    を入れます。
    では、ここまでのコードを入れてプレビューを見てみましょう。
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' 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>
    	<title><data:blog.pageTitle/></title>
    	<b:skin></b:skin>
    	<!-- Compiled and minified CSS -->
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
    	<!-- Compiled and minified JavaScript -->
    	<script src="materialize.min.js"></script>
    	</head>
    	<body>
    		<div id="main" class="container" >
    			<div id="header_row" class="row">
    			    <div id="title" class="col s12" style="text-align: center">
    			    	<b:section id='s_Header'>
    					<b:widget type='Header' id='Header0'>
    					<b:includable id='title'>
    						 	<h1><data:blog.pageTitle/></h1>
    					</b:includable><!--title-->
    					</b:widget><!--Header-->
    					</b:section><!--main-->
    				</div><!--title-->
    		    </div><!--header-->
    		</div> <!--main-->
    	</body>
    </html>
    プレビューをするとブログタイトルが中央に表示されるのを確認できると思います。