大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などについて投稿しています

ブログ全体を見やすくするために「幅」を変えて表示させよう【はてなブログ活用法】

(✿✪‿✪。)ノコンチャ♡

前回は記事中の「見出し」の装飾について、

幾つかの例を挙げて解説しました。

気に入ったものは自分のブログに反映してみてください。

 

今回は、

『ブログの幅』を変えてみたいと思います。

パソコンで表示した時に、

「何かバランスわるいな~」って思ったことないですか?

 

既存のテーマを選択したかた仕方ない・・・

と思ってあきらめていませんか。

 

それでは、

思い通りにカスタマイズできるかどうかやっていきましょう。

今回挑戦することは以下の通りです。

  • 『ブログ全体の幅』
  • 『メインの幅』
  • 『サイドバーの幅』

それぞれについて進めていきましょう。

 

f:id:success-life:20210929231700p:plain

ブログ幅のカスタマイズ

 

ここまでやってきたから、

もうやり方はお分かりかと思います。

 

それでは HTML と CSS を検証して調べ、

「カスタマイズCSS」で変更して確認していきましょう。

 

ブログ全体幅の変更

ブログ全体がハイライトされるようにすると、

  div #container-inner

がハイライト表示されました。

 

f:id:success-life:20210930175715p:plain

ブログ幅①

そのままクリックすると、

「あれっ・・・?」

CSS の記述が出てこない。

 

f:id:success-life:20210930180235p:plain

ブログ幅②

 

「どうしよう・・・」

HTML の記述では id="#container-inner" となってるし・・・。

では、

どこでブログ幅の定義をされているのでしょうか。

 

そこで HTML の一行上の記述に、

  id="#contaner"

を見つけました。

これをクリックしたら『ビンゴ!!』でした。

 

f:id:success-life:20210930175910p:plain

ブログ幅③

 

  width:100%;

  margin-left:auto;

  margin-right:auto;

  padding-bottom:30px;

  padding-top:37px;

 

「あれ? 幅 100% って・・・」

 

【お詫び】今回のこのブログテーマは、決められたフォームで作成されたものなので、私のような初心者では変更できませんでした。申し訳ございません。

 

では実際はどのくらいの幅なのでしょうか。

 

 

失敗例

この最大値を超えて記述したらどうなるのでしょうか。

 

f:id:success-life:20210930191607p:plain

ブログ幅④

 

例えば 1200px を指定したら・・・

 

f:id:success-life:20210930191727p:plain

ブログ幅⑤

 

このように他の要素との不具合が出てしまう恐れがあります。

十分注意して実践してください。

 

メイン幅の変更

f:id:success-life:20210930204947p:plain

メイン幅①

 

メイン幅はセレクタ『 #main 』で設定しているみたいですね。

 

f:id:success-life:20210930205318p:plain

メイン幅②

 

  width: 327px;

  padding: 10px 16px;

 

メイン幅が 327px で、

上下に 10px の余白、左右に 16px の余白を取っているようです。

ということは、

全体で 16+327+16=359px の領域設定がされていることになります。

 

サイドバー幅の変更

f:id:success-life:20210930210004p:plain

サイドバー幅①

 

サイドバー幅はセレクタ『 #box2 』で設定しているみたいですね。

 

f:id:success-life:20210930210215p:plain

サイドバー幅②

 

  width: 300px;

  padding: 10px;

 

サイドバー幅が 300px で、

上下に左右に 10px の余白を取っているようです。

ということは、

全体で 10+300+10=320px の領域設定がされていることになります。

 

さいごに

今回は、

もっと勉強が必要だ!

ということに気づかされました。

 

記事を書いていく中で、

「できる」と思っていたことが「できなかった」

こんな『失敗の回』でした。

 

やっぱり、

プロ級の方が作り上げたテーマを使っているので、

本当のカスタマイズにはもっと知識が必要なのです。

私のような初心者には、

どんなに足掻いても「入り込めない領域」があるのです。

 

色々と初心者なりに考えてできることをやっていこうと思います。

日々、反省・・・

 

実をいうと、

サイドバーに『アフィリエイトタグ』を入れたのですが、

またここで「知識不足」のため、

こんな風になってしまいました。

 

f:id:success-life:20210930215521p:plain

あとがき①

 

どうにかしてコレを見栄え良くしたい一心で、

本記事を書くに至ったのです。

 

f:id:success-life:20210930215714p:plain

あとがき②

 

これでどうなったか?

 

f:id:success-life:20210930215800p:plain

あとがき③

 

このくらいは無事にできました!

 

これだけの記事内容にしておけば良かったのですが・・・。

こんな失敗談もありました。

すみませんでした。

 

ちょっと調べたのですが、

  ✅ div id="container" ・・・ コンテナ

  ✅ div id="wrapper"     ・・・  メイン

  ✅ div id="box2"     ・・・ サイドバー

通常はこうなっているようです。

『コンテナ』の中に『メイン』と『サイドバー』が入っている、

そんな設計をされているそうです。

 

www.newinfo.press

 

もっともっと知識を習得して、

役に立てる記事を書いていきたいと思います。

 

ではまたお会いしましょう。