EDIT

1カラムレイアウトにしてみた (1カラム化手順を追記しました)

｜2024/01/07 ｜4
アイキャッチ

前回の記事の締めでもうカスタマイズはやり尽くしたと書いたけど、その舌の根も乾かぬうちにまた弄ってしまいましたw
今回の改造は、サイドバーを取っ払って1カラムにするという、結構大掛かりな変更です。
display:none とかで非表示にするとかいう小細工ではなく、HTML からサイドバーセクション丸ごと消し去っています。
PCやタブレット(横向き)でもスマホ閲覧時とほぼ同じようなレイアウトになりました。

きっかけとなった素敵なブログ

変えようと思ったきっかけは、たまたま見つけたこちらのブログ。

ファビコン遠北ほのかのイラストサイト
サムネイル
遠北ほのかのイラストサイト
簡単なかわいいイラストの描き方（手帳用ボールペンイラスト）と、遠北ほのかの水彩イラストサイト
https://www.surariru.tokyo/

こちらも一見して QooQ だと気づかないほどに大胆にカスタマイズされてるようですが、その最大の要因であるサイドバーのないスッキリした1カラムデザインに惹かれ、ウチもやってみたいという衝動に駆られてしまったというわけです。

早速やってみたところ、横に余計なものがなくなったことで記事に集中できるし、記事エリアが中央に来たことで見やすくなったと思うのですがいかがでしょう？
少なくとも自分では気に入っています。こちらのブログのようなオシャレ感や可愛さはないですけどw

カスタマイズ詳細

横幅

記事エリアの横幅は、上記の 遠北ほのか さんは目一杯広め(width:100%)にされていますが、ウチはとりあえず max-width:950px にしてみました。(ヘッダーとフッターは 1300px)

ガジェットの整理

サイドバーを取っ払うに当たって一番問題になるのはガジェット類の置き場をどうするかということですが、今まで置いていた「最新記事」や「最新コメント」はたぶんあまり活用されてなかった？という判断で思い切って廃止して、残りの「ラベル」「アーカイブ」「プロフィール」「ページリスト」をフッターエリアに移動させました。
例えば Contempo みたいにサイドバーを出し入れする仕様にできればいいんだけど、ハードル高くて無理だし…まあガジェットの整理もできたしこれで充分満足です(~_~;)

フッタージャンプボタン

フッターへの移動を補助するために、ナビバー内にフッターに飛ぶ↓ボタンを仕込んでみました。
ページトップボタンの下に下向きロケットを置くことも考えましたが、なんか墜落してるみたいに見えるのでやめましたw

【追記】結局の下にを置きました。
下にジャンプするボタンについて、こちらの記事に追記しました。
→ ページトップに戻るボタンの設置(ページ最下部へ飛ぶボタンを追加しました)

QooQ に見えない？

さて、これでますます QooQ の原型をとどめないほどに見た目が大きく変化したわけですが、昨日こんなブログ記事を見つけました。

こちらのブログ、現在はFC2に移転されています。

ファビコンしまうまの雑記ブログ
サムネイル
bloggerのQooqをカスタマイズしているサイト
Qooqのカスタマイズがまとまっている調べ物をしていたら、Qooqのカスタマイズをしているサイトを見かけました。ブログを高速化しました | ふじろじっく【Contempo他】Bloggerにはてなスターを付ける | ふじろじっく【QooQ】関連記事ウィジェットのデザインカスタマイズ | ふじろじっくはてなスターとかつけることができるんだ……！このブログを運営している方が、Qooqを使っているらしいので、Qooq関連のカスタマイズが読めると。関...
https://e0n18n1l2zo5.blog.fc2.com/blog-entry-167.html

おそらく1カラム化直後に当ブログを訪れたのだと思われますが、QooQ だと気づかなかったそうですw
いやいや、遠北ほのかさんもそうですが、ウチよりすごい所は他にもまだまだありますよw
例えばこちらとか…

こちらのブログ、現在は JetTheme に変えられています。

ファビコンafter work lab
サムネイル
after work lab
https://www.heavy-peat.com/

最初に見た時カスタマイズの凄まじさにマジでビビりましたw
これこそ QooQ に見えないw

さすがにここまでやろうとは(絶対ムリなので)思いませんが、また隣の芝生が青く見えるようなことがあったら、美味しいとこだけ参考にして真似してみようと思います。

2021/03/26 追記: QooQ を1カラム化する手順

ここ最近、(うちを真似て？)1カラム化に踏み切っている QooQ ユーザーさんをたまに見かけますが、中にはカスタマイズが不十分でレイアウトが崩れていたりするサイトも。
また、1カラム化したいけど、カスタマイズに自信がなくて躊躇されている方もいるようで。
というわけで、QooQ の1カラム化の手順を簡単に書いておきますので、参考にどうぞ。(手順はカードタイプ、リストタイプ共通です)

HTMLを編集しますので必ず予めバックアップを取った上で自己責任で行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。
サイドバーウィジェットも全て消えてしまいますので、必要なものはフッターに移動(レイアウト編集でドラッグ&ドロップ)させるなどの措置を取ってください。

手順①: サイドバーセクションの削除

HTML 編集画面で 以下のタグを探します。

<div id='sub-content'>

このタグの行番号の横の▼をクリックして折りたたみます。

HTML
↓↓
HTML2

1行に折りたたまれたタグを削除、又はコメントアウトします。

<!-- <div id='sub-content'>↔</div> -->

HTML3

手順②: CSSの変更

/* 2カラム設定 */ の所を以下のコードと置き換えます

/* 2カラム設定 */
#main-content {
  margin-right:auto;
  margin-left:auto;
  margin-top: 0;
  margin-bottom: 3em;
  max-width: 980px;
}

当ブログの設定値です。
上下margin や max-width の値はお好みで調整してください。

2022/07/19 追記: トップページは2カラムのままで個別ページを1カラム化

リモスキさんが最近1カラム化されましたが、こちらはトップページは2カラムのままで記事・固定ページだけを1カラム化させています。

こちらのブログ、現在は JetTheme に変えられています。

ファビコンリモスキ
サムネイル
ブログを１カラムに変更した理由と、変更した結果（直帰率・平均ページ滞在時間） | リモスキ
ブログのレイアウトを２カラムから１カラムに変更しました。この記事ではレイアウトの変更理由と、その結果直帰率がどうなったかなどを紹介したいと思います。
https://www.limosuki.com/2022/07/blog-columns-2to1.html

これいいですねえ。うちは今のところサイドバーに置きたいウィジェットはないので取り入れる予定はないですが、今後もしやってみたくなった時のための覚書として QooQ でのカスタマイズ手順を書いておきます。QooQ ユーザーでやってみたいという方もご参考にどうぞ。

サイドバーを完全に非表示にするやり方と、デフォルトのスマホ表示時のようにサイドバーウィジェットを下に落とすやり方の2パターンあります。

その1: サイドバーをウィジェットごと非表示にする場合

手順① サイドバーセクションのタグを変更

まずこのタグを探し、下のように変更します。

<b:section id='サイドバー'>
↓↓ 
<b:section cond='!data:view.isSingleItem' id='サイドバー'>

手順② CSS の変更

CSS の /* 2カラム設定 */の所を全て削除します。

次に ]]></b:skin> の下に以下のコードを追記します。

<style>
<b:if cond='!data:view.isSingleItem'>/*<![CDATA[*/
/* 2カラム表示スタイル */
#main-inner {
  display: flex;
}
#main-content {
  margin-right: 30px;
  width: calc(100% - 346px);
  flex-shrink: 0;
}
#sub-content {
  margin-top: 30px;
  width: 316px;
  flex-shrink: 0;
}
@media(max-width :768px) {
  #main-inner {
    display: block;
  }
  #main-content {
    margin-right: 0;
    width: 100%;
  }
  #sub-content {
    width: 100%;
  }
}
/*]]>*/<b:else/>/*<![CDATA[*/
/*1カラム表示スタイル*/
#main-content {
  margin: 0 auto 3em;
  max-width: 980px;
}
/*]]>*/</b:if>
</style>

その2: サイドバーウィジェットを下に落とす場合

HTML の変更の必要はなく、CSS のみ変更します。

その1と同じくまず CSS の /* 2カラム設定 */の所を全て削除します。

]]></b:skin> の下に以下のコードを追記します。

<style>
<b:if cond='!data:view.isSingleItem'>/*<![CDATA[*/
/* 2カラム表示スタイル */
#main-inner {
  display: flex;
}
#main-content {
  margin-right: 30px;
  width: calc(100% - 346px);
  flex-shrink: 0;
}
#sub-content {
  margin-top: 30px;
  width: 316px;
  flex-shrink: 0;
}
@media ( max-width : 768px ) {
  #main-inner {
    display: block;
  }
  #main-content {
    margin-right: 0;
    width: 100%;
  }
  #sub-content{
    width: 100%;
  }
}
/*]]>*/<b:else/>/*<![CDATA[*/
/*1カラム表示スタイル*/
#main-inner {
  display: block;
  margin: 0 auto;
  max-width: 980px;
}
#sub-content {
  margin-top: 2em;
}
/*]]>*/</b:if>
</style>

以上です。これでトップページは2カラムのままで個別ページは1カラムになっているはずです。