ブログの見た目を今時の流行りっぽく。

更新情報
07 /06 2015


toystadatchi_2015070602220727c.png


持て余した日曜日をふんだんに使って、ブログの見た目を刷新しました。

今までと大元は変わっていませんが、視覚的に受ける印象はかなり変わったのではと自賛しています。



スクリーンショット_2015-07-06_0 (3)
まずはPC/Macからの閲覧。ブログではやっぱりこれが一番使用頻度高いですからね。
横長の大きい画面で見るので、全体的に横長の方が見やすいのかなぁ。なんて。


ということで、新レイアウトでは横線を強調し、横2つのグリッド表示を横3つに変更。
休日なんかは1日に複数の記事が上がることも多いので、1列に最新のが複数並んでくれて、埋もれていくのを防ぐ効果も期待しています。

ちょうど私が普段使っている13インチのMacBook Airの画面に綺麗におさまるように作りました。自己満足です。


さらにカラーリングはシンプルに。
今流行りのフラットデザインに強い影響を受けた感じ。

白に、好きな色であり、tadatchiのテーマカラーでもあるオレンジをアクセントに使用しました。
目に優しくてみやすい!


IMG_5854 (1)
私自身、自分のブログをiPhoneから見るときはPC表示を好んで使っているので、今回のものもiPhoneの縦の画面でも見やすいことを確認しながらつくりました。

iOSの白基調のUIにも馴染むイイカンジ具合です(自賛)



gggggvvgvvg_201507060216120a1.png
せっかくなので比較してましょう。
左が新しいデザイン、右がこれまでのものです。

新しい方は目に優しくなりました。


IMG_5853 (1)
もちろん、スマホの狭い画面では、スマートフォンに最適化した表示の方がいいという読者の方のために、スマートフォン用のテンプレートも同じコンセプトで色などを揃えました。
これもまた、白にオレンジが優しく混ざる感じで、理想通りで満足しています。


これからも、おもちゃの楽しさを、ワクワクを全力で伝えられるように更新続けますので、どうぞお付き合いください。


ブログの手直し。

更新情報
07 /01 2015
ちょくちょく見よう見まねでHTMLとスタイルシートに手を加えてブログの見た目をいじっています。
数カ所変更点ができたのでご紹介。今回も自己満足です。

ss20150701Render.jpg
まずこっちはPC用の画面。ブログタイトルのしたに、メニューボタンが現れました。
上に常駐してるメニューで、ホームに戻ったり、Twitterに飛んだりできます。

またこのブログの主となる、ミニカーカテゴリと、ガジェットカテゴリには上から一発で飛べるようになりました。

さらに各記事グリッド表示のところからTwitterへの投稿ボタンと、反応数が表示されるようになったので各記事の反響の目安としてみることができます。




つづいてこっちはスマートフォン画面。

ss20150701Render-1.jpg
PC版に色を合わせました。

あとヘッダーも画像に差し替えてできあがり。
なんども書きますが、スマートフォン最適化画面ってやっぱり良さがわかりません←


ちょくちょく手直しして楽しんでいます。


今回の手直しには、『素材圏』さまのこちらの記事を参考にさせていただきました。
http://fc2blogtemplate.com/blog-entry-225.html
http://fc2blogtemplate.com/blog-entry-270.html



スマホのホーム画面用に、アイコンを作ってみました。

更新情報
06 /25 2015
このブログ、FC2に移転して、レイアウトかえたり、更新頻度あげたりして、最近ちょっとずつカウンターが増えてきているのがわかるので嬉しいばかりです。増えて行くアクセス解析が、励みになっています。

ここはiPhoneの話題もちょくちょく書いてるブログなので、iPhoneから見てくださっている方も多いのかなと。

th_622P6252588.jpg
PC表示でしょうか?

th_622P6252589.jpg
スマートフォン表示でしょうか。

最近のトレンド的には、「スマホにはスマホ画面」らしいですが、3GS時代からPC画面が見れることを魅力の1つにあげていた私には相変わらず馴染めていません。
自分自身iPhoneからPC表示で見ているので、PC画面での見易さにも気を配ってブログを作っています。
普段スマホ表示にしている方、よかったらPC表示に切り替えていただくと、色使い含めた私の意図した世界観をより楽しんでいただけるのかなぁと。よかったらためしに切り替えてみてください。



さてさて、iPhoneでの閲覧のはなしですが、iOSのSafariはホーム画面にお気に入りのサイトのリンクをアプリのように設置することができます。

iconcm6.png
アクションボタンからー


iconcm2.png
ホーム画面に設置します。こんな感じ。


iconcm4.jpg
で、追加すると


iconcm3.png
あっという間にホーム画面にリンクができました。
が、これだとアイコンは画面のキャプチャがそのままという。

気にならない方は気にならないでしょうが、
「ホーム画面の他のフラットなアイコンたちに並ぶと浮いちゃう!こんなの俺のホーム画面にはにあわねぇよ!!」
という方もいると思うので、アイコンをせっせと制作してみました。

homeicon04_2015062522304176b.jpg
こんなかんじ。
GIMPとExcelの図形作成を使ってサクッと。


設定の仕方は意外にも簡単で、ブログのHTMLの中に、1文書き足すだけ。
表示名を指定したいならさらに1文足すだけ。


こちらのブログ記事を参考にさせていただきました。HTMLの知識とか別にない私ですが、おかげで躓くことなく作業ができました。

iPhone、iPadのホーム画面にWebページを追加したときのアイコンとタイトルを変更する方法
-マコトのおもちゃ箱 ~ぼへぼへ自営業者の技術メモ~




iconcm5.jpg
設定反映後に同じ手順を踏むと、こんどは新しく設定したアイコンが現れました。
表示名も「tadatchiのおもちゃばこ」だと字数長すぎて省略されてしまうので「tadatchi blog」になるようにしてみました。

iconcm1.png
どうでしょうか!!←


iconcm7.jpg
iOSのAppStoreのアイコンと、iTunesStoreのアイコンと並んで違和感ないようにと狙って作成しました。
下に向かって暗くなるグラデーションもiOSのを参考にしました。


th_622P6252564.jpg
自分自身使っていなかった機能なので、完全自己満足ですが、よかったら設置してみてください。



追記(2015/6/25 23:20):記事更新時点で、スマートフォン表示でアイコンが正しく反映されていませんでした。というかスマートフォン表示での設定を忘れていました。慌てて修正したので、現在はスマートフォン表示、PC表示ともにアイコンが登場します。


追記(2015/6/26 00:01):そういえばと思ってAndroidでも確認してきました。

torqueicon3.png
AndroidはTORQUE G01 Android4.4.2のGoogleChromeで検証しました。

torqueicon.png
こんな感じ。

torqueicon2.png
iPhoneでは動作したブログ名指定は動作しないので、任意で好みの名称を指定してください。
ここではiPhoneのときと同じ「tadatchi blog」にしています。

torque2.png
じゃーん。

th_622P6252591.jpg
Androidでもホーム画面に指定したアイコンを表示させることができました。よかったよかった。

Androidはスマホ画面ではうまくいきませんでした。改良の余地はあるかもしれませんが、それはまたいずれ。
Sponsored Link


にほんブログ村 コレクションブログ ミニカーへ Push7で購読する follow us in feedly Twitterボタン Instagramボタン

“86/BRZまとめ”

Sponsored Link