ライフビュッフェ

What's on your plate?

はてなpro 初心者が、全部コピペでデザインカスタマイズしたよ|参考サイト8選

f:id:life-buffet:20170921225539p:plain

私はCSSとかプログラミングコードとか、全然分からないのですが、ブログのデザインには意外とこだわりが御座います。

  • ぱっと見たデザインがお洒落なこと
  • 色の配色がきれいで自分好みなこと
  • 読者のユーザビリティが良いこと
  • 記事が読みやすいこと

この辺りを意識しながら色んなブログを参考にさせて頂き、第一弾として今のデザインに辿り着きました。そこで自分の忘備録も兼ねて、参考にさせて頂いたサイトをご紹介したいと思います。

ポイントは、技術的なこと全然分からなくても感覚とコピペでカスタマイズできちゃうってことです♪(※はてなブログproの話が中心です)

初心者でもコピペでデザイン変更できる、参考サイト8選

1. 基本設定の変更

まずは、どんなカスタマイズができるの?ってところを、こちらのサイトから学ばせて頂きました。「グローバルメニューって何ぞや???」の状態でしたが、とりあえずブログの管理画面から行える設定変更をしました(広告非表示にしたり)。

the-rings-of-saturn.hatenablog.com

2. デザインテーマのインストール

まずブログ全体のデザインに、はてなブログのテーマストアの「CONTENTS」を使わせて頂きました。「このデザイン良い!」「読みやすい!」って思ったブログのほとんどが、このテーマを使っていたからです。

www.dreamark.tokyo

たまたまではありますが、前項や次に紹介しているブログも、こちらのテーマが使われています。レスポンシブデザインでスマホでも見やすいってのと、少しフォントや行間が大きめで、文章が読みやすいのでお気に入りです♪

「???」だったグローバルメニューも、こちらのデフォルトのものをコピペして使いました。

3. メインカラーの変更

デフォルトのネイビーも格好良いけどちょっとメンズライクなので、もう少しポップな色に変更したい!こちらもデザインテーマのカスタマイズ記事を参考にしましたが、結構難易度高めでした。

カラーコードのこことここを入れ替えて・・・あれ?場所が違う・・・みたいなのを繰り返して、何とか色の変更ができました(笑)。

www.dreamark.tokyo

4. カラー配色

カラー配色はこちらのサイトを参考にしました。

私はポップなカラーや北欧ライクな配色が好きなので、14番の「フレッシュでジューシーなイメージ」から#6bb6bbの青緑を選びました。女性っぽすぎず、男性でも訪問しやすいかなと。サブカラーの赤は、デフォルトのテーマカラーに使われていたものが意外とマッチしていたので、そのまま使用。www.hp-stylelink.com

5. シェアボタンの設置(Add This)

か・・・かわいいシェアボタン発見!

ということで、こちらで紹介されている手順をそのままに「AddThis」に登録&コピペで設置。私はデフォルトの色とデザインが気に入ったのでそのまま使っていますが、ボタンの色や形状もカスタマイズできるみたいです。

www.mutant-tetsu.com

ちなみに「Add This」にもGoogle Analiticsの簡易版みたいな計測機能があって、PV数やシェア数をページごとに集計してくれます。Google Analiticsは見方が結構難しい(私もまだ分かってない)ので、こちらはシンプルで分かりやすく参考になります。

6. フォローボタンの設置

か・・・かわいいフォローボタン発見!(笑)

こちらもシェアボタン同様に一目惚れし、コピペで即設置させて頂きました。しかもラッキーなことに色合いがこのサイトとマッチしてる(確か色変更もできるけど)!!これは運命の出会いですね。マウスをホバーすると、びよーんって伸びるのも可愛い。

georges.hatenablog.jp

7. アイキャッチ写真

ご存知の方も多いと思いますが、フリーの写真素材サイト「写真AC」と「ぱたくそ」を愛用しております。「写真AC」はとにかく素材数・ジャンル共に豊富で、ここにないものはほとんどありません。

www.photo-ac.com

ただジャンルによってはお洒落さに欠けるので、そんなときに「ぱたくそ」も参照します。「ぱたくそ」の方が数は少ないけど、お洒落で「これ」って画像が多い気がする。

www.pakutaso.com

8. タイトル画像・アイキャッチ画像の編集

私はイラレもフォトショも使えませんので、これまでスマホの写真編集アプリを使って加工しておりました。が、ブラウザで画像編集できる「Canva」と遭遇!こちらも先ほど紹介したmutant-tetsuさんのサイトに紹介されていて知りました。

www.mutant-tetsu.com

「Canva」は、どちらかというとパワポを編集するような感覚で写真やイラストを編集できるのが良いです(加工は多分できない)。有料素材が多いですが、先ほどの写真ACやぱたくそでダウンロードした写真を使って、相キャッチ画像を作ったりしました。

www.canva.com

めちゃくちゃシンプルですが、ブログのタイトル画像もここで作りました(笑)。

f:id:life-buffet:20170917204554p:plain

まとめ

ということで、カスタマイズというほどのカスタマイズはしてませんが、色んなサイトを参考にさせて頂きながら、日々少しずつブログの改良(たぶん)に励んでいます。

「ライフビュッフェ」のブログを見て、ここの部分いいなって思う箇所があれば(無い疑惑(笑))、上記サイト参考にしてみてください♪