このブログは、ブログ初心者が日々の出来事をこぼしていくブログです。初心者ブロガー、初心者キャンパーの方々と一緒に少しでも成長できればと思っています。
今回はBloggerテーマの中で、ワタシが使用させて頂いている「QooQ」のカスタマイズです。
QooQについては下記の「ラムネグ」さんからお願いします。
ワタシはQooQ_listを使用させていただいてます。
シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！
blogger日本語テンプレート「QooQ（クーク）」紹介！SEO対策から関連記事までオールインパックになった表示の速いテンプレートです
ナビゲーションをカスタマイズ
今回行ったカスタマイズは、一番上にレイアウトされているナビゲーションです。
最初、ナビゲーションの使い方がわからず、ただの線があるだけだと思っていました。汗汗
どんなカスタマイズをしたかと言うと、
- ナビゲーションをヘッダーの下に移動。
- ナビゲーションをスクロールしてもページ上に固定（ちょっと透ける）
です。
では説明をしていきますので、テーマのバックアップを忘れずに！
【Blogger】バックアップ！編集前の必須事項！後悔しないために！
バックアップは編集前に絶対にとりましょう！後悔しないために！
ナビゲーションバーの位置を変えよう！
今回はテーマのHTMLをいじりますので、バックアップは確実にとりましょう。
テーマ編集画面のオレンジ▼から「HTMLの編集」を選択します。頭の痛くなるようなコードが沢山出てくると思います。
QooQは作者がコードを丁寧にわかりやすく書いていただいたおかげで、とてもわかり易くなっていると思います。
コードの中の最初の方、文字が青い辺り、７００行目あたりまででしょうか？
]]></b:skin>
というコードが出てくるまで。
それはCSSと言われる部分です。その下に出てくるHTMLの装飾をする部分です。
８００とか９００行目のあたりから、コードがカラフルになると思います。その辺りがHTMLです。実際に表示されるページを形作っています。
簡単に言うと、CSSで「headerはこういう形にしますよ〜！」と決めておいて、HTMLで「headerをここに置きますよ〜」と配置しているイメージでしょうか。初心者の（ワタシの）理解としてはそんなところです。
ということで、ナビゲーションの位置を変えるにはどうするかというと、headerとnavigationのHTMLを入れ替えればいいのです！実際にやってみましょう。
HTML編集画面で、コードの辺りを一度クリックしてから、ctrl + fで検索窓を開けましょう。
<div id='navigation'>
をコピーして検索してください。そこから、大体３０行くらいがナビゲーションのHTMLです。どこまでかと言うと
<div id='header'>
が出てくるまでです。
そうです。navigationの下にheaderが記載されています。これを入れ替えましょう。ただし、コードを消してしまうと、ワタシはもとに戻せなくなるので、いらない部分をコメントに変えてしまいましょう（コードではないですよ〜って言う表示）。
HTMLでは
<!-- から --> で囲まれた部分はコードとしては見られなくなります。
「<div id='navigation'>」の直前に「<!--」をいれて、「<div id='header'> 」の直前に「-->」を入れてみましょう。黄色くなりましたか？成功です。これでナビゲーションが消えました。
改行はいくつ入れても大丈夫ですが、全角スペースは入れないほうがいいです。
次に、元々あったナビゲーションを移動しましょう。<!-- から -->で囲んだ部分を、
<div class='width-100' id='main'>
の直前にコピーしましょう。
これで、ナビゲーションがヘッダーの下に移動しました。
ナビゲーションをページの上に固定
ここからの編集はCSSです。
CSSの編集は、上と同じようにHTMLの編集から
]]></b:skin>
を検索して、その直前にコピペしてもいいですし、テーマ編集→カスタマイズ→詳細設定→CSSの追加からも可能です。
以下のコードを追加してみてください。
/*********************************************
ナビゲーションバーを上部に固定する
**********************************************/
#navigation {
position: sticky;
top: 0;
z-index: 5;
}
/***********************************************
ナビゲーションバーを 透けさせる
***********************************************/
#navigation {
opacity: .8; /* 透けさせる */
}
/**********************************************
ナビゲーションバーを リンクの強調
**********************************************/
#navigation-content li a:hover{
border-bottom: 2px solid black;
}
これは
Blogger初心者のQooQカスタマイズ ナビゲーションバーのカスタマイズ 2021/1更新
Blogger初心者のテンプレートQooQカスタマズ 第３弾。 前回よりほんの少し難しいですが、CSSの追加でできるカスタマイズです。凄く高度なことをやっていますが、何も考えずコピペでできます。気に入ったらトライしてみてください。
からお借りしました。
CSSでは/*から*/はコメントとなりますので、まるごと追加しても大丈夫です。
おまけで
opacity: .8; /* 透けさせる */
は透過率？です。.8は0.8のことで、80％の濃さですよってこと。.1とかにするとうす〜くなります。
コードをみて数字をいろいろ変えてみよう
みなさんもコードの中の数字はいじってみるといいと思います。数字を変えるとどこが変わるのかを確認すると、何が書いてあるかが少しづつわかってくると思います。
さらに慣れてきたら、CSSなら/*〜*/、HTMLなら<!--〜-->を活用してもいいと思います。
ワタシはコードを消すともとに戻せないので、コメント化して擬似的に消しています。
ただ、バックアップは忘れずにね！
ゼロからつくるのは無理ですけどね！
では
