ジムブロ。 IT企業で事務職のボクにブログ暮らしができるのか!

一部上場のIT企業なのに事務職のボクがブログ暮らし生活することを目指します!

【ご報告】スマホ版デザイン変更しました!マジでおすすめの参考サイトあり。【ブログデザイン】

f:id:a720b720c720:20190323170300j:plain

どうも。スマホのブログデザインを変更しました。

 

つい先日、初心者ブロガーこそアクセスアップのためにデザインにこだわるべきである。

という記事を書きました。

 

www.a720b720c720.com

 

しかし、記事書いている最中に気づきました。

 

PC版はそこそこやっていましたが、スマホ用のデザインは全くやっていませんでした笑

 

色を変えて、不要なものを非表示にしていたくらいです。

 

ということで、この前のお休みの日に慌ててスマホのデザインもいじりまくりました。

 

今日はその報告と変更の際に参考にさせていただいたサイトをご紹介します。

 

 

こんな方に向けて

  • デザインしたいけど知識がないとできないの?
  • 色々やってるけど、テンプレ感から抜け出せない。

 

Twitterでも。

こんなつぶやきをしました&見に来てほしいからこのツイートを固定しました。

 

 

参考にしたサイト

デザイン変更しました!といっても、ほとんどを下記のサイトを参考にさせていただきました。

 

hitsuzi.hatenablog.com

 

正直、おすすめすぎます。

つい変な日本語になってますが、おすすめすぎます。笑

 

ヘッダからフッタ、記事中や目次などまで幅広く説明してくださってます。

 

なんとカスタマイズコード、すべてコピペOKとのこと。

 

一瞬にしてテンプレ感満載の見た目から抜け出せた気がします。

 

変更前後のスマホデザイン比較してみる。

以前までのデザインと現デザインを照らし合わせてみます。

 

結構大きく変えました。

変更前

プロフィールの画像が大きく表示され、その下にタイトル。

 

テンプレート感がやばいです笑

f:id:a720b720c720:20190323074257p:plain

 

変更後

全体的にシンプルに。をイメージして色使いを考えました。

f:id:a720b720c720:20190324200158p:plain

 

アドセンスが表示されているのはご容赦ください。

 

 

大きく変更したところ5つ。

f:id:a720b720c720:20190323170313j:plain

まあ一目瞭然ではありますが、

 

大きく変更した点をご紹介させていただきます。

 

その1:タイトル部分の画像を消した

最も印象が変わった点かもしれません。

 

この柴犬の画像大好きなんですが、このブログ「ソロ充の備忘録」のタイトルと全く関連がない。。。笑

 

すっきりした見た目にさせるために、タイトル部分では画像を消しました。

 

その2:メニューボタンの設置

タイトル左にメニューボタンを設置しました。

f:id:a720b720c720:20190324200407p:plain

 

押すとカテゴリーが表示されるようになっており、もう一度押すと閉じます。

 

まだカテゴリーは整理中。今後もう少し増やしたりさせていこうと思っています。

 

※タイトル左は読者ボタンですが、こちらも調整中。。。

 

その3:各種リンクボタンの追加

以下のリンク先のボタンをタイトル下に表示させています。

 

f:id:a720b720c720:20190324200257p:plain



 

あれ?お問い合わせないじゃん?ってなりますが、なんとこのメニュー、スライドできるんです。

f:id:a720b720c720:20190324200316p:plain

ひょっこり✉お問い合わせがでできました。

 

あとは、下に読者になるボタンも作成しました。よかったら登録していってください!

f:id:a720b720c720:20190324200326p:plain

 

その4:色をシンプルに

全体的にシンプルなつくりがすきなので、見ての通りなんですが白と黒で統一させました。

 

下は記事一覧の表示ですが、参考サイトではもうちょっとカラフルな色使いやアイコンが使用されていますが、

 

色や、細かい線の見え方だけは自分好みにアレンジしました。

f:id:a720b720c720:20190323084702p:plain

 

その5:記事下にフォローボタンを設置

はてな読者の登録と、ツイッターのフォローリンクは下部からも行けます。

 

こちらは参考サイトでは、他のSNSのフォローボタンも用意されていましたが、僕がやっているのはこの2つだけなので、こうなってます。

f:id:a720b720c720:20190324200411p:plain

ブログデザインしていて思ったこと

楽しい!

ツイート内容にもありましたが、気づいたら夕方でした。

 

ちょっとやろうかな~くらいの気持ちでしたが、やればやるほどここもこうしたい!とかクオリティをあげたいとか、止まらなくなります。

 

自分好みの色や見え方にしたり、ボタンの配置やリンク先を考えたり。

 

知識はあまりありませんので体力は使いましたが、完成後は充実感や達成感がありました。

 

最初は人のまねでいい

最初はみんなわからないことだらけ。筆者もまったくHTML・CSSなどの知識はありません。

 

最初は先人に習いましょう。

 

色々な人が提供してくれているサンプルコードを組み合わせて、ちょっとだけいじってみたりして遊んでいくうちに覚えます。

 

最初は色やフォントサイズなどだけでも自分好みにアレンジし、すこしずつオリジナルのブログを作っていきましょう。

 

ただ、コピペOKの旨の記載があるかどうかはしっかり確認してくださいね!

 

デザインはこちらで

 上でご紹介した参考サイトのほかにも、

 

まったく異なるスマホデザインや、PC版のデザインもできるサイトをまとめてあります。

 

また、細かいカラーコードをまとめたサイトも掲載しています。

 

下記の記事を参考にしてください。

 

www.a720b720c720.com

 

最後に

f:id:a720b720c720:20190323170306j:plain

今日はスマホブログデザインの変更のご報告と、参考サイトのご紹介でした。

 

まだまだブログを始めたばかりでいろいろなことが発展途上です。

 

学びながら、もっともっとおしゃれで見やすいオリジナルブログデザインを作っていこうと思います。

 

また、第2弾とかもやりたいとおもいます!

 

それでは。