• 2018-05-19
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/05/blogger100.html

Bloggerの横幅を100%にする

このブログはBloggerでお送りしています。

BloggerはGoogle運営の強大な基盤の上に展開するブログサービスで、圧倒的な基盤の強さとレスポンス速度が魅力。

しかしちょっと仕様に特有の部分があって、カスタマイズが難しいのが難点です。
でも頑張ればこのブログみたいに好き放題に改造出来ます。

カスタマイズ方法

管理画面の「テーマ」⇒「HTMLの編集」から、ソースを直接編集します。

以下の2カ所を探してコメントアウトすればOKです。


コメントアウト前

body {
  min-width: $(content.width);
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
  min-width: $(content.width);
  max-width: $(content.width);
 _width: $(content.width);
}
#layout .content-outer {
    min-width: 0;
    width: 800px;
}

コメントアウト後

/*
body {
  min-width: $(content.width);
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
  min-width: $(content.width);
  max-width: $(content.width);
 _width: $(content.width);
}
*/
/*
#layout .content-outer {
    min-width: 0;
    width: 800px;
}
*/

これで横幅100%が達成出来ます。

BootStrapは諦めろ

横幅を100%にするとビローンと画面全域にブログが広がってしまって見づらいので、私はBootStrapを追加して表示しているパソコンのブラウザサイズに応じて手頃なサイズ横幅になるようにしようと思いましたが……。

結論を言うと、BloggerにBootStrap投入はやめた方が良いです。

Bloggerに元から備わっているスタイルシートとBootStrapが喧嘩してしまうんですよ。

パソコン上は綺麗に見えても、スマホモードで崩れるなどの罠がつきまとってきて、どこで何が崩れるか分かりません。

私の場合、BootStrapの中から欲しい部分だけをピンポイントで切り取り、更にカスタマイズしてセットするという方法にしました。
横幅調整用のcontainer属性です。

.container {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

これでPCでもスマホでも思ったとおりに表示されました。

4 件のコメント:

  1. こんばんは。
    ウチのブログでも試しにカスタマイズしてみました。
    ウチの場合はサイドバーには大したコンテンツは置いてないので
    一定幅以下になるとサイドバーを消すようにしました。(検索窓のみヘッダーに表示)
    レスポンシブデザインのテーマに変えればこんな苦労しなくてもいいんでしょうけどね。
    今のシンプルテーマに愛着があるもんで中々変える気になれないです(^^;

    返信削除
  2. 拝見しました。綺麗に出来ていると思います。
    私のブログへのリンクも張って頂いて嬉しいです。(^_^)
    カスタマイズもかなり気合い入っていますね。
    全体的に輪郭が丸いのが柔らかい感じで良いです。私も頑張らねば。

    返信削除
  3. ご訪問ありがとうございます(^^)丿
    1日数人来るかどうかの辺鄙なブログですが、
    カスタマイズは自己満で納得いくまで拘ってます(^^;
    以前は全体的に角張ったデザインだったのですが、
    Twitterなど、最近こういう丸いデザインをあちこちで見かけるようになって
    流行りに乗ってみました(笑)
    ウズマスターRYUさんも是非デザインも凝ってみてくださいませ。

    返信削除
  4. ありがとうございます。がんばります。(^_^)

    返信削除

お気軽にコメント下さい。