ひきぶろ。

睡眠障害からの社会復帰を目指す、引きこもり(自宅療養)の実態を大公開!

ブログのデザインを大改造しました!

f:id:futo-c:20170820160527j:plain

元々はこのようなデザインでブログ開設当初より2年数か月運営してきました。

・・・まさか現時点での最新記事が、深夜のノリとテンションだけで生み出されたあの記事になっているとは。実にタイミングがよろしくない。苦笑

※深夜のノリとテンション:

hikiblo.hateblo.jp

 

とにもかくにも、当初はデザインをあれこれ弄ることより記事を書くことに注力していた(ような記憶が微かにある)ため、ほぼデフォルトの無機質なモノトーンのデザインでやってきたのです。

 

しかし。ここ数か月で他のはてなブロガーさんとの交流が急激に増え、それに伴い今までよりも多くのブログを目にする機会が増えたことで、1つだけ確信を持ったことがありました。

 

それは「あまりにも殺風景すぎる」

 

いくら引きこもりで実生活でも人との接点が少ない、無味乾燥な生活を送っているとは言えども、ブログまで実生活に合わせて(?)殺風景なデザインにする必要はないのでは?

せめてブログくらいは、もっと明るく開放的なデザインにしようではないか!

 

そう思い立ったが吉日。早速cssなどとの睨めっこを始め、デザインの改良に取り掛かったのが先月頭の事。

hikiblo.hateblo.jp

この記事で書いていたゴニョゴニョの正体が「リニューアル」でした。笑

 

本当ならば7月中にデザインのリニューアルを完了させる予定だったのだけれども、諸々の予定外にもめげずせっせと作業をし続け・・・遂にリニューアルが終わったぞおおおおおおお!!!!

このタイミングでリニューアルした2つの理由

https化の噂

ここ数日、はてなブロガーの間ではこの話題で持ち切りとなっているみたいですが、何やらブログをhttps化しないと変な表示を出す?みたいなメールがGoogleから届いているようですね。

 

うちには全く来ていませんけど。

 

メールが来ていないのでまだ何とも分かりませんが、雰囲気から察するにhttps化しない(はてなブログ運営側で対応できない)場合、ワードプレスなどへ移転したほうが良さ気な流れが感じられます。(※私から見える範囲内のお話)

もしその流れに私も乗っかることとなった場合、先月頭から本格的に進めていたデザインリニューアルが全くの無意味になってしまう!!!!

 

というわけで、結果論として数か月間だけのものとなったとしても、これまで地道に進めていた新しいブログデザインの日の目を見せてやろうという魂胆で、昨日・今日と突貫工事を推し進めました。笑

 

ところでブログ関連でGoogleから連絡が来そうな筆頭といえば、個人的にはアドセンスを真っ先に思い浮かべるのですが、気になって管理画面にログインしてみたもののそのような通知の気配は全くなく、あるのは先月から半減しそうな勢いの無慈悲な収益予想額のみ

他にGoogleからメールが来そうな場所が思いつかないので、送り主がアドセンスだと仮定すると・・・メールが届いているブロガーと届いていない私の差って、月間PV数で閾値でも設けられているんでしょうかね?!月間数万PV以上を叩きだせないブログには通知してやる価値もないだと?!?!?!?(逆切れ)

 

22日ではてなブログProの期限が切れる

私事ですが来る8月22日で1年契約だったはてなブログProの有効期限が切れます。

hikiblo.hateblo.jp

この記事を書いてからもう1年が経ったなんて!!

 

なんだかんだであれから1年後もこのようにブログの更新は続いていますが、問題は前述の通り今後https化云々の話次第でははてなブログから離脱する可能性も秘めています。

そうなった場合、ここで1年契約や2年契約をしてしまうと非常にもったいない。

 

ということで暫くは完全無料版で様子を見る作戦を考えたのですが、ここで問題となってくるのが固定ページの処遇。

後ほど説明しますが、今回のリニューアルで固定ページをいくつか作成しました。そして固定ページ機能はPro版のみの提供となっています。

 

Q:では現時点で作成した固定ページ、Pro版ではなくなる22日以降は表示されるのか?予め作成したものは表示され続けるけど、編集はできなくなるのか?表示も編集も出来るけど、新規作成が出来なくなるのか?

 

この問いに対する実験として、22日までにどうしてもリニューアルを完了させたかったのです。いや~一部の設定が終わっていない状態だけど、ギリギリで間に合って良かった~。苦笑

 

カバー画像の設定&テーマカラーの変更

元々は文字のみでタイトルと一文紹介を表示させていましたが、他のブロガーさんのブログデザインを拝見するとインパクトのある画像を採用していることが割と多い!

先頭にあるタイトル部分というのは、ブログを訪れた人が最初に見る・言わば「顔」とも呼べる場所ですから、ここは最も力を入れなければならぬ!

 

ということで、引きこもりなりにどういう画像がこのブログに最適か、色々と考えた結果がこちらです。

 

f:id:futo-c:20170716220743p:plain

まさかの非常口。

いやほらやっぱり引きこもりにとって家は唯一心が安らぐ場所ですから、いつ何時でも家にとんぼ返り出来ればどれだけ心強いことか。

 そんな切なる願い(?)を具現化するにあたり、一番楽に表現できるものとして真っ先に思いついたのが非常口でした。笑

 

ここで非常口を採用したため、ブログのテーマカラーについても、従来のモノトーンから「非常口」で真っ先に連想しやすい緑色を採用することに。

べ、別に普段mineoのsimを使っているから、そっちのコーポレートカラーに合わせたわけでは無いんだぞ。むしろ俺は情熱的なとかの方が好きだし。苦笑

 

レスポンシブルデザインの導入

今まではほぼデフォルトに近い、モノトーンの殺風景なデザインを使っていた関係で、スマホからアクセスした場合のデザインもやはりデフォルトに近いものとなっていました。

しかし、私の手元にあるスマホ(BlackBerry Classic&BlackBerry Passport)では、パソコン版の縮小表示しかされないためスマホ版のデザインが全く確認できない!

 

hikiblo.hateblo.jp

先日もそれが原因でBliskというブラウザを利用する事態に陥りましたが、ともかく自分のブログのスマホ表示を自分で厳密に確認できない以上、大幅なデザイン変更を施したとしても意図通りに作動しているのか確認するのが非常に面倒であったため、パソコン版のデザイン以上に後回しとなっていました。

 

そのため今回のデザインリニューアルにおいてはレスポンシブルデザインの導入を第一の目標と掲げ、来る日も来る日もcssと格闘し続けたのだ!!実態はブラウザの幅で表示を切り替えているだけだがな!

 

デザインリニューアル用に用意した確認用ブログでは、きちんとパソコン版(自称)とスマホ版(自称)で表示が切り替わりましたので、無事にレスポンシブル対応が出来たと思うことにしています。

 

疑似トップページの設定

これは以前、はてなブログで固定ページを作成できるようになった時に、お試しで作ったことがありましたよね。

hikiblo.hateblo.jp

この時は「固定ページの導入を見送ろうと思っています」と書いていましたが・・・残念、気が変わったのだ。

元々用意されていたAboutページだけでなく、お問い合わせのページも固定ページとして用意することにしたので、それならば20分程度で試しに作ったものではなく、もっとちゃんとしたトップページっぽいものを作ろうと考え直したわけですね。

 

とは言っても、以前の記事でも書いた通り厳密な意味でのトップページには今のところ設定できませんので、あくまでも「トップページと自称しているページ」に過ぎませんが。苦笑

 

プロフィール画像の変更

f:id:futo-c:20170820151316p:plain

こちらが新しく用意したプロフィール画像です。iPodの広告イラストを念頭に置きつつ、頭と被さるところの文字の色を反転っぽく変えてみたものの、これだと「ひきろ。」っぽく見えてしまうのが悩ましいところ。汗

 

f:id:futo-c:20170101013548p:plain

従来のプロフィール画像が冬にダウンを羽織ったものでしたから、夏に合わせてTシャツに変更しました・・・みたいなノリです。ということは、冬になったらまたダウンに戻すのか・・・?汗

 

新しいプロフィール画像についてはマイナーチェンジ版を含め3つほど試作して、最終的には直感で先ほどのを選択しています。

 

f:id:futo-c:20170820162906p:plain

Tシャツとブログ名を明るくしたパターンと、

 

f:id:futo-c:20170820162958p:plain

ブログ名を入れなかったパターン。

 

元々はブログ名を入れないパターンを採用するつもりでしたが、当初BlackBerryの通知マーク(赤丸のなかに白の5本線)そのままだったものを1本足して「太」の字に変更したので、ならばついでにブログ名も入れた方がアイコンとしては良いのかな?と。

Tシャツ&ブログ名を明るくしたパターンの方は、もし設定できるならスターを付けた時のアイコンにでも流用しようかと画策中。手をバッと広げたデザインにした理由は、多分この場所にはてなスターの星印が入るはずだから。笑

 

諸々のリンクアイコンもマイナーチェンジ

実は10日ほど前から、先行してこっそり使用していたものがあります。ここ最近このブログをご覧になられた方、お気づきになりました?

 

f:id:futo-c:20170811231650p:plain

実はアマゾンの欲しいものリストへのリンクを、このような画像に変更していました。従来はテキスト1行リンクでしたが、少しは華やかになったのかな?と自分では感じています。あとはこれで何か届けば万々歳!

まともなコメントも致しますと、aの文字をパス化したうえでデザインを少々弄りましたので、このaに関しては世界で1つだけのフォントになりました!!!!笑

 

そしてこの画像サイズに合わせて、前々から気になっていたツイッターへのリンクも1から作ることにしました。

 

f:id:futo-c:20170820164556p:plain

色々悩みに悩んだ結果、ツイッターへのリンクだと多少は分かり易いようにボタンっぽいシンプルなデザインを採用し、またユーザー名を目立たせる意味で@fc2104を大きめに配置しています。

 

いや本当はあの鳥のアイコンを使いたかったんですけどね・・・

about.twitter.com

公式ガイドラインを確認すると、制約がめちゃくちゃ多いのなんの。苦笑

 

f:id:futo-c:20170820165008p:plain

こういう鳥のアイコンを使った方も試作はしたのですが、ツイッター公式のガイドラインを遵守することを第一に考えた結果、ご覧の通りバランスがすごく悪くなってしまいました。

 

どういったものがガイドラインとして掲げられているのかを図式化したのがこちら。

f:id:futo-c:20170820165154p:plain

まず、鳥のアイコンの周りには50%の空白を設けなくてはならないそうです。図で言うところの、鳥の周りに描いた2つの円のうち、外側の円までの範囲がそれです。

そしてユーザー名であるとかハッシュタグであるとかを鳥のアイコンと並べる場合、鳥のマークの高さ(黄色く塗った高さ)と概ね同じ範囲内からはみ出してはいけないらしいので、必然的に文字の最大サイズも制限されるという。。。

 

これだけあれこれ気をつけて作成してみても、ひょっとしたら何かガイドラインの解釈を取り違えている可能性も否定できませんので、じゃあもういっそのことアイコンは使わず、シンプルなもので表現しましょうよとなりました。

 

ちなみにブログの読者登録ボタンは現時点で作成しておりませんので、今後もしばらくはデフォルトのものを使い続けるつもりです。

 

まとめに変えて

本当は最近いろんなブログでちょくちょく目にするgif動画を導入したりしようか?みたいなことも考えてはいたのですが、ちょっとそこまでは手が回りませんでした。苦笑

 

割と最後は勢いで押し切った部分もあるデザインリニューアルですので、もし「ここが見難い」とか「ここを変えた方がいい」みたいなのがありましたら、どしどし教えてくださいね!

 


肉体改造計画

【8/18】背筋70回

【8/19】休み

【8/20】休み

※この土日はリニューアルのラストスパートで筋トレどころではありませんでした(棒読み)

PR