(✿✪‿✪｡)ﾉｺﾝﾁｬ♡
はてなブログで「ブログ活動」を楽しみだしたのですが・・・
テーマを活用して簡単にスタートすることができました。
そんな中、
「ブログのデザインを自分好みに変更したい！」と思っても、
初心者にとっては困惑の２文字しかないのが悔しい。
そこで、
簡単にできるカスタマイズを学んでいこうと思いました。
今回は、
ブログの顔である『ブログのタイトル』について、
文字の大きさや色を変える手順について解説していきます。
HTML と CSS については、
前回お話した通り、
Google Chrome を使ってできるので、
難しく考えずに実践していきましょう。
タイトル文字を大きくする
ブログを表示させ、右クリックして【検証】をクリックします。
画面の右側に HTML と CSS の編集画面が表示されます。
その左上の矢印ボタンをクリックします。
『ブログタイトル』にカーソルを移動させると、
ハイライト表示されますのでクリックします。
すると、
右側に『ブログタイトル』の HTML と CSS が表示されます。
上部の HTML を見てみると、
<h1 id="title"> </h1>
の間がハイライト表示されているのがわかります。
『ブログタイトル』であることを示す「 h1 タグ 」、
「 #title 」という部分で装飾していますという意味です。
それでは次に、
下部の CSS をスクロールして「 #title 」を探してみましょう。
そこに、
font-size ： 1.75em ；
ここが『文字の大きさ』を指定している部分です。
つまりこの数字を変更すればいいのです。
カスタマイズ手順
先程見つけた「 #title 」の部分を指定してコピーします。
右上の『 × 』ボタンをクリックして編集画面を閉じます。
以前学んだ【ダッシュボード】から作業します。
ダッシュボードから【デザイン】をクリックします。
【カスタマイズ】➡【｛｝デザインCSS 】の順にクリックします。
CSS 記述のダイアログが開きますので、
先程コピーした「 #title 」の部分をペーストします。
font-size で指定されている「1.75」を変更します。
今回は「3.5」に変更します。
変更したら【変更を保存する】をクリックします。
ではブログを確認してみましょう。
【 変更前 】
【 変更後 】
いかがですか？
文字が大きくなり読みやすくなったと思います。
しかし、
文字色が「白」だとあまり・・・
それでは『文字色』も変更してみましょう。
タイトルの文字色を変更する
文字の大きさを変えた手順と同じです。
カスタマイズ手順
☑ブログを表示します
☑右クリックして検証をクリックします
☑HTML・CSS が表示されたら矢印ボタン（左上）をクリックする
☑CSS 表示部から #title を探す
☑『 color 』の記述範囲をコピーする
☑編集画面を閉じる
☑ブログのダッシュボードを開く
☑【デザイン】をクリックする
☑【カスタマイズ】➡【｛｝デザインCSS】をクリックする
☑コピーしていた CSS を張り付ける
☑指定している「 #fff 」を「 #f5a2a2 」に変更する
☑【変更を保存する】をクリックする
☑ブログを表示して確認する
さいごに
いかがでしたか？
思ったより簡単にカスタマイズできたと思います。
実際は、
検証で表示される HTML と CSS の編集画面で変更も可能です。
しかし、
知識が未熟な初心者がカスタマイズするときは、
必ずコピーして『デザインCSS』にペーストして作業しましょう。
次回は、
『タイトルの背景と位置』について解説します。
ではまたお会いしましょう。
