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

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

URLをコピーする
URLをコピーしました!

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

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

「記事の幅」です。

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

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

くうか

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

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

Contents

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

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

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

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

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

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

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

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

発想の転換が解決の糸口

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

くうか

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

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

諦めモードでしたが、

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

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

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

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

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

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

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

固定ページの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行に入る文字数も増えたので良かったです!

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

と言いつつ、ワードプレスに新サイトを作り始めてしまったので、しばらくやらないであろう。笑

ワードプレス、難しいけど色々とできるのが楽しすぎるのです!

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

関連キーワード #SWELL #ワードプレス #はてなブログ

この記事を書いた人

ゆるくミニマリストを目指している中1小5兄妹のママ。
整理収納アドバイザー2級、元システムエンジニア。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしてシンプルな空間にしたいと思っています。

コメント

コメント一覧 (2件)

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

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

コメントする

CAPTCHA


Contents
閉じる