ブログのタイトルの表示位置を変える

いきなり数学でも音楽でも音ゲーでもないが、一応備忘録なので。

今のブログのデザインはBordeauxをつかっているのだが、ブログタイトルもブログの説明文(タイトル下)も、更にその下の記事のタイトルも左詰まりではなんだか格好わるい。
f:id:landcelita:20180321014110p:plain




そこで、なんとかブログタイトルと説明文を中央に表示することにした。

だが、思った以上にこれに悪戦苦闘した。2時間も無駄にしてしまった。
一応備忘録として参考にさせていただいたサイトと、手順を載せておこうと思う。








ブログタイトルを中央に配置する

blog.minimal-green.com


このサイトがほぼ答えなのだが、デザインCSS

#blog-title {
    text-align: center;
}


を入れても上手くタイトルが真ん中にこなかった。

f:id:landcelita:20180321021027p:plain





そして、

>テーマによってはタイトルのclass指定が異なることがありますので、chromeの開発者ツールなどで検証してみて下さい。

の部分に書いてある通りに、いったん自分のブログをChromeで開き、表示>開発/管理>デベロッパーツールで検証した。現れたデベロッパーツールの画面の左上にあるインスペクトボタンを押す。
f:id:landcelita:20180321015842p:plain





それからブログタイトルテキストにカーソルをあわせる。
f:id:landcelita:20180321020027p:plain





どうやらいくつかブログタイトルテキストを包括する要素が有ることがわかる。
f:id:landcelita:20180321020350p:plain





そこで、上記CSSのコードの代わりの

#blog-title {

の部分を消して、代わりに、ブログタイトルテキストを包括する要素のID

#blog-title-inner{

#blog-title-content{

を入れていった。すると、blog-title-contentを入れたときに上手くタイトルが真ん中に表示されてくれた。
f:id:landcelita:20180321021206p:plain







説明文を中央に配置する

これはすぐできた。
ヘッダのタイトル下のHTMLを
f:id:landcelita:20180321021816p:plain





<center></center>で挟むだけで良い。(見栄えの良さを気にして改行も入れた)
f:id:landcelita:20180321021940p:plain







明日、姉の結婚式だと言うのに、寝不足が確定した。


(メモ)右の最新項目のタイトルがガタガタになっているのを直さねば