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

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

自分好みの『はてなブログ』に変身させよう【ブログタイトル編】

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

はてなブログで「ブログ活動」を楽しみだしたのですが・・・

テーマを活用して簡単にスタートすることができました。

そんな中、

「ブログのデザインを自分好みに変更したい!」と思っても、

初心者にとっては困惑の2文字しかないのが悔しい。

そこで、

簡単にできるカスタマイズを学んでいこうと思いました。

今回は、

ブログの顔である『ブログのタイトル』について、

文字の大きさや色を変える手順について解説していきます。

 

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

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

 

HTML と CSS については、

前回お話した通り、

Google Chrome を使ってできるので、

難しく考えずに実践していきましょう。

www.newinfo.press

 

タイトル文字を大きくする

ブログを表示させ、右クリックして【検証】をクリックします。

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

Google Chrome ①

 

画面の右側に HTML と CSS の編集画面が表示されます。

その左上の矢印ボタンをクリックします。

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

Google Chrome ②

 

『ブログタイトル』にカーソルを移動させると、

ハイライト表示されますのでクリックします。

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

Google Chrome ③

 

すると、

右側に『ブログタイトル』の HTMLCSS が表示されます。

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

Google Chrome ④



上部の HTML を見てみると、

  <h1 id="title"> </h1>

の間がハイライト表示されているのがわかります。

『ブログタイトル』であることを示す「 h1 タグ 」、

「 #title 」という部分で装飾していますという意味です。

それでは次に、

下部の CSS をスクロールして「 #title 」を探してみましょう。

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

Google Chrome ⑤

 

そこに、

  font-size : 1.75em ;

ここが『文字の大きさ』を指定している部分です。

つまりこの数字を変更すればいいのです。

 

カスタマイズ手順

先程見つけた「 #title 」の部分を指定してコピーします。

右上の『 × 』ボタンをクリックして編集画面を閉じます。

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

カスタマイズ手順①

 

以前学んだ【ダッシュボード】から作業します。

ダッシュボードから【デザイン】をクリックします。

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

カスタマイズ手順②

 

【カスタマイズ】【{}デザインCSS 】の順にクリックします。

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

カスタマイズ手順③

 

CSS 記述のダイアログが開きますので、

先程コピーした「 #title 」の部分をペーストします。

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

カスタマイズ手順④

 

font-size で指定されている「1.75」を変更します。

今回は「3.5」に変更します。

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

カスタマイズ手順⑤

 

変更したら【変更を保存する】をクリックします。

ではブログを確認してみましょう。

 

【 変更前 】

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

ブログタイトル①

【 変更後 】

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

ブログタイトル②

 

いかがですか?

文字が大きくなり読みやすくなったと思います。

 

しかし、

文字色が「白」だとあまり・・・

 

それでは『文字色』も変更してみましょう。

 

タイトルの文字色を変更する

文字の大きさを変えた手順と同じです。

 

カスタマイズ手順

☑ブログを表示します

☑右クリックして検証をクリックします

☑HTML・CSS が表示されたら矢印ボタン(左上)をクリックする

☑CSS 表示部から #title を探す

『 color 』の記述範囲をコピーする

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

カスタマイズ手順⑥

☑編集画面を閉じる

☑ブログのダッシュボードを開く

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

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

☑コピーしていた CSS を張り付ける

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

カスタマイズ手順⑦

☑指定している「 #fff 」「 #f5a2a2 」に変更する

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

カスタマイズ手順⑧

 

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

☑ブログを表示して確認する

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

カスタマイズ③

 

さいごに

いかがでしたか?

思ったより簡単にカスタマイズできたと思います。

実際は、

検証で表示される HTML と CSS の編集画面で変更も可能です。

しかし、

知識が未熟な初心者がカスタマイズするときは、

必ずコピーして『デザインCSS』にペーストして作業しましょう。

 

次回は、

『タイトルの背景と位置』について解説します。

 

www.newinfo.press

 

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