はてなブログの記事横幅・固定ページ横幅の変更カスタマイズ

こんにちは、ミニマリスト主婦のくうかです。

はてなブログの見た目でずーっと気になっていた部分があります。

「記事の幅」です。

はてなブログのデザインテーマ、Minimalismを使用していた頃は気にならなかったのですが、UnderShirtは少々幅が狭いと感じています。

特にスマホから見た時の固定ページの狭さが気になり過ぎて、修正に取り組み、やっと改善できたので記事にしておこうと思います。

くうか

視点を変えたら解決できたんです！

※現在はワードプレスへ移行しています。

はてなブログの固定ページとは

はてなブロガーの皆さん、固定ページは使っていますか？

私は、プロフィール・プライバシーポリシー・問い合わせのページに使っています。

固定ページとははてなブログProの契約のみ使用できる機能で、静的なコンテンツを作成することができます。
通常の記事とは別の、独立したページが作成可能です。

はてなブログ ヘルプ

固定ページを作成・編集する – はてなブログ ヘルプ 固定ページ機能を利用すると、投稿した順に時系列で扱われる通常の記事とは別に、固定URLのみで閲覧できる独立した特別なページを作成・更新できます。

プロフィールやプライバシーポリシーのページにシェアボタンや広告など、必要ないですもんね。

そして最近サイトマップを作ってみようかなと思っていたのですが、この固定ページの横幅が狭いせいで、作っても見づらいかも…と思い始めて直すことにしました。

はてなブログの固定ページの横幅のカスタマイズ

それでは固定ページの横幅をカスタマイズしていきましょう！

発想の転換が解決の糸口

さあ直すぞと意気込んだものの、なかなかそれをやっている方のページが見つかりません。

くうか

もしかして誰も直そうと思ったことない？

記事の横幅を調整するカスタマイズを見つけましたが、うまくいきませんでした。

諦めモードでしたが、

これは幅自体を広げるんじゃなく、幅の内側を広げるのでは…！

と気付きました(;´Д｀)

横幅のことばかり考えていて、なかなか思いつかなかった。

これに数時間費やしてしまったよ。汗

はい、記事内の余白を小さくする、が正解！！

固定ページ記事内の余白を小さくする

固定ページのみ修正を行いたい場合に行うカスタマイズです。

固定ページのCSSは、固定ページのhtmlに直接書き込みます。

【HTML編集】にして、

<style><!–
/* 固定ページの記事内の余白を消す */
#main-inner{
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
padding-left: 0px;
}
–></style>

を追加します。

該当ページのみ反映されるCSSなので、別の固定ページにも採用する場合は、ページ毎にこの作業を行います。

はてなブログの記事の横幅のカスタマイズ

固定ページだけでなく、全ての記事に対して記事内の余白を消したい場合はこのCSSを追加します。

こちらはデザイン＞CSSに追加します。
※追加の前にバックアップ（メモ帳等にコピペ）を行ってくださいね。

/* 記事内の余白を消す */
#main-inner{
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
padding-left: 0px;
}

元々のUnderShirtの設定では余白は40pxになっていました。

公開記事ページを、右クリック＞検証でCSSを見ることができます。

40pxでもPCは気になりませんでしたが、やはりスマホになると「ちょっと狭いよな～」と感じていたので、私も全記事に対して修正しました。

スマホでの見え方のビフォーアフター

微妙な変化です。笑

はてなブログの横幅カスタマイズまとめ

はてなブログで横幅が狭いと感じていて、CSSで横幅を調整してみても上手くいかない場合の対処です。

記事の幅を変更するのではなく、記事の余白を変更する。

くうか

これで解決することができました。