#1 初心者ですが、はてなブログのカスタマイズに挑戦
こんにちは!Mamaです。
今日は、はてなブログのカスタマイズについて書いていきたいと思います。
このMamacraft Cafeは、"livedoorブログ"の方でスタートしました。
けれど、気になる点が多々あり、"はてなブログ"で再スタートすることにしました。
一番気になった点は、PC版とスマホ版で表示が統一できないこと。
スマホで見てくださる方が多いので、困りました。
一方"はてなブログ"は、表示も統一できる上、カスタマイズの自由度も高そうでした。
ということで、"はてなブログ"に切り替え、ネットで調べながらカスタマイズを始めたら、楽しいー!!!
カスタマイズしてみたい場所がたくさん出てきました。
凝り性なので、キリが無さそうです。(笑)
「ブログをカスタマイズするってことは、PCに詳しい方なのですか?」と思われるかもしれませんが、全くそんなことはありません。
以前にDIYブログを書いていたことがあったので、HTMLというのはなんとなーく見覚えがあるなぁという感じでしたが、理解している訳ではないです。
さらに、カスタマイズするにあたって必要となるCSSというのも、今回初めて知りました。
そんな私でも、自分好みにカスタマイズできました。
なぜなら、ブログの大先輩たちが、CSSをコピペするだけでカスタマイズできるようにしてくださっているから!
本当にありがたい!!
ありがとうございます!!!
このマーカーラインや吹き出し、目次なども、すべてカスタマイズをして取り入れたものです。
せっかく自分好みに色々と変えることができたので、覚え書きとして記録しておこうと思いつきました。
カスタマイズシリーズとして、少しずつ書いていこうと思います。
テンプレート選び
まずは、テンプレート選びから。
テンプレートとは、髪型もメイクも服も靴もバッグもアクセサリーも全てコーディネートしてくれているセットみたいなものです。
ボタン一つで自分好みのブログにカスタマイズできるので、とても便利。
テンプレートは公式の物以外に、はてなブログのユーザーさんが作成した物もあり、自分のブログにインストールすることができます。
ものすごい数のテンプレートの中から選ぶのは迷いましたが、結局1番人気の
Minimalism
にしました。
理由は、
* スマホとPCが同じように反映されるレスポンシブデザイン対応。
* シンプルでカスタマイズしやすい。
* 利用者が多いということは、カスタマイズの情報も多いはず。
* サイドバーの位置が右側。(PCver.)
* 背景画像の反映されるエリアが広い。
などです。
先ほども書きましたが、レスポンシブデザイン対応というのは必須条件でした。
スマホで見てくださる方が圧倒的に多い今の時代、どれだけ懸命にカスタマイズしても、スマホに反映されないのは致命的です。
ちなみに、レスポンシブデザインの設定は、
デザイン>スマホ>詳細設定>レスポンシブデザインに✔︎
で完了です。
Minimalismのテンプレートを作ってくださった方のブログは こちら。
カスタマイズ方法も書いてくださっています。
背景画像の設定
次は、背景画像の設定。
デザイン>カスタマイズ>背景画像
で簡単に設定できました。
はてなブログでも選べるようになっているのですが、しっくり来るものが無かったので、こちらのサイトからお借りしました。
Subtle Patterns | Free textures for your next web project
すごい数の素敵な画像たち!
これが全て無料なんて、ちょっとびっくりです。
たくさんあって迷いましたが、一番気に入った白タイルを選びました。
背景画像が入っただけで、一気に雰囲気が変わって嬉しい♡
タイトル画像の設定
続いて、ブログのタイトル画像の設定をしました。
タイトル画像は、Canva(キャンバ)で作成しました。
ずっと "カンバ" って読んでた…。
何のきっかけだったかは忘れてしまったのですが、スマホにインストールしてから、すごく重宝しています。
無料で利用できるオシャレな画像やフォント、デザインがたくさんあって便利です。
この記事で仕様しているTop画像も同じアプリで作成しました。
センスの無い私ですが、テンプレートがたくさんあるため、画像を置き換えたり文を変えたりするだけで、すごく良い感じに作れました。
PCからでも利用できるみたいです。
デザイン>カスタマイズ>ヘッダ>画像をアップロード
で設定できました。
画像サイズが大きくても、適した大きさに範囲を設定できるので助かりました。
切り取りたい画像の位置を調整。
設定完了。
タイトル画像の部分にテキストの入力もできるみたいですが、画像のみの表示にしました。
ナビゲーションメニューを設置
先ほど紹介したMinimalismのテンプレートを作ってくださった方が、ナビゲーションメニューのカスタマイズ方法も載せてくださっていました。
早速、設置にチャレンジ。
CSSをコピーさせてもらって、
デザイン>カスタマイズ>ヘッダ>タイトル下
に貼り付け。
後は、アイコンやURL、メニュー名などを書き換えればあっという間に完成♪
メニューを増やしたい場合はコピーして追加、必要無いものは削除すれば良いだけでした。
アイコンが一覧で表示されていて、使いたいものをクリックするとCSSが表示されます。
それをコピペすれば良いだけなので、とても助かりました。
サイドバーの編集
サイドバーのメニューも変更しました。
何のメニューを設置するか選んで並び変えたり、タイトル名を変更したりしました。
デザイン>カスタマイズ>サイドバー
で、すぐに編集できます。
CSSも必要なく、とても簡単にカスタマイズできました。
Before
⇩
After
まとめ
本日はここまで。
今回は、はてなブログの機能を変更するものが多く、そこまでCSSは登場しませんでした。
が、次回は、たくさん登場!
フォントの大きさなど、記事を書き始めた時に変更したくなった部分のカスタマイズ記録を書こうと思います。
まだまだブログカスタマイズは続く…。