第二回目のデザイン変更開始
このブログのデザインは、ついこの前変更したばかりと思っていたが、早いもので、前回の変更して以降、約2年の歳月が経過していた。この間、幾つかの不具合を黙認し続けてきたが、やはり修正しようと思い立った。だが、修正にも労力を要するので、同じ修正なら、併せてデザインも変更することにした。GoogleのサービスであるBloggerは、ネット上にたくさんある「テンプレート」をダウンロードしてきて、自分のブログに適用させれば、あっという間にデザインが変更される。
テンプレート決定
海外テンプレート問題
だが、ネット上で見つかるイケてるテンプレートは、ほぼ海外製であり、異なる文化での使用を前提としていて、日本語又は日本の日付表示文化に対応していない。これを修正するためには、多くの場合、テンプレート上の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等をいじって細かな設定をしていけばよい。
0 コメント:
コメントを投稿