Blogger初心者がQooQカスタマイズ！？【HTML編集】編

Blogger初心者の🐇灰色うさぎが BloggerテンプレートQooQのカスタマズをやっちゃいました😵　【CSSの追加】編に続く　第2弾 【HTML編集】編になります。

Blogger初心者がQooQカスタマイズ！？【CSSの追加】編
この記事を先に読んで貰えるとチョット分かり易いかも、もちろん読んでなくても大丈夫です。

【HTML編集】によるカスタマイズは【CSSの追加】によるカスタマイズよりミスをしやすいしミスの修正が難しいので、HTMLの書き換えには注意してくださいね。
ミスやカスタマイズを戻したいときように必ず、カスタマイズの前には テーマのバックアップをしてから行ってください。

バックアップの仕方は　こちら　【HTML編集】の仕方は　こちら　です。

【HTML編集】で超簡単にできるカスタマイズは３つに分けてありますが、一度に全部やっても大丈夫です。ただ、慣れてない方は何を変えたくてHTMLを書き換え、うまくできたのか、一つ一つ確認しながらカスタマイズすることをお勧めします。

灰色うさぎがQooQカスタマイズしちゃいまいした😄【HTML編集】

超簡単にできる３つカスタマイズ紹介

1. 記事の上部にあるSNSシェアボタンをなくす。
2. トップページのパンくずリスト（ホーム）をなくす。
3. ブログタイトルを一番上に、ナビゲーションバーと上下を入れ替える。

１．記事の上部にあるSNSシェアボタンをなくす。

data:post.sharePostUrlを検索してください。シェアボタンは2か所ります、上にある１行（header用）だけをコメントアウトします。削除しても同じですが何を変更したか後からわかるように、コメントアウト　<!--これと-->これの間が コメントなり処理されなくなります。

テーマをプレビューして確認後 保存してください、カスタマイズ完了です。

2．トップページのパンくずリストをなくす

パンくずリスト・・・・って何、可愛いけど何？
ブログの中でどこにいるのか分かり易いようにどこにいるのか示すもの、ヘンゼルとグレーテルのパンくずの道しるべだって、分かった(⌒▽⌒)
トップページではパンくずリストは【ホーム】と表示されます。ナビゲーションバーにもホームと記載されるてるので、【ホーム】の表示をなくします。

プゥ二郎さんの記事を参考にしました。
【Blogger/QooQ】トップページのパンくずリストは廃止したい
div class='breadcrumbs　を検索して　トップページじゃなかったらという if文の行と
<b:if cond='data:blog.homepageUrl != data:blog.url'>

そのif文を閉じる行を追加します。30行くらい下になります。
  </b:if>

テーマをプレビューして確認後 保存してください、カスタマイズ完了です。


適当な性格の灰色うさぎは
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
だけ追加して　この　if文を閉じる　</b:if>　を入れ忘れてエラーになってしまいました。中略の下の方見てなかった。(TдT)
最初何故ここでエラーになるのか分からなかったので、バックアップしておいたテーマを復元して元に戻してから、じっくり考えて原因が分かったところで、カスタマイズのやり直しを行いことなきを得ました。

・・・・一人でやってるから沼に嵌ると 抜けだすの大変です。

３．ブログタイトルを一番上にナビゲーションバーと上下を入れ替える。

下の記事を参考にしました。
QooQのカスタマイズ：ナビゲーションをヘッダーの下に移動させる方法
記事の最上部にある ホームって書いてある濃いグレーのところ　ナビゲーションバーと
その下の　灰色うさぎ大好き集め　って書いてある グレーの　ヘッダーバーと　上下の順番を入れ替えます。
ビフォーアフターはこんな感じ、今後 ナビゲーションバーをいじると思うのですが今は初期値のままです。

<div id='navigation'>
いろいろなことをやる行
</div>　
↑↓　このブロックを上下入れ替えます。
<div id='header'>
いろいろなことをやる行
</div>

<div id='header'>を探して、このブロックを閉じる</div>まで　50行くらいを切り取ります。
切り取った<div id='header'>ブロックの少し上に <div id='navigation'>の行があるのでその上に 切り取った切り取った<div id='header'>ブロックを貼り付けます。

テーマをプレビューして確認後 保存してください、カスタマイズ完了です。

【HTML編集】の仕方

Bloggerメニューのテーマをクリック実行　下の画面がでます。



下の画面で HTML編集をクリック実行　下の画面がでます。


行番号の右エリアが　HTML編集エリア　ここを編集して
テーマをプレビューで動作確認して
テーマを保存でカスタマイズを反映します。
戻るで完了します。

さっきのところへ戻る

テーマのバックアップの仕方（ダウンロード）

①Bloggerメニューのテーマを実行する

②右上の　バックアップ/復元 を実行する
③【テーマ＞バックアップ/復元】が開くので テーマをダウンロード を実行する
これで カスタマイズ前のテーマがバックアップされました。
さっきのところへ戻る

テーマの復元（アップロード）

失敗したりして、カスタマイズを元に戻したいときには　バックアップしておいたファイルを先ほどの【テーマ › バックアップ/復元】のファイル選択で指定して、アップロードします。
さっきのところへ戻る