[ウェブリブログ] ブログタイトルを中央から別の位置に配置する

2019年07月02日に"ウェブリブログ"が大幅リニューアルされ、旧ブログで利用していたテンプレートの一部廃止に伴い HTML の構造が変わり、並びに適用していた CSS がリセットされたのを受け、再度 HTML を解析しながら CSS の組み換えが必要になった。

今回は中央配置になっているブログタイトルを左上寄せにするなど位置を調整する CSS を紹介する。

尚、下図の画面キャプチャは「ウェブリブログ事務局」のデザインレイアウトを参考にしたもので、このデザインテンプレートを基本とする。
実際の「ウェブリブログ事務局」のブログはこれから紹介する CSS の変更はされていない点と当ブログとは関係ないので注意のこと。

1.ブログタイトルの持っている領域を確認する


CSS で位置を変更する場合は、移動させたい要素の領域を知っておく必要がある。
領域を知るには枠線(border)を適用するとわかりやすく、余白の有無だけでなく枠線が出ない場合は CSS を編集する class が違うことがわかる。
h1 に対して赤色の枠線を付けると下図のようになり、文字列が中央に位置しているのがわかる。

ブログタイトルに赤枠を付ける


2.ブログタイトルを左上に配置する


CSS を次のように修正するとブログタイトルは上寄せになるが、左右に余白がでるのがわかる。


.Header .Header__inner {

padding: 0 30px;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

}

 ▼

.Header .Header__inner {

}


ブログタイトルを左上寄せする


3.ブログタイトルを左上に配置する


ブログタイトルの左右の余白は次のように修正すると無くなる。

.Header {

max-width: 100%;

width: 100%;

padding: 0 25px;

}

 ▼

.Header {

max-width: 100%;

width: 100%;

padding: 0px;

}


ブログタイトルの左右の余白を消す


見た目には多少の余白があったほうが見やすいので、ブログタイトルの上部と左部には 5px から 10px 程度の余白があるのが好ましい。

この記事へのコメント