ホワイト心理学って何?

ホワイト心理学とは、日常生活をより良いものにしてくれる心理学知識のことです。当ブログでは、よりわかりやすいに心理学を噛み砕いて説明しています。時間が5分とあれば立ち寄って損はしませんので、上記をクリック!

【見出しをオシャレに】はてなブログで見出しをオシャレにするのは超簡単

 

シバさん!見出しって何ですか?

見出しっていうのは簡単に言うと文のタイトルのこと

見出しが無いと何のこと書いてるかわからないのです

是非その見出しの作り方について教えてください

よし今回は特別に見出し作りから装飾の仕方まで教えてあげよう!

 

 

*見出しの作り方までわかる方は、③番の装飾までスクロールするか、目次をクリックしてください。

 

 

 

①見出しって何?

f:id:ruichaosmyth:20190625205827p:image

見出しとは上↑の「見出しって何?」って書いてある部分のことです。

 

見出しには種類があって、はてなブログでは

・大見出し

・中見出し

小見出し

の3種類があります。当ブログでは主に大見出し、中見出しを使っています。

大見出し→中見出し→小見出しの順に文章が詳しくなっていくイメージです。

 

一般的な文の構成としては、大まかに言うとこんな感じです。

f:id:ruichaosmyth:20190625205602p:image

小見出しは、中見出しの文中に必要であれば入れる感じです。

起承転結を意識して書くのが一般的ですね。

 

ちなみに私の我流ブログの場合はこんな感じの構成になっています。

f:id:ruichaosmyth:20190625205630j:image

大見出しの中に、中見出しや小見出しを差し込んでいます。知識を伝えることが多い私のブログには、この構成が1番しっくりきました。

 

あなたも、文の構成を意識しすぎて書きたい内容が書かなくなるようであれば、まずは見出しを気にせず文章を書いて、その後で、見出しを取り付けて見てもいいでしょう。

 

記事数を増やせば増やすほど、自分に合ったブログの書き方が身についていき、上昇意欲があれば、あなたなりの我流がより良いものに磨かれていくでしょう。

 

②見出しを作るには?

はてなブログで見出しを作る方法は物凄く簡単です。

見出し文を書いた後、その文を選択します

f:id:ruichaosmyth:20190625211608p:image

 

選択したら、こちらの見出しボタンをクリックして、見出しを選びます

f:id:ruichaosmyth:20190625211618p:image

 

文字が太くなったら見出し完成です

 

③見出しの装飾

見出しを装飾するにはcssコードをいじらなければいけません。でもそんなのわかんないよ〜という人!安心して下さい。

私と同じ見出し構成でよければ、手順を一から公開していきます。

 

まずは、こちらのcssコードをコピー

/* 大見出しh3*/
h3 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #eaf3ff;/*背景色*/
border-left: solid 5px #516ab6;/*左線(実線 太さ 色)*/
}
/* 大見出しh4*/
h4 {
border-bottom: solid 3px #cce4ff;
position: relative;
}h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}/* 大見出しh5*/
h5{
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}h5:before {
font-family: "Font Awesome 5 Free";
content: "00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}

 

コピーしたcssコードの貼り付け

コピーしたら、デザイン→カスタマイズ→→cssコードのところにコピーしたものを貼り付けます

 

まずはデザインを選択

f:id:ruichaosmyth:20190625210012p:image

 

次にカスタマイズ→cssコード貼り付け

f:id:ruichaosmyth:20190625210132p:image

 

 

次にスマホ版の設定です

上記のコードを下記のこの中と書いてある場所に貼り付けて下さい!この中という文字は消して下さいね

<style type="text/css">

この中

</style>

 

貼り付けたら<style type="text/css">〜<style>までのコードをコピーします。そしてここからは、はてなブログproの方と、proではない方で分かれます。

 

はてなブログproに登録している方

スマホ版とPC版の設定が同じでいいのであれば

スマートフォン→詳細設定→レスポンシブデザインにチェック

f:id:ruichaosmyth:20190625210247p:image

 

スマホ版とPC版の設定を変えたい方

スマートフォン→ヘッダ→タイトル下

のところでスマートフォン用にHTMLを設定するを押して、貼り付けします。

f:id:ruichaosmyth:20190625210336p:image

 

 

 

はてなブログproの方はこれで終了です

 

 

はてなブログproでない方

カスタマイズ→記事→記事上のところにコードを貼り付けます

 

まずは記事を選択

f:id:ruichaosmyth:20190625210409p:image

記事上の枠に貼り付けます

f:id:ruichaosmyth:20190625210428p:image

 

次に

スマートフォン→記事→記事上下のカスタマイズのところにチェックを入れます

 

スマートフォンの編集のところの記事をクリック

f:id:ruichaosmyth:20190625210524p:image

 

記事の上下のカスタマイズのところにある

「PCと同じHTMLを表示する」にチェックして変更を保存します

f:id:ruichaosmyth:20190625211352p:image

 

これで全ての作業終了だよ〜

お疲れ様でした

 

まとめ

ここで覚えた手順は、今後も目次を装飾する時や、ブログ自体をオシャレにしたい場合などに使うことがあると思います。

是非暇な時にでもcssについて、簡単に勉強することをお勧めします。勉強より実践で学びたいという方は、下記の記事から、目次装飾や吹き出し会話の設定を、やってみるのが良いでしょう。手順を一から書いてるので、どなたでもできる用になっています。

 

 吹き出し会話はこちら

www.ruiblog.work

目次装飾はこちら

www.ruiblog.work