\ ポイント最大11倍! /

ブログ記事のタイトル部の余白を削って左寄せ(CSS調整)

当サイトには広告を含みます。

当サイトでは、広告掲載ポリシーに沿って広告を掲載しています。

"オススメ" として紹介している商品やサービスは、個人的にそう思えたものだけです。

共感、興味をもっていただけるものがあればご利用ください。

テーマのカスタマイズとして、ブログのページ上部(ヘッダ)の余白を削ってみました。

本記事は、WordPressでCSSを修正しヘッダ部分の余白を調整する方法をまとめるものです。

本記事の目的

  • WordPressでCSSを修正してヘッダ部分の余白を調整する。
目次

基本

前提

当サイトは、はてなブログ無料版を使用しています(2022年12月時点)。
ここでは、無料版で可能な範囲のカスタマイズ方法を紹介します。
WordPressの機能を全て使用できる場合は、別の方法もあるかと思います。

使用しているテーマは、Minimalismです。
はてなブログのテーマ ストアで人気1位のものです。シンプルでカスタマイズしやすく、レスポンシブ対応済みです。

他のテーマでも、CSSで調整できるものであれば同様にカスタマイズできると思います。

CSSの調整箇所の調べ方については、別記事にまとめる予定です。

カスタマイズの前と後

今回、上部の余白をできるだけ削ってみることにしました。

カスタマイズ前
カスタマイズ前

カスタマイズ後
カスタマイズ後

赤い枠で囲った箇所が、今回のカスタマイズ箇所です。
※赤い枠は注釈のために書き足したものです。

カスタマイズ箇所

はてなブログの管理画面から、
“デザイン” → “(スパナマーク)” → “デザインCSS”
のメニューを選択します。

続いて、CSSを記述できますを選択し、CSS編集用のテキストボックスを開きます。

"CSSを記述できます"を選択
"CSSを記述できます"を選択

前述の”カスタマイズ後”の画像と同じようにする場合は、テキストボックスに以下の内容を追記します。末尾への追記で大丈夫です。
あまり詳しくないので若干適当です。各項目の意味は後述します。

/* ---
ブログタイトル
--- */
#blog-title #title {
font-size: 35px;
line-height: 45px;
font-weight: 500;
display: inline-block;
}
#blog-title {
text-align: left;
padding: 15px 2% 15px;
}
#blog-description {
display: inline-block;
padding: 0 2%;
}
@media screen and (max-width: 1138px){
#container {
padding-top: 37px;
}
}
@media screen and (max-width: 640px){
#container {
padding-top: 0px;
}
}
/* ---
コンテンツ領域のmargin
--- */
@media screen and (min-width: 1139px){
#content {
margin: 5px 55px;
}
}

追記後、上部にある変更を保存するボタンを押すと反映されます。

変更を保存するボタン
変更を保存するボタン

元に戻したい場合は、追記した内容を削除して変更を保存するボタンを押します。

これで、カスタマイズは完了です。

カスタマイズ後
カスタマイズ後

各項目の説明は後述します。

詳細

各項目の説明

前述の追加分のCSSの内容について説明していきます。

#blog-title#titleの調整

セレクター#blog-title(<header>要素)、#title(<h1>要素)を指定してブログタイトル部分を調整します。

#blog-title、#title
#blog-title、#title

#blog-title #title {
font-size: 35px;
line-height: 45px;
font-weight: 500;
display: inline-block;
}
#blog-title {
text-align: left;
padding: 15px 2% 15px;
}
  • font-sizeline-heightfont-weight
    文字の大きさ、行の高さ、太さを調整します。

  • display: inline-block;
    ブロック要素でなくインラインブロック要素として扱うことで、#blog-title#blog-descriptionが水平に並ぶようにします。

  • text-align: left;
    左寄せにします。

  • padding
    余白を指定します。これが削った余白の大部分です。
    テーマのデフォルトでは、上下に50px確保されていました。

#blog-descriptionの調整

セレクター#blog-description(<h2>要素)を指定してブログ説明の部分を調整します。

#blog-description
#blog-description

#blog-description {
display: inline-block;
padding: 0 2%;
}
  • display: inline-block;
    ブロック要素でなくインラインブロック要素として扱うことで、#blog-title#blog-descriptionが水平に並ぶようにします。

  • padding
    #blog-description(<h2>要素)に対する余白を指定します。

#containerの調整

セレクター#container(<div>要素)を指定してブログ記事部分を調整します。

※ここは調整するつもりはなかったのですが、タイトル部分が最上部のグローバルヘッダにかぶってタイトル文字が読めなくなるケースが生じたので、追加で調整しました。

タイトル部分が最上部のグローバルヘッダにかぶるケース
タイトル部分が最上部のグローバルヘッダにかぶるケース(タイトルが読めない)

もともとテーマのデフォルトでは、タブレット程度の大きさの画面(max-width: 1138px)向けにpadding-top: 0px;が指定されていましたが、前述の#blog-titlepaddingを小さくしたことにより、タイトル部分が最上部のグローバルヘッダ(#globalheader-container)にかぶるケースが生じました。これを回避しておきます。

先ほどの#blog-title#blog-descriptionより大きな範囲です。

#container(記事部分全体)
#container(記事部分全体)

@media screen and (max-width: 1138px){
#container {
padding-top: 37px;
}
}
@media screen and (max-width: 640px){
#container {
padding-top: 0px;
}
}
  • padding-top
    今回使用しているテーマはデスクトップファーストで記載されているようなので、それに合わせて大きな画面の定義から順に記載します。
    メディアクエリ(@media)で、タブレット程度の大きさの画面(max-width: 1138px)向けにはpadding-top: 37px;を、スマホ程度の大きさのウィンドウ(max-width: 640px)向けにはpadding-top: 0;を指定します。
    スマホ程度の大きさのときは、padding-top: 0;でもグローバルヘッダにかぶらないようです。詳細は不明です。
    このテーマのデフォルト(デスクトップ向け)はpadding-top: 37px;です。

#contentの調整

セレクター#content(<div>要素)を指定してブログ記事部分を調整します。

#content
#content

@media screen and (min-width: 1139px){
#content {
margin: 5px 55px;
}
}
  • margin: 5px 55px;
    余白を指定します。
    テーマのデフォルトは、margin: 35px 55px;です。

まとめ

本記事では、WordPressでCSSを修正しヘッダ部分の余白を調整する方法をまとめてみました。

初めてテーマをカスタマイズしてみましたが、思っていたより調整できました。

参考情報、関連記事等


ウェブ開発の人気オンラインコース

日ごろのお買い物等にご利用いただけると当ブログ継続の励みになります

出張先、旅行先のホテル予約はお早めに

あまり知られていない50%OFF商品専用ページ (Amazonのヤスイイね)
シェア=ありがたみ
  • URLをコピーしました!
目次