PC向けのレイアウトを刷新しました。

更新情報
11 /05 2016

th_スクリーンショット_2016-11-02_12
数日前からレトロレトラのPC向けレイアウトを刷新しました。オレンジを基調とした暖色でレトロレトラらしさ、tadatchiらしさを残しつつ、イマドキっぽい落ち着いた雰囲気になったかなぁと思います。

従来のレイアウトは写真がメインのブログだからと、写真が大きく表示されることを重視して構成していたのに対し、今回のものは見やすさを重視して左右の視点移動を少なくしてみました。FC2公式テンプレートをベースにちょっと手直ししただけなので大きな不都合はないと思いますが、ご覧になっていてなにか変な挙動や表示を見かけましたら中の人にお知らせいただけると幸いです。

続きを読む

スマートフォン版表示をリニューアルしました。

更新情報
10 /17 2015
th_PA170154.jpg
以前からスマートフォン表示を用意していたこのブログですが、先日登場した新しい公式テンプレートが個人的な好みと合致していたので、それを機にリニューアルを決意。テンプレートの当ブログにあわせた手直しが完了しましたので、先ほどスマートフォン表示用のデザインを刷新させました。

まだ修正が必要な点が残っていますが、とりあえず使えるようになっているのでご紹介を。



IMG_9633.png

こちらが新レイアウトのトップページ。スマートフォン用のレイアウトということで、縦長の画面で縦にスクロールして閲覧する前提のデザインです。記事一覧が、上から新着順で表示されます。各記事の最初の写真が代表して大きく表示されるので、レイアウトこそ異なりますが、PC版のトップページとあわせてご覧いただいてもコンセプトの統一感が十分でていると思います。


IMG_9639.png

参考までにこちらが従来のスマートフォン版トップページ。よくみる形式なので、馴染みやすさもありますが、そのぶん没個性的な気がすることと、写真の重要度が高いこのブログなのに写真が小さく表示されることが前々から気になっていました。


IMG_9634.png

記事本文の表示はこんな感じ。トップページに比べると大きな違いはありませんが、写真の表示や枠組みなどが微妙に変わったので、よりシンプルな雰囲気になりました。

続きを読む

「スマートフォン版で表示」の帯を非表示にしました。

更新情報
07 /11 2015
P7113047.jpg
私自身は、iPhoneからもスマートフォン画面表示ではなくPC表示を好んで使っています。


IMG_6231.jpg
が、FC2ブログのPC画面をスマホから閲覧すると、こういう帯が強制的に現れます。


わかっててスマホ表示を利用しているので、このボタンはお節介すぎるし主張が強すぎるうえに、ダサい!

ということで、調べてみると、CSSに特定の記述をいれればあっさりきえることが判明。
以下を参考にやってみました。

スマホ版FC2ブログで表示される『スマートフォン版で表示』ボタンを非表示にする方法
/デジテクノート
http://degiteku.blog.fc2.com/blog-entry-563.html






#change_mobile {
display:none;
}





これをスタイルシートに打ち込むだけ。


IMG_6225.png
あっという間にできあがり!スッキリしました。
(適用後のSSの方が時間が先になっていますが、撮り直ししたことによるものです。お気になさらずに)



とはいえ、スマートフォンからスマートフォン画面に移れないのを不便に感じる方もいるかと思いますので、代替になるボタンを先日追加したメニューの中に設置しました。

新しいスマートフォン画面への切り替え方法をご紹介。


IMG_6232.jpg
帯の一番左側「About This Blog」をタップしてください。


IMG_6233.jpg
メニューが展開してサブメニューがでてきますので、ここから「スマホ用で表示」を選択します。


IMG_6234.jpg
これで、簡単にスマートフォン画面に切り替わりました。
右上の「PC」をタップするとPC表示に切り替わる点は変更ありません。好みで選んでください。



ss071101.png
特に使い道があるわけでもないですが、PCで閲覧していてもこのボタンはクリックできるので、 PCからスマートフォン版を閲覧することもできます。


見栄えが良くなったので満足です。

ドロップダウン式のメニューを導入しました。

更新情報
07 /10 2015
ss07101.png
思いつきでアップデート。ヘッダーの上にドロップダウンメニューを導入しました。



ss0710114.png
標準時では、画面上部にオレンジ色の帯が現れています。
この帯にカーソルを載せることでメニューが降りてきます。



ss07104.png


ss07107.png


ss071039.png


こんな感じ。カテゴリ別に記事を探すのが容易になりました。
サブメニューとして現れるのは主なものなので、サブメニューとして表示されないものについては「すべて」欄から確認してください。

例えばSuefaceに関する記事は、専用の枠を作っていないので、「ガジェットすべて」から閲覧できます。
ミニカー以外に関しては、各項目の「すべて」欄を選択すれば絞り込まずに閲覧ができるようになっていますが、ミニカーだけは、親子関係までしかカテゴリを組めないFC2ブログの仕様で「国産車」と「外国車」と「その他」の3つの親カテゴリから構成されているため、すべてをまとめて閲覧する「すべて」が実装できていません。

外国車に関しては、細かいメーカー別で探したいときは右サイドバーのカテゴリ一覧で見るのが実は便利です。


ss071032.png
右サイドバーには従来設置していた、カテゴリ欄も残してあるので、探しにくいと感じる方や、うまくドロップダウンが機能しない環境の方はこちらをどうぞ。



IMG_6085 (1)Screenshot_2015-07-10-01-59-47.png
(画面はイメージ)
iPhoneやAndroidスマートフォンからも利用できることを確認しています。


導入にあたってはこちらのサイトのお世話になりました。
CSSだけで作る動きのあるドロップダウンメニュー/Webpark

新商品発売情報を確認できるようにしてみました。

更新情報
07 /08 2015
ss070816.png
毎日覗いてくれている方々にはちょっと役立ちそうな新機能のご紹介。
ブログ右側のプロフィールの下に発売情報のカレンダーを追加しました。



ss070849.png
拡大してみてみるとこんな感じ。
今日始まりで直近2週間のスケジュールを掲載しています。
このブログに関連する商品の発売情報です。

うえの矢印で表示期間は変更できます。


ss070832.png
※が付いている項目はクリックで展開し、さらに詳細な情報を表示します。
この枠の中で、リンクになっている項目は、通販の購入画面や、公式サイトの説明ページなど、外部に移遷します。




どこかから情報を自動取得するとか賢いシステムではなく、私が手入力で入力していますので、情報の速報性や正確さ、網羅具合などには期待しないでください。
個人的な購入メモを公開しているといった感覚でご見ていただければ幸いです。

発売情報に関しては、リーク情報は無視し、公式サイト(タカラトミー製品はタカラトミーモールを含む)で解禁されたもののみに限定しますので、ご理解ください。


「あ、今日発売だったのか
〜」ってよくなるディズニーモータースや、イオン特注なんかの購入忘れ対策には活躍するかなぁと期待しています。


Sponsored Link


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

“86/BRZまとめ”

Sponsored Link