HTMLやCSSの変更した所を振り返るにあたって、まっさらな状態がどんな物か見てみました。
そして思ったのが
メインブログのCSSを変更する前にテストブログで先に確認するべし
です。
はてなブログは複数の（3つ？）ブログを作ることが出来ます。その内の一つを自分のみの公開に設定してテスト用に使ったらいいのです。
と言いながら、これを思いついたのは備忘録を付けようと考えた昨今です・・・。
初めからやっておけばよかったです。
「コピペで使えるCSS」のサイトを作ってくれている先輩方のブログには「コピペする前に現状のCSSをメモ帳などにすべてコピーして保存してから実行することを推奨します」と書かれてることが多いと思います。何か問題があった場合に、加工前の状態に戻せるようにバックアップを取ってください」と言うことですね。
大事なことです。
しかし、バックアップを取った後でも、メインブログでCSS変更を行う前に、テストブログで一度試した方がより安心で、いろいろと遊べます。
HTMLやCSSをメインのブログからコピーしてテストブログに張り付けるだけなので簡単にできるかと思います。
とりあえず初心に帰って「そんなことわかってるよ！！」って言われそうな事から自分の復習兼勉強のために残します。
はてなブログのデザイン変更
自分のブログのダッシュボードを開く
上記の「デザイン」をクリック。
その後の画面がこちらで
この赤マルのスパナマークをクリック。
すると下のような画面になると思います。
自分のテーマはデフォルトの「smooth 」になってました。ブログを開設したのは約一年前で、とりあえず作ってしまえと何も確認せずに作ったからだと思います。
ここでそれぞれカスタマイズしたい場所を選択してHTMLを書き込んでいきます。
で、全体の設定を変更したい場合などには一番下のCSSの所に書き込んでいきます。
基本的にはこの「デザイン」の部分でカスタマイズするHTMLやCSSはPC上の設定です。スマホのブログをカスタマイズをしたい場合は
この赤マルのスマホマークをクリックします。
その前に
HTMLとかCSSって何なのよ？
書いてる通りにコピペしたけど、出来ないよ。
調べても難しい言葉ばっかりでわからないよ。
ワタクシがそうですよ。
なのです。
HTMLが構図でCSSが装飾。
何となくは分かるけど・・・。
自分はCSSはパーツを作る工場。
HTMLはCSSで作ったパーツで物を作る現場。
って考えました。
工場で「h3(大見出し)」h3パーツを作りました。
現場でそのh3パーツを使って、この文章をh3の設計図通りにする為にh3パーツを設置しました。
それで出来上がった物がブログに表示。
って感じなのかな？
考えれば考えるほど難しく感じます。
なので実践です。
はてなブログで見出しの編集をやってみた結果
テーマはデフォルトの「smooth」
デザインCSSに初めに入っていたのはこちら
/* <system section="theme" selected="smooth"> */
@import "/css/theme/smooth/smooth.css";
/* </system> */
/* <system section="background" selected="default"> */
/* default */
/* </system> */
そのままの状態で見出しを使ってみました
こんな感じ。
では次にCSSに見出し編集のタグ？コマンド？を入れてみました。
h1,h2,h3,h4,h5{ font-family: 'M PLUS Rounded 1c','YuGothic',"游ゴシック体",YuGothic, Meiryo, sans-serif; }
ただただ、この上記のCSSをデフォルトのCSSの下に張り付けただけです。その結果がこちら
記事タイトルの文字と見出しの文字のフォントが違ってます。これは「h1～h5」までのフォントを変更しなさい。と言う指示なので、記事タイトルのフォントは変更されなかったと言う結果だと思います。
はてなブログの見出しは
- 見出し大 →h3
- 見出し中 →h4
- 見出し小 →h5
となっているみたいです。
では「h1とh2」は何の見出しだ？
調べていません。
想像としては「h3」が大見出しならその上の「記事のタイトル」がそれに該当、そしてその上にくる「h1」はブログのタイトルに該当するかと思ったけど、違う（アップしないですが、ブログタイトルもデフォのままでした）。
しかし、何か違います。それは「font-family」の後にある「M PLUS Rounded 1c」というフォントはGoogleフォントと呼ばれている物で、標準搭載されているフォントではないからです。このフォントを使えるようにしていない為、第一候補で表示してほしいフォンではなく、「 , 」で区切っている「M PLUS Rounded 1c」以降のフォントで表示できる物を順に選んで表示されてるからです。
では、どうすれば「M PLUS Rounded 1c」フォントが使えるのか？
このフォントを使う場合は、このフォントのデータがある場所に繋がないとダメです。
その指示は、ブログの大本となる<head></head>の中に入れないとダメです。ブログの頭脳ですね。
その<head></head>の中に入れるのはどうしたらいいのか？
ダッシュボードの
赤マルの設定を選択
お次は
詳細設定
で、下にスクロールすると
「headに要素を追加」という項目があります。
そこに
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300&display=swap" rel="stylesheet">
これを入れてあげます。
画像ではすでに入力しています。
これは、このブログを表示する時は、上記のデータにアクセスしてこのデータを読み込んでからディスプレイに表示してくださいね。という指示です。
これを実行した見出しの表示は
このようにまりました。
無事に「M PLUS Rounded 1c」フォントを読み込んでくれて思い通りのフォントが表示されました。
このフォントがいい！！と思ってCSSに追加したけど表示されない。という場合は、一度そのフォントが標準搭載なのか？それとも外部にアクセスしてデータを引っ張ってこないと表示できないフォントなのかを調べたらいいかと思います。
ちなみにGoogleフォントはいっぱいあります。
ただ、日本語に対応しているフォントでないと、英数字だけが選んだフォントで表示されるけど日本語は前と同じフォントのまま。っていう結果になります。
「M PLUS Rounded 1c」は日本語フォント対応とのこのなので選びました。
字体も好きな感じだったので・・・。
でも難点は、字体を太く表示する設定にすると、字画が多い漢字などはうまく表示されません。太い習字の筆で字画の多い感じを書くと、一本の線になってしまう状況と同じです。その塩梅もGoogleフォントでは選べたりします。
また、字体がきれいに表示されない場合はフォントの大きさを少し大きく表示するようにCSSで調整してあげればOKです。
これは次回で書こうと思います。
ではでは
