qooqのナビゲーションの位置を変更する
私のブログはbloggerのテンプレートの「qooq」を使用しています(qooqについてはこちらを参照ください)
とても使いやすくて愛用しているテンプレートですが、使用しているうちに細かいところが気になってきてしまいました
ブログのカスタマイズの知識は皆無ですが、色々試しています
bloggerはカスタマイズできる点も無料ブログのメリットなのでどんどん行っていきたいですね
さて今回変更するのは、ブログの上に表示されているナビゲーションの位置を変更します
「qooq」のデフォルトではナビゲーションはタイトルの上に表示していますが
タイトルの下に表示させたいと思いました
こんな風にしたい |
よく見かけるブログはタイトルの下にヘッダーがあり、ナビゲーションがあるかと思いますので、このブログも変更しようと思います
注意
HTMLの変更しますので事前にバックアップを取ってから作業を行いましょう変更方法
カスタマイズメニュー>テーマ→HTML編集
HTMLが書かれている枠の中で、キーボードの「Ctrl」+「F」で検索ボックスを出し
<div id='header'>と検索しましょう
600行あたりに1件ヒットすると思います
<div id='header'>から下にある</div>までを切り取ります
そうしましたら、少し上の行に<div id='navigation'>という文字があると思います
もし見つけられない場合は先ほどの検索ボックスで<div id='navigation'>と入力すると1件だけヒットすると思います
見つけたら<div id='navigation'>の上の行に先ほど切り取ったコードを張り付けましょう
これでナビゲーションがタイトルの下に移動しているはずです
確認してみると変わっていました
大成功です
これで少しブログが見やすくすることができたと思います
まだまだHTMLなどのプログラムコードを変更するのは全然できませんが少しずつ慣れていけたらなと思います
bloggerの強みを活かしたブログ運営をしたいですね
テンプレートをそのまま使うのではなくてカスタマイズし自分だけのブログを作っていきたいと思います
HTMLが書かれている枠の中で、キーボードの「Ctrl」+「F」で検索ボックスを出し
<div id='header'>と検索しましょう
600行あたりに1件ヒットすると思います
<div id='header'>から下にある</div>までを切り取ります
そうしましたら、少し上の行に<div id='navigation'>という文字があると思います
もし見つけられない場合は先ほどの検索ボックスで<div id='navigation'>と入力すると1件だけヒットすると思います
見つけたら<div id='navigation'>の上の行に先ほど切り取ったコードを張り付けましょう
これでナビゲーションがタイトルの下に移動しているはずです
確認してみると変わっていました
大成功です
まとめ
今回はナビゲーションの位置を変更しましたこれで少しブログが見やすくすることができたと思います
まだまだHTMLなどのプログラムコードを変更するのは全然できませんが少しずつ慣れていけたらなと思います
bloggerの強みを活かしたブログ運営をしたいですね
テンプレートをそのまま使うのではなくてカスタマイズし自分だけのブログを作っていきたいと思います