らっきーネットチャンネル

とりあえず気になったことをなんでも書くブログ

ネット初心者卒業の第一歩~はてなブログを投稿しよう~その2

 前回の『~はてなブログを投稿しよう~その1』では、「はてなID」について色々書きました。

 

↓に記事を載せておきますね。(良かったら見てください)

 

www.netbeginner.net

 

 

 

見出しを作ろう!!!

 

↑見出しというのはこんな感じのやつです。多分ほとんどのブログやサイトで見かけることが多いと思います。

 

実際これがあるのと無いのとでは、読みやすさが大きく違うと思います。しかし...こう思ったことは無いでしょうか?

 

『見出しってどうやって作ればいいの?』、『もっとかっこいい見出しとか作れないの?』

 

今回はそれを細かく説明していこうと思います。

 

見出しってどう作るの?

 

見出しを作るだけなら、ぶっちゃけ簡単にできます!!

 

...何言ってるの?と思ったそこの貴方。これは本当のことです。

 

やり方は...①見出しにしたい文章上を打つ。②左上の『見出し』という欄をクリック

 

③そこから『大見出し』をクリックする。(なぜなのかは後で説明)

 

...たったこれだけで出来てしまいます。とっても簡単でしょう。

 

f:id:summii99146:20181024204213p:plain

 

↑画像にするとこんな感じ。

 

しかし、これだけでは満足いかない人もいるでしょう。私もその一人でした!

だから見出しのデザインを変えちゃいました!!

 

見出しのデザインを変えるのはかなり難しいですが、これをマスターすればきっといいブログが作れることは間違いなしです!

 

見出しのデザインを変えるには?

 ①まず左上にある自分の書いているブログ名をクリックして、↓の画像のように表示させます。そのあとに『デザイン』のボタンを押します。

            f:id:summii99146:20181025133524p:plain

 

 

② 次にこの画面のスパナのマークをクリックします。(画面は自分のブログ作成時のものです...)

f:id:summii99146:20181025134352p:plain

 

 

 ③スパナボタンを押すと↓のように表示されるので、この欄の一番下にある『デザインCSS』のボタンを押す。

 

f:id:summii99146:20181025134831p:plain 

④デザインCSSをクリックすると、こんなような画面になっています。この画面にコードを埋め込むと見出しのデザインが変わります。

 

f:id:summii99146:20181025220830p:plain

 

『コードとか言われてもよくわからない!』という私みたいな人がいるかもしれないですが、安心してください!!

 

コード自体はネットで調べれば簡単に出てきます!(この記事の見出しもそうです)

 

下に引用したブログを載せます。

  

www.notitle-weblog.com

 

しかしここで気をつけてほしいのは、見出しごとに少しコードを変えなくてはいけないことです。

 

どうゆうこと?と思っている人もいると思うので、次の項目で詳しく説明します。

 

見出しの種類とHTML

 実は見出しにも種類があるのを知ってますか?

 

まずタイトルに使われている最も大きい見出し(通称h1)から、大見出し(h2)、中見出し(h3)、そして最後に小見出し(h4)という感じで、順番に小さくなっているのですよ!

 

これで何が言いたいのかといいますと、大きい見出しから順番に使っていかなければならないことです。

 

さらにその見出しごとで、HTMLコードを修正しなくてはいけないのです。

 

例えば先ほど引用させていただいたブログのものでいいますと...

 

 

.entry-content h3 { padding: 4px 10px; color: #111; background-color: #f0f0f0; border-left: 8px solid #2d70a4; }

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! - NO TITLE

 

ここの中に『content h3』と書かれている部分があります。

 

簡単に言いますと、これは『大見出し』のデザインしか変えられないのです!

 

じゃあ、それ以外の『中見出し』や『小見出し』はデザインの設定ができないのか?といいますとそれは違います!

 

f:id:summii99146:20181026000635p:plain

 

こーんな感じにどんどんぶち込んで行けば大丈夫です!!!(まあ面倒ですが..)

 

これから『はてなブログ』で頑張っていこうと思っている人に、このアドバイスが活かされれば嬉しいなぁ...と思っている初心者の私です...。

 

まだまだ学ぶことは多いので、一生懸命頑張っていこうと思っています!!どうか応援お願いします!!