Blogger(QooQ)ブログの横幅を調整してみた

こんばんは。
tanayasu99(たなやす)です。

スマホだと、そんなに違和感が無いのですが、パソコンのブラウザウィンドウ最大で見た場合に「(メインカラムの)横幅が長すぎて、なんとなく見ずらい...」と思っていました。今回は、その辺を調整してみましたというお話です。

レイアウト(デザイン)テーマは「QooQ」を使っているので、他のテーマには使えない内容ですかね。

メインカラムの横幅を調整してみた

Chromeのデベロッパーツールを使い、プレビューしながら調整を試みます。

メインとサイドバーを囲む要素「div.container」があったので、試しにこいつを調整してみます。

「.container」の「width」を「86%」→「70%」に調整。

さらに、「70%」→「60%」に調整。個人的な好みは、ここら辺😅

記事一覧の見栄えを確認。
・Before(86%...自動調整みたい)

・After(60%)

ここまではChromeのデベロッパーツールを使った調整確認なので、最後BloggerのカスタムHTMLコードに、次のコードを追加してみました。

/* パソコン横幅設定 */
.container {
    width: 60%;
}

追加場所は、「全体設定」の「2カラム設定」辺り。

だが、しかし、これはモバイル表示(小さい画面)では、記事一覧表示のみ気に入りませんでした🤨
左：Before(96%？)
右：Afrer(60%になってしまった)

あー...モバイル表示にも影響してしまい、無駄に縮んだなぁ。

その日は元に戻し、翌日あらためて見直し、モバイル表示に対応してくれる「@media」の記述内に次のコードを追加したら出来ました😀

.container {
    width: 96%;
}

見た目は...モバイル表示の調整は意図していないので、現状維持していれば今回はＯＫ。
左：Before(96%？)
右：Afrer(96%)

マージンが気になったので調整してみた

メインカラムとサイドバーの間にあるマージン(幅)が気になったので、こちらも調整してみました。
・Before(幅width設定：30px)

・After(幅width設定：10px)

コードの編集は次のとおりです。30pxだったところを10pxにしただけ。

#main-content{
	margin-right: 10px;
	width: calc(100% - 346px);
	flex-shrink: 0;
}

って、やっていくと、サイドバーのウィジェット間のマージンも気になってしまい、こちらも調整してみました。
・Before(マージン設定：30px)

・After(マージン設定：10px)(理想)

どうやら、「.widget」にある「margin」が関係しているみたいですね。...各ウィジェット毎にあるのか...。
「div class="widget Profile"」の指定内容が、どこに記述されているのか分からず、cssファイルをクリックしたら、「.widget{margin: 30px 0;}」があり、試しに10pxにしたら、理想通りの結果を得られた。

さて、カスタムHTMLの中でどの部分だろうかと...見つからない。「サイドバー」以下にある内容で「#sub-content .widget」があり、そこに「margin: 10px 0;」を追記したが、理想通りにはいかず、試行錯誤した結果、次のコードで落ち着いた。

#sub-content .widget{
	background: $(other.back);
	border-radius: 2px;
  margin: 0 0 10px;
}

1つ目の「0」は上のマージン、2つ目の「0」は「左右」のマージン、3つ目の「10px」は「下」のマージンを示しており、これで満足しました。

理想通りになって良かった。

モバイル表示では、2カラム(メインとサイド)構成ではないのですが、一応念のため確認してみた。30pxから10pxへ狭まったことが反映されているが、まぁそこまで変ではないし、気にならないだろう。

後記

地味な変更でしたが、微妙に時間がかかって達成感半分って感じ🤔。メインカラム・サイドバーという構成をやめて、メインカラムのみっていうのもありかなぁって思うのですが、ちょっとそんな勇気はない😓。

ヘッダー(ブログタイトル付近)をもう少し、個性的なデザインにしても良いような気はしているけど...やらなそう。

おわり。
↓これをクリックすると、私のやる気が出ます。ブログ村が開かれるようになっていますが閉じて良いみたいです。よろしくお願いします。