【Blogger】テンプレートSYLVAの感想を運営者から聞きました
筆者のごくごく身近のブロガーさんで、新しいテンプレートに着せ替えしたと聞きましたので、カスタマイズや感想等を記事にしたいと言って、少々(粘り強く？w)取材（メモさせた？）をさせて貰いましたwww
Sylva Blogger Template 、海外のDLページを見つける事ができ、リンクして置きました。筆者が以前の記事で紹介した事があるテンプレートサイトでした。参考記事を貼って置きますね。
このテンプレートは、A4ノートの場合、トップのスライド画像でモニター一杯になり、SNSアイコンより下の部分はスライドしないと見えません、フル画面を使ったデザインテンプレートでした。
全体のイメージを掴む為に、画面表示の比率を半分に縮小して、ハードコピーを取ってもらい、アイキャッチ画像にしました。トップ画像の水玉模様が素朴で素敵ですが、スライドで隠れて、殆ど見えないのが少々残念です。
記事一覧の横に、サイドバーが薄いピンク色で並んでいるのも、主張しすぎない雅があり、SNSボタンだけ色鮮やかにアクセントを利かせているのも、日本女子的な感覚にぴったり来ます。
気になるユーザービリティ
SNS ボタンは画像の通りですが、筆者はその半分に絞りたい気持ちです。飾りとして置くようなしろものでもないので、殆どが海外のSNSですし、日本ではあまり使われません。初見では、メニューと右上の SNS アイコンが小さすぎると感じました、スライド画像が余りにも大きい事による対比のせいかも知れません。サイドバーにはカラーフルなSNSボタンがあるので、良く見ればバランスが良いかも知れません。
本文の文字が少し小さいので改善した方が良いように思います。目の疲れは現代病ですので、目の負担を減らす事自体がユーザービリティでもあります。この辺は好みでカスタマイズできますので、特に問題となる事はありません。
パンくずはしっかりありました。う～ん、関連記事のガジェットがないですね～
Blogger の標準ガジェットにも関連記事ガジェットはないんですよね、Popular 記事のガジェットはあるけど、関連記事ガジェットは外付けしょうと思えば、できない事はないですが、手間がかかります。でも、概ね使えるテンプレートではあるので、選択肢の一つとしては有効です。
ここからは、ブログ管理人が好む範囲内のカスタマイズについて、解説して行きましょう。
既存のads枠を取り除きます
大きなスライドショー画像と記事一覧の間に、横長の ads 枠があります。海外テンプレートで SEO 対策済みとして公開されたテンプレートには、大方 ads 枠を CSS で設定してあります。SEO＝ads 的な？感覚ですかね～しかし今の ads は自動広告があり、それに横長よりも、タングルと言って、四角いに近い広告枠が日本では殆どですので、個人の好みの問題ですが、管理人さんは上記の枠を消しました。CSSは触ると面倒な事になり兼ねませんので、HTMLの該当部分を <!-- と --> で囲んで、非コード化にしたそうです。
これは、とても賢いカスタマイズ方法だと思います。カスタマイズする場合、事前にバックアップを取るのが常識ですが、そのバックアップ作業、カスタマイズに夢中で忘れる事はありませんか？思いっきり削除した場合は、大概後悔する事が多いものです。
<!-- と --> なら後悔を防ぐことができます。読み込みスピードにもそんなに影響はしませんし、カスタマイズ後安定運営が確認されてから、削除したいと思った時には、目印があるから、コードも見つけ易い、一石二鳥です。
HTML編集画面を開いて入り、「CTRL＋F」で検索窓を開け、「id='home-ad'」を入力して、コードを検索します。見つけたら、該当コードを <!-- と --> で囲みます。参考画像を下記載せておきます。
後部「showaddelement='yes'/」の 'yes' を 'no' に変えても、同じ効果を得ることは出来ますが、先ほど言ったように、 <!-- と --> で囲みますと、後に目印となりますから、この方法がお薦めです。
本文の表示フォントを見易いサイズにしましょう
ブログユーザーの年齢層は Google Analytics でデータ化されたグラフを見る事が出来ます。大体25～54歳の方達ですが、25歳以下の場合は落ち着いたブログでスキルを上げるよりも、SNSでワイワイが楽しい世代です。55以上の方達はどうでしょう、筆者の母に聞くと、文字を追うのが、目の神経が疲れてかなわん、との事です。なので、画像や写真を多めに使い、文字サイズを大きくし、行間隔も広く開けると、落ち着いたユーザーも増えると思います。
そして、現代の視力問題は、もはや年配の方たちの問題だけではありません。スマホ世代に平均的に表れている大きな問題です。筆者の子供もそうですが、せめて家にいる間は画面の大きいパソコンを使いなさいと、日々言っております。
HTML編集画面で「.post-bdy」でコードを検索し、フォントサイズと行間を変更しましょう。下記は参考画像です。
フォントの指定は CSS の塊の中にあるので、検索しないと見つかりませんw そして、先ほどの HTML と違って、非コード化できませんので、ここは直接入力して、「font-size」と「line-height」の数字変更を行います。
ついでに記事一覧のフォントサイズも変更しましょう。HTML編集画面で「.post-snippet」でコードを検索します。下記が参考画像です。
記事一覧の設定が複雑なので、検索する時は、フォント指定場所を見つけるまで「Enter」キーを数回押します。
スライドショーの画像中央に記事情報は必要？
個人的なセンスの問題で、当該ブログの管理人はスライドショーの画像中央に、半透明の灰色の記事情報ボックスはいらないと思っていましたので、消してありました。あると画像も写真も綺麗に見えないので、好ましくないとの事です。ひょっとして、テンプレートの作者の意図は、心理的に綺麗に見たいから、記事へのクリックを誘導する為に、わざとど真ん中に半透明の記事情報ボックスを置いたのかもしれません。
消し方は、HTML 編集画面で「.main-slider .post-info-wrap」を検索し、top、left、max-width、padding の数値を全て0にします。CSSコード自体は削除しない方が安全です。下記が参考画像です。
その他サイズ調整
これもまた個人的な感覚ですが、もし調整したいと思う方がいれば、参考になれるように、簡単にメモして行きます。●スライドショーの画像とブログ全体の幅を少し縮ませる
.row{･･････} の width: 1170px; ⇒ 1000px;
●サイドバーの幅を少し縮ませる
#sidebar-wrapper {･･････} の width: 360px; ⇒ 300px;
●プログ記事の幅を少し調整する
#main-wrapper {･･････} の width: calc(100%-395px); ⇒ (100%-335px);
●スライドショーの画像の高さも少し縮ませる
.show-slider {･･････} の height: 500px; ⇒ 400px;
●色々な幅調整で記事リストの高さが変わるので、調整する
.post-sniet {･･････} の後方に height: 145px; を追加
以上、カスタマイズ後の使用中テンプレートは下記サイトで確認できます。
当ブログも併せて、今後ともよろしくお願いします。