image1 image2 image3 image4 image5

Welcome To WILD LIFE|We Love The Outdoors|Enjoy The Beautiful Nature With Us

ブログ「Wild Life」リニューアルPart2

第二回目のデザイン変更開始

このブログのデザインは、ついこの前変更したばかりと思っていたが、早いもので、前回の変更して以降、約2年の歳月が経過していた。
この間、幾つかの不具合を黙認し続けてきたが、やはり修正しようと思い立った。だが、修正にも労力を要するので、同じ修正なら、併せてデザインも変更することにした。GoogleのサービスであるBloggerは、ネット上にたくさんある「テンプレート」をダウンロードしてきて、自分のブログに適用させれば、あっという間にデザインが変更される。

テンプレート決定

早速、ネット上で検索し物色していると、「Memento Creative」という最高にフェミニンなデザインのテンプレートに出会った。Wild Lifeというタイトルには全く似つかわしくないデザインであるが、逆に野生感溢れる雄々しいデザインで、イケてるテンプレートは中々存在しない。必要なことは、インパクトがあり、スッキリとしたデザインで、必要な機能が組み込まれ、SEO対策もそれなりに施してあればよいのだ。

海外テンプレート問題

だが、ネット上で見つかるイケてるテンプレートは、ほぼ海外製であり、異なる文化での使用を前提としていて、日本語又は日本の日付表示文化に対応していない。
これを修正するためには、多くの場合、テンプレート上のJavaScriptを修正することとなるが、そのコードの場所を特定し、解析し、該当コードを修正していく作業は、素人には困難を極める作業だ。

機能修正

概要表示部分の修正

まず、表示されるWebページから、問題となる箇所のタグを確認し、そのタグのID又はClassを確認し、その付近のJavaScript関数の呼び出しを確認し、その関数の呼び出しもとを探し、その関数を解析し、問題となる箇所を特定、修正する。
このテンプレートで言えば、7416行で呼び出している「createSummaryAndThumb」という関数を修正するのだが、呼び出し元が難読化されているので、まずはこれを復元し、置き換える必要がある。
そして、投稿概要の出力において、アルファベット文化を元に設計されている、半角スペース60個分、要は60個の単語を出力されることとなっている部分を、「。」三つ分で出力するように変更し、ついでに、h2以降のタイトルは省略するように改変する。
続いて、月日年の順に表示される日付を、年月日の順に改変する。
なお、ここの修正に関しては、わざわざコードが難読化されていた部分なので、詳細な説明は省略させてもらう。

スライダーの表示崩れ問題の修正

トップページを表示した場合は、ローディング画面が表示され問題ないが、ラベルを指定して表示(URLに「/search/label/ラベル名」を追加した場合)させる際には、スライダーが表示されるにもかかわらず、ローディング画面が表示されないため、スライダー画像の崩れが見られ、みっともない。
これを回避するために、6174行以降で、純粋なトップ画面の時だけローディング画面を表示するようにされている部分を修正する。この修正は、Blogger特有のXMLタグの修正だ。
(修正前)
<b:if cond="data:blog.url == data:blog.homepageUrl">
 <div class="site-loader">
  <div class="spinner">
   <div class="dot1">
    <div class="dot2">
    </div>
   </div>
  </div>
 </div>
</b:if>
(修正後)
<b:if cond="data:blog.pageType != "item"">
 <b:if cond="data:blog.pageType != "static_page"">
  <div class="site-loader">
   <div class="spinner">
    <div class="dot1">
     <div class="dot2">
     </div>
    </div>
   </div>
  </div>
 </b:if>
</b:if>

スマホのページナビ問題の修正

ページナビがスマートフォンで表示した場合に機能しない問題があるので、7197行の「pageNavi」JavaScript関数を修正する。
コードは一行に纏められているので分かりにくいが、そのうち、次の部分を改変する。
(修正前)
f = encodeURIComponent(f);
if (m.indexOf(f) != -1) {
 n = d
}
(修正後)
f = encodeURIComponent(f);
mblf = f.replace(/%3A/g, ":");
if (m.indexOf(f) != -1 || m.indexOf(mblf) != -1) {
 n = d
}

デザイン修正

基本的な事項は、ダウンロードしたテンプレートのフォルダ内にある「Documentation」を読めば大体わかると思う。
後は、自分の好みに合わせて、CSS等をいじって細かな設定をしていけばよい。

終わりに

テンプレートをダウンロードしてきて、修正し、適用するだけだが、約一週間、延べ4日くらいの時間を要した。結構な労力だったが、過去になく完璧な仕上がりだ。

Share this:

CONVERSATION

0 コメント:

コメントを投稿

Wild Life. Powered by Blogger.