天宮です。
今回はBloggerのレイアウトを編集してみましょう。
まずは、現状のブログデザインを確認
自己紹介の位置はサイドバーガジェットの
方に移動したいですね。
Bloggerのレイアウトを開いてみましょう。
heder/main/sidebar-section/footer
それぞれのセクションごとに
ガジェット追加や編集が可能です。
変更した場合は、右上の〔配置を保存〕の
クリックを忘れないようにしてください。
自己紹介ガジェットを左クリックしたまま
ドラッグ・アンド・ドロップ
sidebar-sectionまで移動します、
一気に移動できない場合は少しづづ動かしてください。
〔配置を保存〕をクリックして
ブログを確認してみるとこうなってます。
基本的にレイアウトでの操作は
このパターンの繰り返しです。
CSS編集に入る前のこの段階で
自分が使いたいガジェットは追加します。
それでは、各項目を詳しく解説しましょう
ファビコンの編集
なにげに、この機能ってスゴイです。
他の無料ブログではできないのでは？
ファビコンってこの部分の
アイコンみたいなヤツのこと
ファビコンの編集クリックして
自分で作った画像を選択して保存
このように変更されたらOK
実際にブラウザ上で反映するまで
しばらく時間が掛かります。
他の編集をしながら気長に待ちましょう。
使う画像は、100KB未満の正方形
48px-48pxぐらいのシンプルな画像を
作りましょう。
Blogger側でicoファイルに自動変換
してくれてるみたいだから
保存形式は、JPEG・PNGなどでもOK
Windowsのペイントで作っても良いし、
フリーツールのPhotoScapeとか使うと
簡単に作れます。
アイコン作成、ファビコン作成などで
検索すると無料で作れるサイトも
たくさんあると思います。
ファビコンが反映されるとこうなる。
ヘッダーの編集
「ページヘッダー」ガジェットの編集をクリック
ヘッダーに画像を追加してみましょう。
ブレースメントという項目のチェックで
ブログタイトル文字の背景に画像を入れる
文字を非表示にして画像を入れるなど
設定が可能です。
ためしにヘッダー画像を入れてみました。
今回は画像の上にタイトル文字を
表示する設定です。
ヘッダー画像を画面横幅いっぱいに
広げる場合は幅1300～1400pxぐらいの
画像を使う方があとの調整がラクです。
ヘッダーナビゲーションの追加
ヘッダーナビゲーションボタンの
リンクを追加します。
「Vaster2」テンプレのデフォルトで
ホームと表示されている部分の右側に追加されます。
ページタイトルとURLを入力し保存
ドラッグ＆ドロップで順序を入れ替えできます
ヘッダーナビが増えましたね。
サイドバーの編集
各ガジェットの編集から名称など変更可能
順番に編集を開いていき設定を確認して
好みに合わせて変更保存を繰り返します。
フッターの編集
Attributionの編集を開き
著作権にネームを入力して保存
著作権表記をしないで良い人は
この部分の編集は不要です。
コピーライトのマーク©を表示したい場合は
「©」と入力してください。
全ての編集が終わったら
〔配置を保存〕をクリック
レイアウトの編集については
この辺りまでにしておきましょうかね、
いきなり全てをヤル必要はないですから、
自分が変更したい部分だけ取り入れるようにしてください。
