Google Blogger日本語テンプレート「QooQ(クーク)」カスタマイズメモ(随時更新)

2020/04/12

Google Blogger ブログ 日本語テンプレートQooQ

t f B! P L
このブログは無料ブログサービスの「Google Blogger」を利用しています。

デザインは日本語テンプレートの「QooQ(クーク)」です。

カスタマイズの内容をズラッとここにメモしていきます。

これからQooQを利用する方の参考になれば幸いです。

※カスタマイズをする時は、万が一に備えてあらかじめデータのバックアップを取っておきましょう。カスタマイズは自己責任でお願いします。

日本語テンプレート「QooQ(クーク)」のダウンロードはこちらから


くうく堂 - blogger、wordpressテンプレートを配布中.WEBデザインの「くうく堂」
https://qooq.dododori.com/

私が使わせていただいているのは、こちらのバージョンです。
Name:      QooQ list
Version:   1.26

くうく堂さん、ありがとうございます!

さて、それでは、さっそくカスタマイズしていきましょう!ワクワク!


ブログ上部のナビゲーションバー(「ページ」ガジェット)をごっそり削除

管理画面

「テーマ」

「HTMLの編集」

「ウィジェットへ移動」から「PageList1」へ。


以下の選択部分(グレーになっている部分)のコードをごっそり削除。

折りたたまれている部分も表示するとこんな感じ。

 <div id='navigation'>
   <div class='container'>
    <label for='navigation-button' id='navigation-label'>=</label>
    <input id='navigation-button' type='checkbox'/>
    <div id='navigation-content'>
<b:section id='ナビゲーション' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='true' title='ページ' type='PageList' version='1'>
  <b:widget-settings>
    <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://aiueokakaka.blogspot.com/', 'title': 'ホーム', 'position': 0}}]]></b:widget-setting>
    <b:widget-setting name='homeTitle'>ホーム</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
  <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
</b:section>
    </div>
  </div>
 </div>

こんなにごっそり削除すると思うと、我ながらゾッとします。
削除した後は「テーマを保存」を押して完了です。お疲れさまでした。

※追記
削除した部分の中に、何やら怪しげなURLがありますね…。
<b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://aiueokakaka.blogspot.com/', 'title': 'ホーム', 'position': 0}}]]></b:widget-setting>
という部分なんですが…「https://aiueokakaka.blogspot.com」って何のサイトなんすかね。
テンプレート作者さんのデモサイトなのかな。
なぜ、このようなURLがひっそり混入しているのか、ちょっと意味がよく分かりません。
気づかれないようにこっそり混入させられてるのって、なんかちょっと怖くて嫌ですねぇ…。なぜこんなことを。

大胆に「パンくずリスト」を削除する

おそらく「パンくずリストは設置しておきたい」という人も多いと思います。

ぶっちゃけ「パンくずリスト」は、(SEO的に)削除しない方がいいかもしれません。

しかし、私は、個人的な趣味趣向で、パンくずリストを削除しちゃいます。

のっぺりとシンプルな方が好きなのです。押すべきボタンがファーストビューの中に多すぎると、かえって訪問者の行動の選択肢が増えすぎて良くないような気がして。

アップルのスティーブ・ジョブズ的発想とでも言いましょうか(適当)

たとえば、クリック(タップ)できる部分が2か所しかなければ、訪問者は2か所のうちのどちらかを選んで押すと思います。
しかし、もしもボタンが10個並んでいれば、訪問者の行動もバラバラになってしまうんじゃないかなと思いまして。
あんまり多すぎる選択肢は良くない、ということと、ファーストビュー(パッと見)は、できるだけすっきりさっぱりしたい、という理由でパンくずリストも削除することにしました。

ということで、以下の部分を「HTMLの編集」で削除

      <b:include data='posts' name='mybreadcrumb'/>
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <b:include data='top' name='status-message'/>
      </b:if>


ヘッダー部分に設置してある「ページヘッダー」ガジェットを削除したり移動できるようにする

「HTMLの編集」で以下の部分を書き換える

【元のコード】
 <div id='header'>
    <b:section id='ヘッダー' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='自由ネコ2020 (Header)' type='Header' version='1'>

赤い文字の部分を削除、黒い太字部分を「false」に書き換える

【編集後】
 <div id='header'>
    <b:section id='ヘッダー'>
      <b:widget id='Header1' locked='false' title='自由ネコ2020 (Header)' type='Header' version='1'>

あとは「レイアウト」の画面に戻ってキーボードの「F5」キーを押して、再読み込みすればOK。ヘッダー部分にガジェットを追加、削除できるようになります。

記事表示部分に「ページヘッダー」やその他のガジェットを設置できるようにする

これも、先ほどのカスタマイズとほぼ同じ感じです。

以下の部分で、赤い文字の部分を削除します。

    <div id='main-content'>
    <b:section id='記事表示部分' maxwidgets='1' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'>

結果、こうなります。

    <div id='main-content'>
    <b:section id='記事表示部分'>
      <b:widget id='Blog1' locked='true' title='ブログの投稿' type='Blog' version='1'>

あとは「レイアウト」に戻って「F5」キーを押して再読み込み。
記事表示部分に他のガジェットを追加できるようになります。


これで何ができるようになるかというと、タイトル部分(ヘッダー)を記事表示部分の上に表示できるようになります。

スマホから見ると何も変わってないかもしれませんが、PCから見ると、ヘッダー部分が記事部分の上に設置されるので、サイドバーは画面上の一番上まで位置が上がります。
(あとは余白部分をCSSで調整しましょう)



ブログのタイトルと説明(ディスクリプション)を画像に置き換える

これは普通に、「レイアウト」→「ページヘッダー」ガジェットの編集で、タイトルと説明の代わりに画像を使えばOK。


この時、小さめな画像だと、スマホで表示してもそのままで大丈夫だと思うんですが、PCで見た時に、画像の両サイドに背景が見えちゃってると思いますので、背景も画像と同じ色にしちゃえば問題ないと思います。(私の場合は、画像が白なので、背景も白に)





ツイッターやってます
@gattoliberoTW


自由ネコ2020です。

「ツイッター以上ブログ未満」くらいの感じでユルく行く予定です。

自由ネコ(はてなブログ)

自由ネコのツイッター @gattoliberoTW

このブログを検索

QooQ