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

    Bloggerのテーマを自作する④記事の一覧を表示する

    　


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

    「Bloggerのテーマを自作する」ということで進めてきましたが、今回でやっと、それっぽくなって来ます。

    今回は、Bloggerのトップに表示される「記事の一覧」を作っていきます。
    サイトによって作り方やデザインが異なりますが、今回作るのか下のイメージです。



    記事の一覧が「画像」と「記事タイトル」と「テキストの一部」で構成されています。

    右側にはサイドバーが表示されていますが、この部分はまた後の機会に作り込んでいきますので、まずが一覧の部分を組み立てていきましょう。

    レイアウトを決める

    まずは、レイアウトを決めていきます。作り慣れている人であれば、自然と組み立てられるのですが、経験が浅いとなかなかそうもいきません。

    これを書いている本人も、普段はGoogleサイトを使っているので、秘本的に考えません。
    しかし、そうも言っていられないので、簡単にレイアウトを作ってみました、

    ざっくり、このようなカタチです。できるだけ、レイアウト枠<div>もシンプルにしています。
    これができれば、レイアウト枠を入れる→Bloggerのパーツを入れる、で作れるのですが、今のままではBloggerのパーツが上手に呼び出せません。（最初は、原因がわからず数時間を溶かしました...）

    そこで、コードを最初から見直しながら進めていきます。

    コードを書く

    最初に、今回の全体コードを入れておきます。70行近いコードです
    <?xml version="1.0" encoding="UTF-8" ?>
<!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>
 <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>
 <!--Import Google Icon Font-->
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
 <!--Let browser know website is optimized for mobile-->
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
 <body>
 <div id="main" class="container" >
 <div id="header" class="row" style="text-align: center">
 <b:section id='header'>
 <b:widget id='Header0' type='Header' >
 <b:includable id='main'>
 <h1><data:blog.pageTitle/></h1>
 </b:includable><!--end title-->
 </b:widget><!--end Header-->
 </b:section><!--end main-->
 </div><!--end header-->
 
 <div id="contents" class="row">
 <div id="posts" class="col s12 l8">
 <b:section id='posts'>
 <b:widget id='Blog0' type='Blog'>
 <b:includable id='main'>
 <ul>
 <b:loop values='data:posts' var='post' >
 <b:include name='PostList' data='post' />
 </b:loop>
 </ul>
 </b:includable > <!--end list_post-->
 <b:includable id='PostList' var='post'>
 <div class="row">
 <li style="border-top: lightslategrey; border-top-style: solid; border-top-width: 1px;">
 <b:if cond='data:post.firstImageUrl'>
 <div class="col s12 l3" style="width: 130px ; height: 130px;">
 <img expr:src='data:post.firstImageUrl' style="height: 110px; width: 110px; object-fit: cover; margin: 10px;"/>
 </div> 
 <b:else/>
 <div class="col s12 l3" style="width: 110px ; height: 110px; background-color: darkgray; margin: 10px;">
 <p>Noimage</p>
 </div>
 </b:if>
 <div class="col s12 l9" >
 <h5><data:post.title/></h5>
 <b:eval expr='data:post.body snippet{length: 20, links: false, linebreaks: false}'/>
 </div>
 </li>
 </div>
 </b:includable> <!--end Show_Post--> 
 </b:widget><!--end Blog0-->
 </b:section><!--end list_post-->
 </div><!--end l_post-->
 <div id="side" class="col s12 l4" style="border-color: tomato; border-style:solid ;border-width:1px; " >
 <p>サイドバー</p>
 </div><!--end side-->
 </div><!--end content-->
 </div> <!--end main-->
 </body>
</html>
    では、上からコードを見ていきましょう。
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    ここはXMLと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'>
    続いて、Bloggerの基本情報を読み込ませるのですが、このなかの「expr:dir=」と「expr:lang=」が大切。これを入れておかないと画像やテキストが表示されないという不具合が発生します。（数時間を溶かした原因）

    <haed>

    では、<haed>の部分を見ていきます。
    <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>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    ここで、スタイルシートを読み込んでいます。読み込んでいる内容は、今回使用しているCSSフレーム「Materialize」のマニュアル通りにしています。

    <body>

    ここからBloggerでホームページを作るメイン部分になります。最初に大枠を作ります。
    <div id="main" class="container" >
    この中にすべてのコンテンツを収めていきます、最初にヘッダーを設置する部分。
    <div id="header" class="row" style="text-align: center">
        <b:section id='header'>
        <b:widget id='Header0' type='Header' >
        <b:includable id='main'>
            <h1><data:blog.pageTitle/></h1>
        </b:includable><!--end title-->
        </b:widget><!--end Header-->
        </b:section><!--end main-->
    </div><!--end header-->
    ここで、コードを書くときのワンポイント。
    <b:section id='  '>
    <b:widget id='  ' type='  ' >
    <b:includable id='main'>　※widget1つにつき、必ず1つはmainにする
    </b:includable><!--end title-->
    </b:widget><!--end Header-->
    </b:section><!--end main-->
    「session」「widget」「includable」は3つでセットで、Bloggerでホームページを作るのに必要な空のテーマの基本になります。

    上のコードではブログタイトルを入れるだけですが、この7行が必要になります。

    続いて、メインエリア（記事一覧の表示箇所）とサイドバーエリアを作っていきます。

    まず、メインエリアとサイドバーエリアを入れる枠をつくります。
    <div id="contents" class="row">
    ここでclassというのが出てきますが、これはCSSのスタイルを適用するときに使用します。
    利用するCSSによって記述は変わりますが、ここでは、最初に作った大枠いっぱいいっぱい幅の幅にしますよ。と指示していることになります。

    続いて、メインエリアの枠を作成します。
    <div id="posts" class="col s12 l8">
    ここでもclassで幅の設定をしています。詳しくは公式をご確認いただきたいのですが、全体の幅を12分割したうちの、指定の割合の幅のレイアウト枠を作ることができます。これによって、ブラウザの幅が変わってもレイアウトが崩れにくくなるというわけです。

    また、スマホ・タブレット・パソコンで割合を変えられるというのもメリットです。

    <b:section id='posts'>
    <b:widget id='Blog0' type='Blog'>
    <b:includable id='main'>
    続いて、記事一覧を表示するための準備をしています。
    <b:widget id='Blog0' type='Blog'>もこのまま入れるようにしましょう。（オリジナルにしたくて、idを適当に変更すると正常に動かない原因になります。）
    <ul>
        <b:loop values='data:posts' var='post' >
    	<b:include name='PostList' data='post' />
        </b:loop>
    </ul>
    </b:includable > <!--end list_post-->
    実際に、記事を表示する部分です。loopで表示する記事の件数分繰り返しされます。
    今回は、ひと記事ごとにレイアウト枠に入れるのですが、それをリストにしています。
    そのため<ul>と使っています。

    処理の内容は<b:include name='PostList' data='post' />で別の所に書きます。（これでコードがごちゃごちゃにならない）
    ここで一旦、</b:includable > で閉じて、ジャンプ先の処理を書きます。
    <b:includable id='PostList' var='post'>
    ジャンプ先はこのように書きます。nameとid、dataとvarをあわせるのをお間違いなく。
    続いて、記事ごとの枠を作っています
    <div class="row">
    メインエリアの横幅いっぱいの枠です。この中にリストの入れていきます。
    <li style="border-top: lightslategrey; border-top-style: solid; border-top-width: 1px;">
    コードが長くなっていますが、ほとんどがデザインに関連する内容なので<li>だけでも大丈夫です。参考までに、例ではリストの上に、1px幅のグレー実線を入れています。
    <b:if cond='data:post.firstImageUrl'>
    <div class="col s12 l3" style="width: 130px ; height: 130px;">
    <img expr:src='data:post.firstImageUrl' style="height: 110px; width: 110px; object-fit: cover; margin: 10px;"/>
</div> 
<b:else/>
    <div class="col s12 l3" style="width: 110px ; height: 110px; background-color: darkgray; margin: 10px;">
    <p>Noimage</p>
    </div>
</b:if>
<div class="col s12 l9" >
<h5><data:post.title/></h5>
<b:eval expr='data:post.body snippet{length: 20, links: false, linebreaks: false}'/>
							</div>
    続いて、各記事の一番最初に入っている画像を表示する部分です。
    まず、<b:if>で記事内に画像があるかの確認をしています。

    画像があれば、画像を入れる枠を作ってその中に画像を入れてあげます。今回は、画像のサイズがランダムのため、画像を入れる枠の大きさや余白を固定しておきました。

    画像を呼び出すときには「expr:src='data:post.firstImageUrl'」を使います。これで画像のURLを呼び出すことができます。(exprは投稿のデータを抜き出すのに使用するタグらしく、このあとにも登場します。）

    <b:else/>で画像がなかったときの処理をしています。枠を作って、グレーに塗りつぶしてから<p>でNoimageのテキストを表示です。

    <b:if>関連のコードが終わったら「/b:if」で閉じてあげます。
    <div class="col s12 l9" >
        <h5><data:post.title/></h5>
        <b:eval expr='data:post.body snippet{length: 20, links: false, linebreaks: false}'/>
    </div>
    続いて、記事のタイトルと記事のテキストの一部を表示する部分です。ここも枠を作ってあげてから、<h5>でくくって記事のタイトル<data:post.title/>を設置しています。
    次の行では記事のテキストを設置するのですが、ここで加工をしています。

    「data:post.body」でも表示はできますが、記事全体が表示されてしまいます。
    そこで、<b:eval expr='data:post.body snippetを入れて、続きのところで、抜き出す範囲などを決めています。
    今回あれば「length: 20,」で記事の最初から20文字。それ以外はいらないよ・としています。
    					</div>
    				</b:includable> <!--end Show_Post-->				
    				</b:widget><!--end Blog0-->
    				</b:section><!--end list_post-->
    				</div><!--end l_post-->
    				<div id="side" class="col s12 l4" style="border-color: tomato; border-style:solid ;border-width:1px; " >
    		    	 	<p>サイドバー</p>
    		    	</div><!--end side-->
    		    </div><!--end content-->
    		</div> <!--end main-->
    	</body>
    </html>
    あとは、各タグを＜/＞で閉じています。

    途中で、おまけ程度ですが「サイドバー」のエリアも作っています。