2018年5月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でもスマホでも思ったとおりに表示されました。

0 件のコメント:

コメントを投稿

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