[:a]ブログ(とくにスマホ)をリニューアルしました!

横メニュー

ブログ色々いじってみた

スマホ表示をどうしても色々変えたくて、やっと重い腰を上げました(*´Д`*)
とにかくシンプルに、でも可愛く女の子っぽさを入れつつひとまずカタチになりましたー!
疲れた、今日はもう何もしないと心に決めた。

元のテーマは「Simplicity」さんを使わさせてもらっています!

変えたポイント

色々変えたポイントがあるのでまとめました。

【1】メニューを横からにょきっと出てくるやつにしてみた

横メニュー

左上の「MENU」ボタンを押すと左からにょきっとメニューが出てきます。
最近こういうタイプをよく見かけると思いますが、私のブログでも導入してみました♪
ごちゃごちゃ感が無くなってすっきりしたかな。
一回「MENU」を押すワンクッションは出てきてるけど、画面遷移は無いしひとまずこのまま様子を見てみよう。

お世話になった記事
[jQuery] プラグインを使わずに横からスライドインするメニューを簡単に作る | memocarilog

【2】上部のメニューとブログ名のバーを固定にしてみた

メニュー固定

スクロールしてもメニューが固定されるあれです。
ウザくならないように細めに、かつ半透明にしてスクロールして後ろに来た物も見えるようにしました。
どこにいても「MENU」があるようになるのが気に入って入れてみました。
半透明にするだけでもう可愛い(*´Д`*)

【3】SNSボタンをオリジナルにしてみた

SNSボタン

SNSシェアボタンをオリジナルにしてみました。

デザインの統一性と表示速度の高速化にもなってくれます。
はてぶのWEBフォントが無くて画像になっているけれども、ここはもうちょっとデザインしたいところでもあります。
押したくなる可愛いアイコン形式でいきました。

【4】全体的に細くした

ブログデザイン

全体的にblodをnormalにして細くしました。
細くする代わりに、文字の大きさを変えて重要な文字に目がいくようにしました。
うん、細身にするとシンプルになって満足です。

【5】一番下に好きな名言をランダム表示

好きな名言をランダム表示

 

フッターも必要なもの以外は全部とっぱらってちょっと寂しくなったので、好きな名言をランダム表示させてみました。
ここちょっとした遊び心で他にもいろいろできそう!
下までスクロールした人が発見した時に、ちょっとした幸せを感じてもらえればいいな♪

リニューアルにかかった時間

他にも微調整とかを含めると結構な箇所を修正しています。
リニューアルにかかった時間は10時間くらい?だと思います。
疲れたーー!!でもやっぱりこうやって触ってみる事で覚えるものもいっぱいありました。
もちろん上手く動いてくれなかったりした部分もあったので、別途書けていけたらお役に立てれるかなと思っています。

今後入れていきたいもの

関連記事周りをもっと円滑にさせたいです。
同じタグの記事、同じカテゴリーの記事などの表示を便利にしていきたい(`・ω・)

やっぱりいじってみると楽しい!

実際にHTMLやCSS、Wordpressを触ることで今の流行りを知れたり、知らなかった事を発見したり、色んな人のブログを見たりして楽しいです!
自分が思ったものがどうやったらコードで実現できるか?と頭をひねってみるのも楽しいです。
できたときの喜びはやばい(*´∀`)

私はデザインよりも「愛」のほうが大事だと思ってます(*´ω`*)
それにプラスしてデザインを自分が思うものに変えると、「書きたくなる!」っていう気持ちが出てきます。
「楽しい」気持ちがステップアップに繋がりますね!

もっと具体的な参考サイトや使用したコードもシェアできるように頑張ります…!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でakaneをフォローしよう!

noteでも書いてます(*´ω`*)!

follow us in feedly
Feedlyで購読する!

Twitterで交流しよう!
[ [:a]ブログ(とくにスマホ)をリニューアルしました! ]Wordpress, , , , 2015/02/21 14:57