Posted in サイト運営 and tagged .

スマートフォンでも見やすくカスタマイズしました

  • このエントリーをはてなブックマークに追加
NEVER

今月の頭にリニューアルオープンしたこのサイトですが、スマホに関しては二の次三の次といった具合で、平たく言えば「ほぼ対応をしていない」という状態でした。

言い訳をさせて頂くと、急ピッチのリニューアルという都合やメインコンテンツである各作品ページは画像が多く、パソコンやタブレットで見て頂くことを大前提としていたためです。

「通常のブログ記事も閲覧しにくい状態はどうなのか…?」と自問自答をした結果、スマホでも見やすいかたちに修正を加えるかたちになりました!

作品ページに関しては、スマホでも閲覧は可能ですがやはりページの構成上、パソコンやタブレットで見ることを前提に大きな変更は加えていません。ただし、ブログ記事に関してはなるべく見やすく・使いやすいかたちに変更をしました。

スマートフォンに向けた修正箇所

メニュー部分

smartphone-friendly01

「MENU」をタッチすると各メニューが下に出てくるタイプのヤツです。
パソコン・タブレットは通常のメニューでスマホのみ、この形式のメニューが出るかたちです。

「Responsive Nav」を利用して適当にCSSを調整してアレコレして実現しました。

余白の再調整

リニューアル当初、パソコンを大前提に調整をしていたためスマホ閲覧時のサイドの余白部分をまったく検討していませんでした。そのため、スマホで見ると文章表示領域が狭く見難い作りになっていました。

今回の修正でスマホでも見やすいように余白を再調整しています。

スマホとパソコン(タブレット)の条件分岐

スマホとパソコン(タブレット)で表示されるものを分岐させました。SNSアイコンの数やパンくずリストなどの表示を変更することでスマホ表示では極力「無駄を省く」かたちにしています。

Widget Logicでサイドバーの条件分岐を行う

サイドバー(ウィジェット)のスマホとパソコン(タブレット)の条件分岐を簡単に行うためのプラグインです。凄く便利で僕の個人サイトでも使っているプラグインです。

パンくずをかっこ良くしました

スマホとは関係ありませんが、パンくずをかっこ良くしました。特に意味はありません。ただ、カッコイイ+押しやすいデザインに変更を行いました。

カテゴリーをかっこ良くしました

デザイン性+押しやすさを目指して改良を加えました。基本的にコピペですが僕の場合はカーソルを合わせた時のカラー変更を画像ではなく背景画像の変更で手抜き対応しています。

前後の記事に画像をつけました

スマホでもレイアウトにズレがないように自サイトに合わせて各数値をいじっています。変更を行う際にfunction.phpをいじる必要があるのでバックアップを必ずとってから修正してくださいね。

まとめ

こんなかたちでスマホ対応をさせましたので今後ともよろしくお願い致します!

僕が管理をさせて頂いている絵動-kaiDO-もちょっと修正しました。よろしければ、イラストや動画がたっぷりのサイトなので見て頂ければと思います。

僕の個人サイトの記事でくそくだらない記事を書いたのでよろしければどうぞ。近々「クラウゼヴィッツ戦争論に学ぶセミの捕り方」を書く予定です。

以上、FCめがぶーの宗岡(@pre_muneoka)でした!

  • このエントリーをはてなブックマークに追加

サイトの人気記事もどうぞ

まだデータがありません。

Posted in サイト運営 and tagged .

コメントはお気軽に