Vaster2でレスポンシブデザインにリニューアル

2016-11-022019-05-01PC,ネット,日記

ホームページをレスポンシブデザインにリニューアルしました。きっかけは「Vaster2」というBloggerの日本語テンプレートを知ったからです。Vaster2|レスポンシブ対応済みのblogger日本語テンプレートこのブログは2016年11月時点では「Blogger」を使っています。 BloggerはGoogleが運営しているブログサービスですが、なんだかもうやる気が無さそうな雰囲気。デフォルトのテンプレートも今となっては少し古い物ばかりです。もうそろそろレスポンシブ対応させたいなーと検索していたら「Vaster2」を発見したのでした。

レスポンシブとは

そもそもレスポンシブとはなんぞやということですが、ざっくり言うと、画面の横幅（ブラウザ）に合わせて内容を自動的に調整してくれる機能です。例えば、横幅が広いPCからこのサイトを見ている人は右にメニューがあると思います。横幅の狭いタブレット（は機種によって違いますが）やスマホの場合は、下にメニューがあると思います。 PCから見ている人はブラウザの横幅を狭くしてみてください。自動的に文章が横幅に合わせて折り返されるはずです。（広告などは再読込しないと調整されません）一般的に、PCは横長画面で、モバイルは縦長画面です。ブログの作成などはPCからやっている人がまだまだ多いと思うので、横長になりやすいです。そうすると縦長のスマホでは横スクロールが発生して見づらいので、スマホ向けのページを別に作っているところもありますね。（Yahoo!など）レスポンシブデザインだと自動的に見ている人の機器に合わせてくれるので、そういう作業が必要なくなるし、見ている人も見やすくなるわけです。やったね！

カスタマイズメモ

そんなナイスなVaster2を自分好みに少し調整。今後、作業が必要になった時のメモ書きです。

フォントを変更

~~GoogleのWebフォントを使って「Noto Sans JP」に変更。~~ ~~少し太めになる「font-weight: 500;」設定。~~ フォントの大きさは「16px」と「18px」で最後まで迷った。個人的には大きい方が読みやすくて好きだけど、モバイルから見ると「16px」の方がいい感じだったのでそのまま。 2016/12/07 ウェブフォントはモバイルからだと容量多めで時間もかかるので外しました。その代わりに、OS標準の「ヒラギノ角ゴ」や「游ゴシック体」などを指定。

英文改行

URLなどが自動改行されなかったので「word-wrap:break-word;」を追加。

サイドバーの太さを変更

初期設定では「width:330px;」だったのを「width:340px;」に変更。それに合わせて全体も「width:1040px;」から「width:1050px;」に変更。これはフォントを変更したら文字が少し大きくなって、いくつか改行が発生したため。さらに、340ならGoogle AdSense広告の「レクタングル大（336 x 280）」も入るかなと。デュフフ。

段落の間隔を狭くする

あとで出てきますが、文章作成ソフトを変更したので、書き方のフォーマットが変わりました。具体的には<p>タグが自動的に入るようになりました。初期設定だとかなり間隔が広いので「padding-bottom:24px;」を削除することに。ただ、自分の段落の使い方が間違っているだけの気もしますけどね。

上の細い線を消す

モバイルから見ると読み込み中のバーと勘違いしやすいかも、と思ったので「border-top:7px solid #008ec2;」を削除。

アイコンの調整

モバイルで表示される「メニューを開く」のアイコンが文字と近かったので調整。アイコンは「Font Awesome」で表示されていたので、公式オプションの「fa-fw」を追加。 <i class=’fa fa-bars fa-fw’/>メニューを開く</div>

リンクの調整

カテゴリやページへのリンクに「max-results」がついてしまうので削除。「 + "?max-results=10"’」を数カ所消す。

前後記事リンクの文章

「Previous」「Next」を「新しい記事へ」「古い記事へ」に変更。他のブログでもよくあるけど、どっちを押せば新しい記事へ行くのかがわかりにくいのでバシッと書いちゃいます。

feedlyの設定

公式の書き換え手順だとうまく行かなかったので、自分のサイトをfeedlyで開いて、そのURLを直接指定。

目次の追加

以前のテンプレートでも使っていた自動作成の目次を追加。完成コード配布 – 3rd(3) – Bloggerの記事に目次をJavaScriptで自動的に付与する – Dr.ウーパのコンピュータ備忘録この目次を押すとURLが変わってしまう（後ろに#h8みたいなのが付く）ので、他の変わらないやつも試したけど、Bloggerではうまく動かすに断念。また次の機会にやろう。

上へ戻るを追加

自分は何か書くと長文になりやすいので、かなり縦長のページになってしまう。特にモバイルから見た時。これからは目次などへすぐ戻れるようになりました。超簡単&コピペでOK！ページトップへ戻るボタンの実装方法：jQuery – webデザイン初心者｜sometimes study むしろ、今まで無かったのが不思議なくらい。無いと不便だよね。ごめーんね。

ブログアーカイブの変更

テンプレートではフラットリストだけど、無駄に何年も続いているこのサイトでフラットリストにすると長くなりすぎてしまう。なので、階層表示にすると、今度はCSSの関係か表示が少し乱れてしまう。一度レイアウトでアーカイブの項目を消して追加し直して解決。

リンクの下線と色とアイコン

モバイルからだとリンクがリンクだと気づかれないかもしれないので、常に下線を付けた。色も少し変更して、Yahoo!のリンク色を参考に。さらに、本文内にある別ページで開くリンクの最後にアイコンを付けた。アイコンは「FontAwesome」が、元から使用されているのでそれを利用。画像にもアイコンが付いちゃうから少し変だけど、気にしないことに。参考にしたサイトコピペOK！外部リンクをCSSとアイコンフォントで目立たせる Google・Yahoo・Bingのリンク色の変化を比較してまとめてみた /*   記事ページのリンク
———————————————– */
.post a{
   text-decoration:underline;
color:#0E1BBB;
}
.post a:hover {
   text-decoration:underline;
   color:#CC3434;
}
.post a:visited{
color:#4C2472;
}
.post.hentry a[target="_blank"]:after {
    margin: 0 3px;
    font-family: FontAwesome;
    vertical-align: middle;
    content: 'f08e’;
}

上メニューの廃止

自分のいじった部分が悪いのか、モバイルから見るとページの読み込みが完了するまで、メニュー（ヘッダーナビゲーション）が、びろーんと開いたままになってしまう。メニュー項目が多いと画面いっぱいに広がってしまうので、コンテンツと勘違いしてタップされる可能性がある。違うメニューを試そうかといろいろ考えたけど、まぁ、無くてもいいか！ということで廃止へ。ひとまず右メニューというか右リンクに変更。モバイルの場合は下に行っちゃうからほとんど機能しなくなるけどしょうがない。メニューがあった部分の間隔が広くなってしまったので、狭く調整。これで目次まで一気に表示されるようになったから、そのページに関しての操作性自体は上がったかな。 #header-inner{
width:1050px;
margin:0 auto;
padding-top:5px;
height: 5px;
}

コメント入力欄の非表示

Chromeなどで見ると、コメント入力欄の下に謎のスペースが出来てしまう。そもそも、コメントを書く人自体がほとんどいないので、初期状態で非表示にしてタップ時に表示することに。ようするに折りたたみですね。参考にしたサイト Blogger:コメント入力欄を初期状態では非表示にしておき、「コメントを投稿」をクリックしたら表示するようにする(改良版) – Dr.ウーパのコンピュータ備忘録コメント0件の時は大丈夫だけど、1件以上の場合はタグが変わって動作しないので、少し追加修正。 1661行目あたりの「h4」タグを「<h4 id="comment-click">」みたいに適当なidを付けて置き換え。あとは参考にしたサイトのコードで「comment-post-message」を「comment-click」に。「comment-editor」を「comment-holder」に書き換える。通常版とこれを併用すれば0件でも1件以上でも動作するようになった。

テンプレート以外の追加修正

ページ一覧の追加

今まで使っていたページ一覧は、並び替えができなかったのでちょっと不便だった。このサイトのを使ったら、もう文句なしに素晴らしかった！ Blogger 記事を一覧表示するページの作成方法自分の好きなように並べ替えが出来る。特に日付順に並び替えられるのはいいね！かなり見やすくなったんじゃないかと。

ロゴの変更

本当はWEBフォントでやりたかったけど、どうにもうまく行かずに諦めた。サクッと画像作成して済ますことに。ポップな感じが記事のフォントと合わない気もするけど、まぁいいかな！

ファビコンの変更

ロゴを変えたのでfaviconも変更。ブックマークとかで出るアイコンのことです。 Bloggerは16*16固定みたいなので、今となってはちょっと古くて小さすぎる。 Bloggerのfavicon設定は消せないけど、その前に変えちゃえば反映されるっぽい。ついでに、スマホのホーム画面とかにも反映されるようになった…はず。いろいろな色にしてみたけど、背景色によって大きく変わるので、判別しやすい黒白に落ち着いたのでした。 Bloggerは外部ファイルを置けないので、一時的にDropboxへ。小さいからこれくらいなら大丈夫かな。

Open Live Writerの導入

Vaster2の作者さんが紹介していたソフト。全然知りませんでした。 Blogger勢に告ぐ！Open Live Writerが泣けるほど便利なので紹介していく試しに導入してみたところ、なかなか使いやすい！これを使うとタグも少し変化して、1文ごと（改行ごとに）に<p>がつくようです。いわゆる段落のタグ。はてなブログなんかと同じですね。自分で改行するより段落に任せたほうがいいんでしょうが、癖で改行してしまうー。段落の量産でSEO的に悪影響かな？まぁ、しばらくはこれを使ってみたいと思います。