読者です 読者をやめる 読者になる 読者になる

de:mishama ra:pushu

デミシャマラプシュ~雑感など~

子供服とアクセサリーのお店子供服とアクセサリーのお店 CaaNa

はてなブログ初心者の僕が、見出しをカスタマイズしてみた!

ブログのこと

f:id:meganefukurou:20161006134835j:plain

ちょっとだけ、前置き

僕には5歳になる娘がいます。このブログを始めたきっかけは、これからますます成長していく娘との思い出として、何かしら残しておきたいと思ったからでした。

 

でも最初に投稿した記事は、日常生活で困っていた事を書いてしまった(;^_^A

demira.hatenadiary.jp

 

しかし、この投稿がきっかけとなり、今現在、Xperia関係で多くの方が閲覧してくれるようになりました。

  • 6月 134PV
  • 7月 760PV
  • 8月 10764PV
  • 9月 32619PV

9月後半からは、1日あたり約1500PV位の閲覧があるようです。本当にありがとうございます。

 

僕自身、このPV数はまったくの予想外で、ブログを始めた動機が「娘の忘備録」的なものであった事から、ブログのカスタマイズなんて少しも考えていませんでした。

 

前置きがながくなりましたが...

 HTMLやらCSS、はてな記法...はてなブログはもちろん、ホームページの仕組み等も、まったくわかっていない僕ですが、少しずつでも観やすいブログにカスタマイズして行きたいと思っています。

 

そして、「ブログをカスタマイズするってむずかしそうだなあ」と思っている、僕みたいな初心者の皆さんへの、きっかけ作りにでもなれれば嬉しいです。

 

それでは...

 実際にカスタマイズしてみよう!

 

今まで僕は、ツールバーの「文字の大きさ」というので見出しを書いていました(;^_^A

f:id:meganefukurou:20161005144126p:plain

「文字の大きさ」の設定を150%にして、太字で書いてみると

※この大きさで書くとこんな感じになります

 

そこで、見出しを付けてカスタマイズすると...

大見出し

 

中見出し

 

小見出し

 

こんな感じになりました(^▽^)

文字の大きさ、太字だけの見出しよりも、明るく見やすい感じになりますね

 

PC版をカスタマイズしてみる

 

ゆきひーさんのブログを参照して、自分の好みにあったCSSコードをコピーします。

www.yukihy.com

 

コピーしたら、以下の手順で進みます

ダッシュボード⇒デザイン(レンチマーク)⇒デザインCSS
  • ダッシュボード画面からデザインを選択

f:id:meganefukurou:20161005161718p:plain

 

  •  真ん中、レンチマークを選択

f:id:meganefukurou:20161005161817p:plain

 

  • デザインCSSに貼り付け!

f:id:meganefukurou:20161005153039p:plain

 

 変更を保存して終了。

 まさに、コピペで終わりです!!

 

スマホ版をカスタマイズしてみる

 

PC版と同様にゆきひーさんのブログを参照して、自分の好みにあったCSSコードをコピーします。

www.yukihy.com

 

コピーしたら、以下の手順で進みます。

ダッシボード⇒デザイン(スマホマーク)⇒ヘッダ⇒スマートフォン用にHTMLを設定するにチェックする

 

  • 一番右のスマホマークを選択

f:id:meganefukurou:20161005165505p:plain

 

 「ヘッダ」を選択して「スマートフォン用にHTMLを設定する」にチェックをいれてコードを貼り付け、変更を保存して終了。

 

かなり、簡単にできました(^▽^)/

 

検証してみよう!

貼り付けた見出しが、きちんと表示されている検証してみましょう。

 

見出しにしたい文字を入力して、記事の編集画面、左上の見出しのタイプを選択します

f:id:meganefukurou:20161005172351p:plain

「編集みたまま」モードでは、上の画像のように文字の大きさと、太さだけが変わります。

 

プレビュー画面を観てみましょう

 

PC、スマホに自分が意図した見出しが表示されていれば、カスタマイズ成功です(^▽^)/

f:id:meganefukurou:20161006115744p:plain

 

僕でも、簡単にできました

 

まとめ

 

はてなブログはカスタマイズのやり方も含めて、丁寧に解説されてるブログや、参考となるブログが非常に多いような感じがします。そういったブログを参照しながら、見出しからはじめましたが、かなり簡単にカスタマイズする事ができました。

 

まだまだ稚拙なブログですが、少しでも観やすくなればと思っています(^▽^)/

 

※子供服のお店です

caana.theshop.jp

 

パワーストーンのお店です

mirasimons.theshop.jp