Tumblrのトップページに常に天気予報を表示するページを作る!

前回に引き続き、観光案内用にTumblrを使ったサイトをじわじわと作っています。当初は、「リンクを貼るのが楽だから」という理由でTumblrを選んだのですが、作り出すとあちこち凝りたくなってきて、結局ものすごい時間をかけております。

今回は、トップページに常に天気予報が表示される固定ページを作れないか、試してみました。


前回作った固定ページというのは、トップページのヘッダーのところにリンクが出るだけで、内容は表示されませんでした。つまり、トップページの上の方に常に表示しておきたい内容でも、新しい記事を投稿すると、どんどん下へ流れていってしまいます。

投稿日時を100年後ぐらいにしておけば、常にいちばん上に表示されるのでは?とも思いましたが、結局、実際に投稿した日時に書き換えられてしまって、うまくいきませんでした。

そこで、全く自信は無いのですが、おそるおそるHTMLとCSSをいじってみることにしました。

ちなみにテーマは、レスポンシブデザインで、カスタマイズ性が高いのがいいなと思ったので、Brickというのを使っています。
f:id:and-number-9318-42:20140203201342p:plain
このテーマには、About Boxというのが表示できるようになっています。ここには、ブログタイトルや、ブログの説明、SNSボタンが設置できます。そして、常にページの一番左上(スマートフォンなどでは一番上)に表示されます。
この、About Boxをもうひとつ設置すれば、常に上部に固定されるかも…というわけで、HTMLを観察してみます。

新たなページを準備する!

Tumblrのカスタマイズページから「HTMLを編集」を選択し、編集画面を開きます。
headタグの中に、

<head>
<meta charset="utf-8">

<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
 
<!--<link rel="alternate" type="application/rss+xml" href="{RSS}"> -->
<link rel="shortcut icon" href="{favicon}">

<meta name="viewport" content="width=device-width,user-scalable=yes">

<meta name="image:Background" content=""/>
<meta name="image:Cover" content=""/>
<meta name="image:Cover Logo" content=""/>
<meta name="image:Sidebar Portrait" content=""/>
<meta name="color:Background" content="#e9f4f8"/>
<meta name="color:Cover Overlay" content="#000000"/>
<meta name="color:Links" content="#1762af"/>

というかんじでmetaタグがずらずら並んでいますが、これがカスタマイズ画面の「デザイン設定」に対応しているのが分かります。
f:id:and-number-9318-42:20140203213511p:plain
ですので、この一番下に、

<meta name="if:About Box2" content="1"/>

と付け足しました。すると、
f:id:and-number-9318-42:20140203214010p:plain
ちゃんと出ました!

このAbout Box2と勝手に名付けたページを、本家About Boxの下に入れたいです。
HTMLの構造は、

<head>
  ...
</head>
<body>
  <div id="navigation">
    ヘッダー部分
  </div>

  <div id="posts-wrapper">
    投稿が表示される部分。背景画像はここに適用される。

    <div id="posts">
      {block:indexpage}
      {block:ifaboutbox}
        <div id="sidebar">
          ブログタイトルetc.
        </div>
      {/block:ifaboutbox}
      {/block:indexpage}

  この後、postなど…

となっていました。
とりあえず、indexpageタグの後に、About Box2を入れてみようと思いますので、{/block:indexpage}の下に、

{block:ifaboutbox2} 

{/block:ifaboutbox2} 

を入れます。

天気予報のRSSを表示させる!

About Box2には、一応観光情報サイトなので、天気予報を表示させたいと思います。トップページに天気予報が出ていたら便利です。きっと。

お天気情報は、日本気象協会tenki.jpというサイトのRSSを使わせていただきます。http://tenki.jp/webservice/rss/
RSSをサイトに表示させるには、Google Feed APIを使うのが良いようです。
Google Developers

  1. まず、↑こちらのページの The "Hello World" of Feed の下にあるコードをコピーして{block:ifaboutbox2} の中にペーストします。htmlタグとheadタグは消しました。
  2. 次に、以下のコードの中のurlをtenki.jpの任意の地方のRSSのページのurlに変更します。
function initialize() {
      var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
      feed.load(function(result) {

RSSを表示させるだけならこれで問題ないです。簡単です。でも、表示が崩れまくっているので、それを直さないといけません。

スタイルを整える!

CSSは、head内に記述されていたので、それを見たところ、投稿には.entryというクラスが指定されていることが分かりました。
また、About Box2にだけ適用させたいCSSがあったときのため、#feedというidを付けました。
ついでにタイトルも付けました。

{block:ifaboutbox2} 
    <div id="feed" class="entry">
<h2>WEATHER FORECAST</h2>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    ...

ところが、これでは下にくる普通の投稿とdiv要素が被ってしまうのです…。
f:id:and-number-9318-42:20140203224749p:plain
上の画像の綴りが間違ってますが気にしないでください…正しくはforecastです
ほんとは4日分の予報が表示されるのに、下のと被ってしまって、隙間もありません。これはどうしたものかと、おなじみGoogle Chromeの「要素の検証」を使ってコードとにらめっこした結果(3日ぐらい)、このテーマをレスポンシブにしているらしきMasonryというjQueryが原因な予感が…
f:id:and-number-9318-42:20140203225723p:plain
そこで、Google先生に「Masonry div」と打ち込んだところ、さっそく検索候補に「Masonry div overlap」と出ました。…。オーバーラップ…。皆さん同じことで悩んでおられたのですね…。

こちらのサイトを参考にさせていただきました。
どうやらMasonryは、サイト読み込み時に一度実行され、要素の高さなどが決定してしまうと、その後はアップロードされないので、後から画像などが読み込まれた際にはそれが切れたまま表示されてしまうようです。
今回の場合は、Google Feed APIを読み込む前にMasonryが実行されてしまうと、下のポストと重なるわけですね。
なぁんだ…。
というわけで、最初からCSSでdiv要素の高さを指定してしまうことにしました。

{block:ifaboutbox2} 
    <div id="feed" class="entry" style="height:170px;">
<h2>WEATHER FORECAST</h2>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    google.load("feeds", "1");

    function initialize() {
      var feed = new google.feeds.Feed("http://tenki.jp/component/static_api/rss/forecast/city_136.xml");
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement("div");
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
</div>
{/block:ifaboutbox2} 

最終的にこんなかんじになりました。
f:id:and-number-9318-42:20140203232045p:plain
これでどんどん記事を投稿しても、天気予報はいつも上の方に鎮座しておられるわけです!やった!

実はスマホから見ると、高さが指定されているので、余白が大きくなってしまうという微妙な問題があるのですが……それはまたレスポンシブデザインなどについて勉強してから考えようと思います…。


sponsored link






【その他の記事】





sponsored link