ブログデザインを大幅に微調整しました
今日はうるう年の2月29日という珍しい日ですが、珍しついでにブログのデザインを大幅に微調整してみましたよ。
このあとブログのデザインを8年ぶりにちょっと変えます。
— CHARA PIT (@charapit) 2016年2月29日
ここのデザインをいじくったのは2007年末にWordPressを導入して以来初の出来事だから8年ぶり！？ よくも飽きなかったものです……。
ところで大幅に"微"調整ってなんなのという話ですが、普通はブログのデザインをリニューアルするっていうとテーマ自体を変更するものですが、今回、今まで使っていたテーマはそのままに細かいところを修正しまくったのでした。
何年か前からブログのデザインを変えようとは思っていて、その際は当然のように別のテーマに乗り換えるつもりでした（候補としてはSimplicityあたりを考えていました）。というのも、今のテーマ（Vicuna）はかつては定番として広く使われていたものの、とっくの昔に更新がストップしている上、2年前に配布元が消滅してしまっているんですよね。なので、今更このテーマを修正して使うことになろうとは自分でも驚きの結果です。
本当はちょっとだけ気になる箇所があって、そこだけ修正するつもりだったんですが、「ここも気になるなぁ」なんて言ってるうちにここも、ここもとなって止まらなくなってしまったわけです。
せっかくなので、どこがどんな風に変わったのか、説明していきたいと思います。参考までに変更前の画像を置いておきます。
幅が広くなり、本文の文字が大きくなりました
ブログの横幅を800ピクセルから1024ピクセルまで広げました。さすがにちょっと狭かったもんね。これは最初に文字サイズを決めて、そこから1行あたりの読みやすい文字数を考えて設定したからなのでした。今回、幅を広げたおかげで文字も大きくなりました。
文字を大きくするのは読みやすくなる反面、サイトをぱっと見たときの印象が大幅に変わるので若干不安でしたが、けっこういい感じですね。むしろ今までが小さすぎました。
スマートフォンに完全対応しました
これまでもWPtouchというプラグインで対応はしていたんですが、全然違った見た目になっているのが大きな不満ポイントでした。今回、頑張ったおかげで見た目をそのままにレスポンシブ化することができました。
具体的には、ウインドウサイズ（ブラウザピクセル）を判定に使っていて、567ピクセル以下の場合、1カラムレイアウトになり、サイドメニューはそのまま記事の下に回り込むようになります。
567ピクセルというのは、iPhone5/5s/6の縦のブラウザピクセルが568ピクセルというところから来ていて、現在販売されている多くのスマートフォンでサイトを見ると、縦持ちだと1カラム、横持ちだとパソコンで見るのと同じ2カラム表示になるようにしています。パソコンでもウインドウを狭くすると1カラムになります。が、iPadなどの高解像度タブレット端末では縦でも横でも2カラム表示になります。
地味なところではYouTubeやGoogle Mapsの埋め込み表示をちゃんとウインドウサイズとともに可変するように対策しました。
YouTubeも。
当初はブログをスマートフォン対応にするにはレスポンシブなテーマに変更するしかないと思っていたのですが、たまたま以下のサイトを見て興味が出てきてやってみたというのが始まりだったりします。
・デザインそのまま。5分でできたワードプレスのスマホ対応（Carry Onさん）
ただ、こちらの設定だとタッチパネルのピンチ操作による拡大・縮小ができなくなってしまうので、以下のサイトを参考にviewport設定を変更しました（パターン4のやつ）。
・これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ（てっく煮ブログさん）
ソーシャルボタンを追加しました
ブログといえばソーシャルボタンを目にしない日はないというくらい、当たり前の存在ですが、今更ながら当サイトでも導入してみることにしました。
今まで導入しなかった理由としては、見た目ががちゃがちゃするっていうのもあるんですが、そもそも自分が人のブログ等でほとんど押したことがないんですよね。世の中の人はそんなに押しているものなんでしょうか？ とかずっと思ってたんですが、スマートフォンからネットしてたら確かにあった方が便利かもと思うようになり考えを改めたのでした。
実は今回の作業の中で最も大変だったのがこのボタン設置作業でした。簡単に設置する手順はいくらでもあるんですが、見た目のことも考えて公式に配布されているものではなくボタンを自作しよう、しかも画像は使わずに、なんて思っちゃったものだから大変だったんですよ。
今回設置したボタンはあとで読むサービスのPocket、ソーシャルブックマークのはてなブックマーク、そしてTwitterとLINEの4つです。その中の「LINEで送る」ボタンはパソコンから押しても動かないとのことなのでパソコンからアクセスした際は非表示としました。これはさっきのウインドウサイズの判定とは別で、このためだけにユーザーエージェントを調べてパソコンからのアクセスとスマートフォン・タブレットからのアクセスをチェックしています。実は検索してたらパソコンにも対応しているLINEボタンというのもあったんですが、自前ボタンに変更する方法が分からずに設置を断念。そして大変だったといえば動作の確認ですよ。このためだけにこれまで頑なに未加入だったLINEに登録しましたよ……。
この手のボタンで定番どころのFacebookは個人的に好きじゃないので設置しませんでした。Google+はそもそも利用者がいるのか謎なのでスルー。ThmblrやFeedlyはユーザーは多いだろうけどボタンは別にいらないかな。あと、WPtouchではいつの間にか対応していたPinterest、このサービスを利用している人ってどのくらいいるんでしょうね。物珍しいので設置しとこうかとも思ったけどやっぱりやめました。
細かいところではスマートフォンで押しやすいように1カラム時にはボタンの表示をちょっと大きくしています。
Webフォントを導入しました
通常、ブラウザはパソコン内に保存されているフォントを使ってサイトを表示します。しかし、それだとサイト側がいくらかっこいいフォントを指定したところで、その人のパソコンにインストールされていなければ適当なフォントで表示されてしまい、思ってたのと違う画面になっちゃうんですね。その点、Webフォントはサーバー上にフォントファイルごと上げて、それを使って表示してもらうようにするので、どのパソコンからでも指定したフォントで思ったとおりの表示ができるというメリットがあります。
今回、そんなWebフォントをヘッダーのタイトル表示に使ってみました。使用フォントはGoogle Fontsで公開されているFredoka Oneというフォントです。丸みがかわいい感じです。Google Fontsは自前でフォントファイルを用意しなくても使えて便利な上、人気のフォントは各地で使用されているため、既にブラウザにキャッシュされていればサイト表示時間の短縮にもなるそうなので一石二鳥です。
また、Webフォントをアイコンとしても使用しています。これのメリットはスマートフォンで見たときにあるんですよね。画像だと拡大するとギザギザしてしまいますが、これだとどんなに拡大してもきれいなんですね、フォントだから。他にも色を簡単に変更できるなどの利点もあります。
前述のソーシャルボタンもWebフォントです。アイコン型のWebフォントとしてはFont Awesomeが有名で種類も豊富なんですが、日本のWebサービスのアイコンはあまり登録されていないようなので今回は使用せず、日本製のLigature Symbolsと、IcoMoonというサイトを利用しました。
IcoMoonについて
こちらは元々登録されているWebフォントを選択して利用することもできますが、オリジナルの自作アイコンもWebフォント化することができるんですね。
・ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！（ドウラクさん）
こちらのサイトによると、IllustratorなどでSVGファイルを作成すればOKと、さも簡単そうに書いていたので僕も適当に検索して出てきたInkscapeというドローソフトをダウンロードしてアイコン作りにチャレンジしてみましたよ。以下作ったWebフォントです。
まずは動画サイトniconicoのアイコン、ニコニコテレビちゃんです。
これは楽天のアイコンです。う～ん、Rです。
こちらは「7」のアイコンですね。いつ使うんだって話ですが、アフィリエイトとかで使えるかなと。
そして最後はこれ、今回新しく作ったファビコンをWebフォントにしてみました。せっかく作ったのでサイドバーのリストの丸として使おうかと思ったけど、目が散るのでやめました。
引用にも
他にはこんなところにもWebフォントを使ってみました。
あの世へ行ってみませんか どうせこの世は生き地獄
苦しみだらけに 悩みだらけ 受験地獄に交通地獄生き地獄 生き地獄
あの世へ行ってみましたが どうせあの世も生き地獄
退屈だらけに暇だらけ とてもやりきれない所です死に地獄 死に地獄
（中野正次「生き地獄」より）
引用文の背後にダブルクォーテーションマークを配してみました。前までは縦線だけだったので、少しは引用だと分かりやすくなったかも。
その他の調整点
他にもこんな調整を行いました。
タグクラウドの文字を均一に
8年前、最初にこのテーマをカスタマイズしたときに目指したのは「バタくささの排除」でした。今でこそそういう雰囲気は薄まっていますが、当時のWordPressのテーマはどれもこれも欧文が乗ることを前提としたデザインのものばかりで、日本語とのちぐはぐ感が半端なかったのでした。そこで特有の欧米っぽさを排除すべく最初にやったのが、メニュー関連の日本語表記です。日付などが日本語表記になっているのはそのためです（ちなみに一部英語表記が残っているところは注目度の低い箇所で、敢えてそこへ目を向けさせないために残しました）。
あとはフォントサイズの統一です。見出しに特大フォントを使うのってアルファベットだとかっこいいんだけど、日本語だとなんか微妙に感じたんですよね。なので見出しも本文と同じサイズにして、その分幅を取って目立たせることにしたのでした。
タグクラウドはフォントサイズが機能的な意味を持つ箇所なので少し調整してそのままにしておいたんですが、今回、そこも均一サイズに統一してしまいました。一応色でも判別できるのでいいかなと。
ページのトップへ戻るボタンの設置
ブログでよく見る右下のやつですね。これまでのスマホ向けページは最新エントリーのタイトルだけが並ぶようになってましたが、今度からは全文表記になります。その下にサイドバーのメニューまで続くことになり、更に今回のような長すぎるエントリーまで書くので、すごく縦長になっちゃいました。一応その対策としての設置です。
でもさすがに長すぎなので見直した方がいいかもしれません。
ボタンには「TOP」ではなく「UP」と書いています（フォントはヘッダータイトルと同じFredoka One）。正方形がいいなと思ったので……。Webフォントのアイコンにしてもよかったんだけどね。
見出しのデザイン変更
↑こういうやつのデザインです。実は今までまったくと言っていいほど使っていませんでした。でも本当は文章の読みやすさを考える上で必須の機能です（人だけじゃなく検索ロボット相手でも）。
見出しをちゃんと使えるようにならないと、というのは長年の懸案事項でもありました。てなわけで使いやすいデザインに変えてみた……んだけど、この小見出しは単なる太字ですね。しょぼい……。
「最近のトピックス」の2行目の文字を字下げ
これは地味すぎる修正点なので最初の方に掲載した変更前の画像と見比べてもらえれば一目瞭然なんですが、記事タイトルの2行目がリストの●の方まで行ってるのを修正しました。これが変だと8年間全然気がついていませんでした……。他にもそういうのいっぱいありそう。
ヘッダーの画像を変更しました
これは調整作業中に仮に置いといたものだったんですが、その間何度も見ているうちに妙な愛着がわいてきたのでそのまま採用することにしました。でもなんか、自分っぽい画像なのでお気に入りです。
背景画像を変更しました
これまでブログの背景に斜線の画像を乗せていたんですが、今回は横線になりました。しかもこれは画像ではなくスタイルシートでやっています。ということで、記事内以外で画像を使用している箇所はヘッダーだけになりました。
以上です。
そんなわけで、むちゃくちゃ長く解説してしまいましたが、だいたいこんな感じの微調整でした。この調子で「メディア芸術祭」の感想もUPできればと思うのですが、どうもこのまましばらく燃え尽きてしまいそうな気配がします。
最後にこのエントリーを投稿後、いろんなデバイスでちゃんと表示されているか確認して今後のことでも考えていきたいと思います。それでは、また。