QooQの導入
QooQ のダウンロードは
ここからお好きな QooQ.xml をダウンロードしてください。
「管理画面」→「テーマ」でまずはバックアップ
水色の矢印のマークメニューから「バックアップ」をしてダウンロードした xml
ファイルを保存しておく。
QooQ 適用
同じくマークメニューから「元に戻す」で別にダウンロードしたQooQ.xml
ファイルをアップロード
これで QooQ が適用されます。
ブランドカラー変更
最初はデザイン編集でブランドカラーを好みに。
「管理画面」→「テーマ」→「カスタマイズ」→「Blogger テーマ デザイナー」で
「上級者向け」から「文字の色」「ブランドカラー」「背景色など」を自分の好みに調整してください。
ヘッダーとナビゲーションを調整
私の場合は白を背景にセンタリングして整えました。HTML編集のCSS記述部「ヘッダー」で
#header{
background: #ffffff; /* 変更 */
color: #474a4d; /* 変更 */
text-align: center; /* 追記,センタリング */
}
HTML編集のCSS記述部「ナビゲーション」で
#navigation {
padding: .8em 0 .2em 0; /* 変更 */
font-size: 1.3rem; /* 変更 */
background: #ffffff; /* 変更 */
color: #2211aa; /* 変更 */
box-shadow: 0px 1px 1px 0px #2211aa; /* 追記,影をつける */
}
#navigation-content ul{
display: flex;
flex-wrap: wrap;
justify-content: center; /* 追記,センタリング */
}
ナビゲーションバーの位置をタイトル下に
mocaさんのブログを参考にさせていただきました。
記事直接リンク： ナビゲーションバーをヘッダーの下に移動させる
HTML編集で <div id='header'> と検索すると
650行あたりに1件ヒットすると思います
この <div id='header'> から上に30行ほど移動したところに <div
id='navigation'> があるので
先ほどの <div id='header'> の直上から <div id='navigation'>
までを切り取り
今度は <div id='header'>
から60行ほど下に移動したところ（1行空いているところ）の </div>
の下に貼り付けます。
つまり
<div id='header'> ..約60行.. </div> のブロックと
<div id='navigation'> ..約30行.. </div>
のブロックを逆転させます。
これでナビゲーションがタイトルの下に移動します。
0 件のコメント:
コメントを投稿