ブログタイトルとブログ説明文の位置を変更する

先日、新デザインシステム向けにブログのカバー画像を設定・表示する機能をリリースしました。
この機能を使うことで、お好きな写真をブログのカバー画像として使うことができるので、ぜひ使ってみてください。

さて、新デザインシステムで提供されているデザインの多くは、下の画像のようにブログのタイトルと説明文がヘッダーエリアの上下左右のおおよそ中央に表示されています。
ヘッダーエリア

この位置は、スタイルシート(CSS)を編集することで、例えば左上や右下などに変更することができます。
ブログのタイトルや説明文の位置を変えることで、ブログのカバー画像を設定する時に、画像に合わせた文字の位置でブログを表示することができますね。

ということで今回は、[ブログのタイトルと説明文の表示位置の変更方法] をご紹介します。

編集箇所を確認する

今回もスタイルシート(CSS)を編集することになるので、まずはどこを編集すれば良いのかを確認します。

  1. マイブログ > [デザイン] > [PC] > [デザイン設定] と順にクリックしてデザイン設定画面が表示されたら、現在ブログに適用されているデザイン名のリンクをクリックする。
  2. [スタイルシート編集] [HTML編集] [コンテンツHTML編集] のタブが表示されている画面に切り替わったら、 [スタイルシート編集] のタブをクリックする。
    ※デザイン設定画面でデザイン名をクリックしたら、通常は [スタイルシート編集] タブがアクティブな状態の画面(スタイルシート編集画面)が表示されます。
  3. 画面上に表示されているCSSのソースコードを一旦全てコピーし、メモ帳などのテキストエディタに貼り付けて、画面内検索( Ctrl + F )などの機能で、 .header と検索する。
  4. 以下のように設定されているコードが見つかる。
    これが今回の編集対象となります。
    【一例】

    シンプルA~D

    .header {
      padding: 80px 0;
      text-align: center;
    }
    

    Agent Map

    .header {
      padding: 80px 0;
      text-align: center;
      color: #cca844;
    }
    

    Time Line Green

    .header {
      width: 960px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding: 80px 0;
      text-align: center;
    }
    

上の手順で検索したソースコード(header要素)のうち、今回は以下のプロパティの値を変えて、文字の位置を変更します。

  padding: 80px 0;
  text-align: center;

今回編集するCSSについての解説

CSSの編集を行うには、やはり少しでもCSSの知識がないと思ったようなカスタマイズができません。
ということで、ここからは今回編集を行うプロパティについて解説していきます。

padding

CSSには「ボックスモデル」と呼ばれる領域の考え方があります。
この「ボックスモデル」とは、HTML文章の中の全ての要素は、「ボックス」と呼ばれる箱のような形で構成されているという考え方です。

1つの「ボックス」の構造は、以下の4つの領域から成り立っています。

  • 要素が入る「内容( content )」
  • 枠線「ボーダー( border)」
  • 枠線(ボーダー)の内側の余白「パッディング( padding )」
  • 枠線の外側の余白「マージン( margin )」

ボックスの構造
ボックスの構造

また、上記の各領域の境界線を「辺」と呼び、それぞれの領域は上下左右( top、bottom、left、right )の4辺に分けられています。

今回は padding (枠線の内側の余白)プロパティを設定して、ブログタイトルや説明文の位置を設定していきます。
padding プロパティは上下左右の値を指定してパッティング幅を決めます(これは margin プロパティも同様です)。
上下左右を異なるパッディング幅にしたい場合には、以下のようにスペースで区切って複数の値を指定します。

  • 値を1つ指定した場合:指定した値が [上下左右] のパディングになる。
  • 値を2つ指定した場合:記述した順に [上下] [左右] のパディングになる。
  • 値を3つ指定した場合:記述した順に [] [左右] [] のパディングになる。
  • 値を4つ指定した場合:記述した順に [] [] [] [] のパディングになる。

今回の編集対象となるheader要素のpaddingプロパティの場合、下記の通り、値が2つ指定されているため、 [上下 80px、左右 0 のパッティング幅] が指定されていることになります。

  padding: 80px 0;

text-align

text-alignプロパティは、文字列の横位置を調整するために使用します。
設定される値によって、配置される位置が変わります。

  • text-align: left;
    左寄せ
  • text-align: center;
    中央揃え
  • text-align: right;
    右寄せ

今回の編集対象となるheader要素のtext-alignプロパティの場合、下記の通り、center が指定されているため、 [文字列の横位置は中央揃え] ということになります。

  text-align: center;

CSSを編集する

上の説明を踏まえて、実際にブログのタイトルと説明文の位置を変えていきましょう。
※paddingプロパティの値を調整することでヘッダーエリアの高さ自体も変更することができますが、今回はデザインの初期値と同じ高さで設定していきます。

今回はこのブログと同じデザイン「Time Line Green」を使って設定変更していきます。

例1:左上に表示する

スタイルシート設定画面に設定されている変更前(初期値)のソースコードを変更後の内容に書き換えます。

変更前(初期値)
.header {
  width: 960px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 0;
  text-align: center;
}

変更後
.header {
  width: 960px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 160px; /* 上 0、左右 0、下 160px */
  text-align: left; /* 左寄せ */
}

ブログ上での表示
左上

例2:右下に表示する

スタイルシート設定画面に設定されている変更前(初期値)のソースコードを変更後の内容に書き換えます。

変更前(初期値)
.header {
  width: 960px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 0;
  text-align: center;
}

変更後
.header {
  width: 960px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 160px 0 0; /* 上 160px、左右 0、下 0 */
  text-align: right; /* 右寄せ */
}

ブログ上での表示
右下

注意

ブログに設定されているデザインによっては、カバー画像設定前後でブログタイトルと説明文の表示位置が異なる場合があります。

例えば「Time Line Green」でカバー画像の設定を行うと画面いっぱいに設定した画像が表示されます。
その状態で今回ご紹介したCSSの内容でブログタイトル・説明文の表示位置を変更すると、下の画像のようにカバー画像設定前に表示されていた位置と異なった場所に表示されるようになります。

例:カバー画像を設定した状態で右下にブログタイトル・説明文を表示させた場合

カバー画像設定後

いかがでしょうか?
あなたの設定次第で何通りものブログタイトルとブログ説明文の表示位置のパターンがあるので、ぜひお手元でも試してみてください!

※本記事でご紹介した内容はあくまで一例となります。
また、HTMLやCSSの編集に関して、編集箇所や内容および編集結果を含め、サポートは一切行っておりません。
あらかじめご了承ください。