MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。

はてなブログの記事横幅・固定ページ横幅の変更は余白調整で解決

こんにちは、主婦ブロガーくうかです。

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

『記事の幅』です。

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

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

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

Contents

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

はてなブロガーの皆さん。固定ページ、使っていますか?
私は、プロフィール・プライバシーポリシー・問い合わせのページに使っています。

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

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

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

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

発想の転換が解決の糸口

さあ直すぞと意気込んだものの、なかなかそれをやっている方のページが見つかりません。
もしかして誰も直そうと思ったことない?(ノД`)・゜・。

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

諦めモードでしたが、

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

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

横幅のことばかり考えていて、なかなか思いつかなかった(;^_^A
これに数時間費やしてしまったよ(笑)

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

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

固定ページのみ修正を行いたい場合に行うカスタマイズです。
固定ページの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に慣れている方には何てことない修正かも(;´Д`)
私のようなCSS初心者はなかなか気づけませんでしたが、ずっと気になっていた固定ページの幅の狭さが改善されたし、1行に入る文字数も増えたので良かったです!

これでサイトマップ作れる~(^^♪

と言いつつ、ワードプレスに新サイトを作り始めてしまったので、しばらくやらないであろう(笑)
ワードプレス、難しいけど色々とできるのが楽しすぎる!

途中経過も時々このブログでお知らせしていきたいと思います。
まだ報告できるような状態までいってません(;^_^A

本日も最後までご覧いただき、ありがとうございました。 

シンプルライフの参考になる記事をもっと読む(ブログ村)

読んだよ!のクリック嬉しいです…♪

にほんブログ村 にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

ピックアップ記事

カテゴリー別の人気記事

コメント

コメント一覧 (2件)

  • ちょうどスマホから見たときの固定ページ横幅が気になっていました!!
    さっそく実装させていただきました♡ありがとうございます!

  • ゆんさん
    おお、、お役に立てたとは嬉しいです!!
    やはりスマホの幅は気になりますよね(^^;
    コメントしていただいてありがとうございました(^^♪

yun810 へ返信する コメントをキャンセル

CAPTCHA


Contents
閉じる