前回の記事では、ブログを作成し、テンプレートを設定しました。今度は更に細かく設定して行きましょう。
管理ページから[テンプレート]→[カスタマイズ]を選択。すると、上記画像のようなBloggerテンプレートデザイナーというツールが開きます。このツールがBloggerの魅力の1つかも。
ここでの細かい変更は、下のプレビュー画面で随時反映されていきます。CSSを弄らなくてもある程度までは簡単に設定が出来るのでとても便利です。
[テンプレート]
ここでテンプレートの変更を行えます。ここで大まかな枠組みを設定し、下の欄で細く設定していくことになります。今回僕は、[旅行]の一番右側のテンプレートを使用することにします。
[背景]
背景画像を変更することが出来ます。画像をクリックすると、予めBloggerで用意された背景画像が表示されます。様々なテーマの画像があり、サイズ等最適化されてあるので、面倒な方はこの中から選ぶのもあり。
選択画面の左上に[画像をアップロード]とあるように、自身で用意した画像を設定することも可能。ただし、これには色々条件があり、
最大 300 KB の JPG、GIF、PNG 形式のファイルをアップロードできます。とある。ちょっとこれが面倒なので、とりあえず後で説明します。（背景画像を設定するための準備）
背景全体にするには、1800×1600 以上（この指定されたサイズは管理者のパソコンの画面の大きさによって変わります）の画像を使用してください。
[メインテーマのカラー]というのもありますが、これはBloggerで設定されている背景画像に最適な文字色、リンク色の組み合わせを設定してくれます。上記画像のアメリカンな青空の背景画像だと、黄土色セットがオススメされています。別に変更しても問題ないです。細かい色の設定は[上級者向け]の欄で変更可能です。
[幅を調整]
ブログの幅と、サイドバーの調整です。ブログ全体の幅は画面の許す限り広げることが出来ますが、背景画像を強調したいデザインにする場合は、ブログ幅を余り大きめにして背景を隠すような事はオススメ出来ません。
また大きいディスプレイのパソコンを使っている方は、大きく幅を広げても1つのウインドウに全体を映す事が出来ますが、小さいディスプレイのパソコンを使う人がそのブログページを開くと、横スクロールバーを使用しないと全体を見ることが出来ません。
とは言え、900px以下にする程小さくするは無いですし、最大でも1200px～1300px位であれば問題ないと思います。
[レイアウト]
サイドバーやフッターの位置や数を変更出来ます。これも正解は無いです。お好みでどうぞ。
個人的な意見を言わせてもらえば、サイドバー等をウィジェットやブログパーツで充実させる人は、両側に1つずつサイドバーを付けるレイアウトに。片方に詰め込んでしまうと見難いですし、個別記事で見た際に、サイドバーだけ長くなってしまい、見た目的にも宜しくない可能性があるからです。
1つの記事の情報量が多く（あるいは改行が多く）、記事が縦長になる人は片方に1つのサイドバーを設置するやり方がオススメです。記事の末文の辺りのサイドバーにも情報があれば、併せてチェックしてもらえる可能性が増えるからです。勿論見た目的にも良い感じ。
[上級者向け]
上級者向けとありますが、何てことはなく、細かい設定が出来るってだけです。これの項目はテンプレートによって決まっています。つまり、テンプレートによっては変更出来る箇所もあり、変更出来ない場所もあるということです。CSSのいじり方を知っていれば、大体の変更が出来ますが、今回はそこまで突っ込んだ説明はしません。
基本的に、これらの項目を選択すると、下のプレビュー画面に「赤の点線の枠組み」が表示されます。「この部分を変更するんですよ～」と教えてくれるんですね。便利。
Mobile Button ColorやCSSの部分は弄らなくてOKです。
とりあえず大体の設定をしました。
ここまで弄ってみてわかったと思いますが、結構ここを弄りまくっても、CSS等を弄らなければテンプレートとあんまり変わらないデザインになってるんですよね。
しかし背景画像を自分の持ってるものに変えるとグッと、「自分のブログ」感が出ます。
背景画像を設定するための準備
まずは画像を用意しましょう。自分で持っている画像でピッタリなものを持っていなくても、テンプレートに無い画像を使用すれば、「自分のブログ感」が出てくるはず。自分が発信したいテーマに合わせたものだったら尚良しですね！勿論無理に合わせる必要は無く、好きなモノで良いと思いますが。
ここで気をつけたいのは、版権がフリーなモノを使う事を推奨します。版権があるものを勝手に使うと問題になることがあるので・・・そこら辺は自己責任ということで。
例えば青空っぽい画像を探しましょうか。
取り敢えずGoogleで"Blue Sky wallpaper free"と検索。その中で版権フリー且つ、サイズが指定された「1800×1600（自分のパソコンの画面サイズ）」を意識してチョイス。この時、はみ出てもOK。
候補がこの2つ
1920 x 1080 - 592KB
1920 x 1200 - 471KB
見事に容量(300KB)オーバー。ここで使うのが、「Image Resizer」というサイト。ウェブ上でイメージの容量圧縮をしてくれます。
容量が大きすぎたり、対応していない拡張子で無ければ、下に圧縮された画像が表示されます。上手く調整出来ていたら、300KB以下になった画像達が・・・。ダウンロードボタンを押してゲットしましょう！
1800×1125 - 257KB
容量半分ですが、そんなに悪くない画質ですよね。
さあ、画像も準備出来たので背景に設定しましょう。
背景画像を設定
[テンプレート]→[カスタマイズ]で[テンプレートデザイナー]を呼び出し、[背景]から背景画像を変更。画像をアップロードすれば完了です。この時、ページと共にスクロールのチェックを外すのがオススメ。これにチェックが入ってると、画像が上下に並んで表示されてしまうためです。外しておくと背景画像がスクロール関係なく固定されるのでオススメ。
後は画像の配置でしょうか。画像の「左上/中央上/右上/左下/中央下/右下」を表示させるかを設定出来ます。実は推奨サイズの画像をアップロードすると間違いなく大きめに設定されるために、画像の配置で結構見た目が変わってきます。まあここら辺は色々自分で調整してみたほうが早いと思います。
最後に
まあ上の画像を見てもらえれば分かりますが、青空の背景画像なんてテンプレート感が半端じゃ無いので、かなり普通っぽい見た目ですね（笑）ただ！手を掛けた・・・という行為が完成品を見た時に「自分が作った！」という達成感をもたらすと思うんですよね。それの積み重ねで「自分のブログ感」というものが出来上がっていくのではないでしょうか？そういう意味ではデザインが初期テンプレートのままでも、記事を書き続け、情報を発信し続けることで、自分だけのブログを完成させる事も当然可能なんですよね。見た目だけが重要ではないということです。
とは言え、見た目が重要じゃないわけでもないわけで。やっぱり周りと同じってのもちょっとアレなので、人と差を生み出すために色々弄るのも面白いんじゃないかってわけで僕は色々弄ってます。
音楽好きの方々の間でBlogger使いが増えることを願って、まだまだこの企画は続きます。
次はGIMPを使ったヘッダー画像の作成について。
"Bloggerへの道"のバックナンバーはこちら
0 comments :
Post a Comment