Bloggerは高いスペックと良質なサービスを兼ねそろえ、大きな可能性を持ったブログサービスですが、
テンプレートが少なく、ある程度は自分でカスタマイズする必要があります。
そこで、
今回は初級編ということで、
初心者向けに極力HTMLやCSSをいじらないで行えるカスタマイズについて、
当サイトで採用している形式をベースに説明していきたいと思います！
まずは前提として、
ガジェットとBloggerテーマデザイナーについて触れていきます。
ガジェットを利用する。
ガジェットとは、ブログ上に様々な機能を表示できる部分を指します。
よそではブログパーツとも呼ばれたりしますが、
Bloggerではガジェットです(｀・ω・´)
ガジェットはブログ管理画面から、
「レイアウト」→「ガジェットを追加」
で任意の位置に追加することができます！
ちょっとガジェットの配置のみを変えたい場合は、
レイアウト編集画面から
当該ガジェットをドラッグアンドドロップで任意の位置にガジェットを移動させればすぐです。
ガジェットからは
AdsenseやHTML、サイト検索やプロフィールなど、様々な機能が導入可能です。
[さらに詳しく見る]
→使える！面白い！Bloggerのガジェット10選！
Bloggerテーマデザイナーを利用する。
Bloggerテーマデザイナーを用いることで、ブログをデザインすることができます。
Bloggerテーマデザイナーの利用は
「テーマ」→「カスタマイズ」
から可能です！
Bloggerテーマデザイナーでは、
テーマ、背景の設定やサイトの幅やレイアウトなどの調整が行えます(^^)
また、CSSの追加もこちらから行うことになります。
以上の機能を念頭に話を進めて参ります。
メニューバーを導入しよう
↑これですね
メニューバー、ヘッダーメニュー、グローバルメニューとも呼んだりします。
（スマホ版ですと上部にセレクトボックスの形で表示されます）
これがあるとユーザーも、目的の記事にたどり着きやすくとても便利です(^^）
早速導入しましょう。
まずは「レイアウト」に行きます。
で、「Cross-column」の場所でガジェットを追加し、
「ページ」のガジェットを作成します。
あとは「＋外部リンクを追加」から、
任意のタイトルとリンクさせたいページのURLを張り付ければ完了です！
(ページを作成済みの場合、そちらも選択可能です）
簡単ですね。
またメニューバーの色などのデザインはBloggerテーマデザイナーから、
「上級者向け」→「タブのテキスト」、「タブの背景」
から可能です！
ラベルを導入する
Bloggerには記事の属性を示すものとして、「ラベル」というものがあります。
要するに「タグ」のようなもので、
ラベルをクリックすることで、同じラベルを有する記事一覧へと飛ぶことができます。
ラベルは、記事の編集画面（エディタ）の右側の、
「投稿の設定」→「ラベル」
ここに任意の文字を打ち込むことでラベル化が可能です。
一度打ち込んだラベルは保存され、
以降は簡単に記事に同一のラベルを導入することが可能です。
また一つの記事に複数のラベルを導入することも可能です。
ラベルを導入することで、記事が整理され、ユーザーとライターの双方に利益をもたらすでしょう(^^）
背景画像を適用して、オリジナリティを出そう。
Bloggerの公式テンプレートは種類が少ないですが、
Bloggerテーマデザイナーには、ブログの背景に使えるたくさんの画像が保存されています。
背景の設定はBloggerテーマデザイナーの
「背景」→「背景画像」
から設定可能です！
あなたのブログにふさわしい画像を適用しましょう(*´ω｀)
(スマホからだと見えなくなってしまいますが…）
フォントを変えよう（チカラ技）
Bloggerでは、日本語で打ち込まれることを想定していないのか、どこかデフォルトのフォントにダサい印象があります。
一応、エディタやテーマデザイナーから他のフォントも選択できるのですが…
どれもアルファベット用のようで、日本語に適用してもあまり効果がありません。
フォントを変えるにはCSSをいじるのが順当ですが、
【やり方】
↓
その文字をBloggerのエディタにコピペします
↓
終わり。 *1 Microsoft Word
です！
要するにエディタにコピペされたフォントと同じものが記事にも反映されるというわけです。
まぁでも、やっぱりエディタから編集できないのは不便ですよね(^^;)
(追記：この方法だとブラウザによってフォントの見え方が変わってきてしまう恐れがあります…）
(2019/2/20:やっぱこの方法はちょっとダサすぎるので、下のCSSを編集する方法をお試しください(-_-;))
【もっとスマートな方法はこちら】
→BloggerブログのフォントをCSSで設定しよう！
モバイル版サイトにカスタマイズを適用する
Bloggerではモバイル版のブログレイアウトが初めから用意されているのですが、
このモバイル版をPCからいろいろとカスタマイズしても、あまり変更を反映してくれません。
そこで、モバイル版のカスタマイズを有効にしましょう。
「テーマ 」
→「モバイルテーマの選択」(歯車のボタン）
→セレクトボックス内の「カスタム」を選択
から可能です！
しかし、この状態にしてもまだ、ガジェットの一部などが表示されない場合があります。
これを解消するにはHTMLをいじる必要があるのですが…
初級編ということで、今回は割愛させていただきます(^^;)
↓こちらの記事で扱ってますm(__)m
[参考記事]
→Bloggerガジェットをモバイル版ブログに表示させる方法！
まとめ
いかがでしたか？
Bloggerカスタマイズの簡単な方法について述べさせていただきました。
次回からはHTMLやCSSを用いたブログカスタマイズについても言及していきたいと思います(｀・ω・´)
[さらに詳しいカスタマイズはこちら！]
さらに思い通りに！Bloggerカスタマイズ中級編！
にほんブログ村(クリックお願いしますm(__)m）
