大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などについて投稿しています

『はてなブログ』自分で確認しながらカスタマイズを学ぶ【ブログタイトル編】

(✿✪‿✪。)ノコンチャ♡

前回はブログタイトルの文字の大きさを変更したり、

文字色を変更する手順について解説しました。

今回は、

前回の続きです。

『ブログタイトルの背景と位置』について、

カスタマイズしていきますので一緒に学んでいきましょう。

f:id:success-life:20210927213123p:plain

ブログタイトルのカスタマイズ②

 

「ブログタイトル」は、

訪問者が一番初めに目に入ってくる部分です。

あなたのブログの印象を表現できるようにしましょう。

 

背景に色を付ける

ブログタイトルの背景の場合は、

タイトルではなく「テキストを囲んでいるボックス」に色を付けます。

 

では検証画面を表示し、

タイトルの背景の HTML と CSS を調べてみましょう。

f:id:success-life:20210927220720p:plain

タイトル背景カスタマイズ①

 

ブログタイトルの背景は『 #blog-title 』に記述されているのがわかります。

 

CSS の中で『 #blog-title 』を探しコピーして、

【{}デザインCSS 】に張り付けます。

 

『 background-color 』が、

#000(黒)」に設定されているのがわかると思います。

ここを、

#ff0000(赤)」に変更してみましょう。

 

f:id:success-life:20210927223411p:plain

背景カスタマイズ②

【変更を保存する】をクリックして、

確認してみましょう。

 

【 変更前 】

f:id:success-life:20210927223826p:plain

背景カスタマイズ③

 

【 変更後 】

f:id:success-life:20210927222555p:plain

背景カスタマイズ④

 

赤色に変更されたのが確認できます。

 

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

先程コピー&ペーストした部分で、

『padding』がタイトルの位置を指定しています。

 

デザインCSS に追加してみましょう。

  padding-left: 60px;

f:id:success-life:20210927230401p:plain

背景カスタマイズ⑤

 

【変更を保存する】をクリックして、

どのように変更されたか確認してみましょう。

 

【 変更前 】

f:id:success-life:20210927222555p:plain

 

【 変更後 】

f:id:success-life:20210927230458p:plain

背景カスタマイズ⑥



ブログタイトルの位置が少し右に移動したのがわかります。

つまり、

『 padding-left 』は左側にスペースを空けたい場合に指定します。

 

ブログ説明文の位置

ブログを表示して『ブログ説明文』を見て感じたことは、

左に寄っていることです。

全体の真ん中に位置した方がバランスが良いと思いました。

 

f:id:success-life:20210928000747p:plain

背景カスタマイズ⑦

 

前項でもやったように、

『 padding 』を使って位置の設定をしてみましょう。

 

☑ブログを表示する

☑右クリックして【検証】をクリックする

☑検証画面の右上にある矢印ボタンをクリックする

☑「ブログ説明文」にカーソルを移動してクリックする

 

f:id:success-life:20210928003627p:plain

背景カスタマイズ⑧


HTML を確認すると、

  <div id="top-editarea": 説明文 </div>

つまり、

  #top-editarea』

に位置を指定すればいいと考えられます。

 

しかし、

CSS を調べても『 #top-editarea 』が見つかりませんでした。

 

「それなら追加してしまえ!」

って思っちゃいました。

 

☑ブログのダッシュボードを表示する

☑デザインをクリックする

☑【カスタマイズ】➡【{}デザインCSS 】をクリックする

 

  div#top-editarea {

    padding: 20px 0 0 230px;

  }

 

を追加記述してみました。

f:id:success-life:20210928013805p:plain

背景カスタマイズ⑨

 

☑【変更を保存する】をクリックする

☑【ブログを確認する】をクリックする

 

f:id:success-life:20210928014459p:plain

背景カスタマイズ⑩

 

無事に、

真ん中あたりに位置させることができました。

 

全体の真ん中

数値で位置決めすることはできるようになりました。

でも、

簡単に見栄え良くするには『真ん中』ですよね。

 

  text-align:center;

 

これは私も大好きです。

「真ん中に位置決めしなさい」という万能振りです。

では先程記述した

『ブログタイトル』と『説明文』の CSS に追加してみましょう。

 

f:id:success-life:20210928182133p:plain

背景カスタマイズ⑪

 

  /*』『*/

これで囲むと、

「コメント文」の扱いになり無視されます。

 

どうなったか確認してみましょう。

f:id:success-life:20210928182446p:plain

背景カスタマイズ⑫

 

さいごに

今回は、タイトルの背景の色をカスタマイズしてみました。

また同時に、

タイトルの位置をバランスよく決めてみました。

文字だけの場合は、

真ん中に配置した方が見栄えが良いと思います。

 

『 padding の記述』について学べたのではないかと思います。

例えば、 

padding-left では、左側にスペースを空けます。

もちろん padding-right は右側にスペースを空けます。

 

更に padding では、4つの数値(px)を記述しました。

これは、

対象要素の」「」「」「」の順で記述します。

ただし、

1つの数値(px)だけ指定すると、

上下左右の全方向にスペースが空きます。

 

実際に追加して確認するのが習得のコツです。

「もう少し移動したい」と思ったら、

数値を変えて確認してみる。

 

この繰り返しです。

 

次回は、

記事中の『見出し』をカスタマイズしてみます。

かなりブログを読みやすくする効果がありますので、

必ず覚えてカスタマイズしてみてくださいね。

 

www.newinfo.press

 

ではまたお会いしましょう。