ふくたのブログ

商業高校→国立大学→プログラマー(予定)が音楽・勉強・ブログ運営について書きます

【運営報告】スマホページのデザインを大幅に変更しました!

f:id:dd-hamaji:20190125125320j:plain

今までレスポンシブデザインに頼りきりでスマホページはノータッチでしたが、思い立って変更してみました。

今回は具体的な変更点と過程を書いていきます。

参考になればなと思います。

 

 

変更点

変更点は以下の通りです。

・グローバルメニューの整理

・トグルメニューの追加

・読者登録ボタンの追加

・その他細かいデザイン

 

デザインの変更はしましたが、雰囲気はPCとスマホで差が生まれないよう心掛けました。

やはりPCとスマホでは画面の大きさも操作性も異なるのでレスポンシブに頼らず個別で編集するべきだなと思いました。

 

では、詳しくまとめていきます。

 

グローバルメニューの整理

 

f:id:dd-hamaji:20190125125320j:plain

それまであった音楽カテゴリと雑記カテゴリをトグルメニューへ移し、こちらに各外部リンクを追加しました。

元々サイドメニューに外部リンクを貼っていましたが、スマホからだと画面下までスクロールさせなければならなかったので多少はマシになった気がします。

 

また、項目が増えたので横スクロール対応させることで全項目見られるようにもしました。

トグルメニューの追加

f:id:dd-hamaji:20190125125324j:plain

ここです。これを押すとこうなります。

f:id:dd-hamaji:20190125125315j:plain

まだまだ改善の余地はありますがひとまずこれくらいでとどめておきました。

音楽カテゴリと雑記カテゴリの区別がつきやすいよう、今後はアイコンを設置することでわかりやすくしようと考えています。

読者登録ボタンの設置

f:id:dd-hamaji:20190125125328j:plain

こちらのボタンを押すと登録ページへ飛びます。

f:id:dd-hamaji:20190125125311j:plain

こんな感じです。

読者登録URLを探すのが少々手間でした。

その他細かいデザイン

具体的には見出しや目次のデザイン、文字の大きさやトップへ戻るボタンの設置などの変更を加えました。

普段PCから記事を作成しているのもあってあまりスマホへの配慮が足りていなかったことを痛感しました。

今後も時間を見つけて少しずつ改良していこうと思います。

 

注意点

他のブログでも言われていることですが、大幅なデザイン変更の際には必ずバックアップブログを作成しておくことが重要です。

万が一に備えておかないと大変な目にあいます。(僕もその一人です)

バックアップブログを作るのが面倒な人はPCのメモ帳機能をうまく利用するのがよいでしょう。

こういった作業をしていると初歩的なミスに気付けなくなることが多いので、冷静に問題点を洗い出して対処していきましょう。

 

最後に

今回こちらの記事を参考にさせてもらいました。

非常にわかりやすかったので初心者の人でも簡単にデザインを変更させることができるかと思います。

hitsuzi.hatenablog.com

 

今後も読みやすくタメになるブログ作成を心掛けていきますのでよろしくお願い致します。

それではまた。