どうも、ひびです。
今回はBlogger初心者の私が、
自分のブログをパワーアップして行く話です。
私と同じぐらいのブログ、プログラミング初心者向けです。
先輩方のブログを見て、
知識がゼロのワタシができるのかどうか！？
興味のある方は
一緒にやってみましょう！
バックアップ
万が一のために
必ずバックアップはとりましょうね！
Blogger バックアップ！編集前の必須事項！後悔しないために！
どうも、ひびです。 このブログは、 ブログ初心者が日々の出来事、 をこぼしていくブログです。 初心者ブロガー、初心者キャンパーの方々と一緒に 少しでも成長できればと思っています。 バックアップは絶対！ ワタシのブログも だんだんと形が変わって来ました。 そこで、ふと考えたのです...
まずは目次をつけよう！
今回ワタシが目をつけたのは目次です。
上の
これです。
「目次」の先生
ワタシが参考にしたのは
スケ郎先生が作成している「スケ郎のお話」というページ。
とても内容が豊富で、
素人の私にはわからないものばかり！！
詳細はスケ郎先生におまかせ！
（私に説明は無理！）
説明もとても詳しく、
わかりやすいので、こんな私でもできました。
作業内容
私が実際に行ったのは、
コピペ！！
だけ！
・・・・・・まじか。
何をどこに貼り付けるとか、
超詳しい説明がある。
しかもこの目次は、
カスタマイズもできるんだと〜。
目次のカスタマイズ〜！
ワタシがオプションで少しいじったのは
condTargetCount: 2
の２→１にしただけ。
みんなもやってみるといいよ。
ちょっと感動した。
次に見出しのカスタマイズ
Bloggerでの見出しとは、
記事を入力する際の
↑ここで、選択する事ができます。
本などの章とか節とかにあたるものと
理解していいかと思います。
見出しは必要？
見出しは本の、章とか節と言いました。
本を読むときには、目次があります。
このブログにも目次があります。
その目次を見ることで、
どこに何が書いてあるのか
だいたいのことがわかりますよね！
当たり前ですけど。。。
また、ブログの見出しを整えることで、
みやすさがレベルアップすると思います。
段違いに！
見出しの種類
上の画像のとおり、
見出しには種類があります。
Bloggerの機能にも
「主見出し」「見出し」「小見出し」「準見出し」
とあります。
ワタシくらいの初心者は、
主見出しは記事タイトル
見出しは章
小見出しは節
くらいの理解でいいのではないでしょうか？
だめ？
カスタマイズするには？
見出しをカスタマイズするには、
通常の投稿画面からではできません。
テーマのHTMLの編集からいじっていきます。
ですので、見出し一つ一つを編集する必要はありません。
HTMLの編集画面
テーマ画面のカスタマイズの横の三角をクリックすると
↑にHTMLの編集があります。
これを選んで頂くと、
テーマがHTMLで記述された画面が出てきますので、
こちらで
ちょこっと
操作をしていきます。
HTMLコード！？
HTMLと聞いて、
「やめてくれ〜！」と拒否反応を
示す人もいるかも知れません。
大丈夫です。
ワタシにもできました。
基本的なところだけお伝えしておくと、
主見出しから順番に
h1、h2、h3、h4・・・と番号が決まっています。
つまり見出しはh2、準見出しならh4となります。
h6まで設定できるようです。
（Bloggerだけかもしれません。他はわかりません。汗）
HTMLがわからなくてもOK!
ここでは「見出し」をカスタマイズしていきましょう。
見出しはh2です。
もし「小見出し」をカスタマイズしたいときは、
h2をh3と読み替えてやってみてください。
参考とした先輩のページ
今回参考とさせていただいたのは
「サルワカ」さんのページです。
WEB関係の情報がとてつもないです。
ワタシも日々参考にさせて頂いてます。
そんなサルワカさんのこちらです。
h2を探そう
先程のHTML編集画面で
コードのどこでも一箇所をクリックしたあとに
ctrl＋F を押していただくと
検索窓が開きます。
h2と打ち込んで検索してみましょう。
たくさんありますよね・・・・・
どのh2が見出しだろう？
そうです。
h2はたくさん出てくるんです。
この中の一つで、
各見出しの書き方を決めているはずです。
正直、いまでもわかりません。m(_ _)m
ですので、
ワタシは何度か以下の作業を繰り返しました。
見出し設定のコードを
貼り付け → ページ確認
変わっていればやったぜ大成功です。
コードをコピペ
先程のサルワカさんのページで
お気に入りのコードをコピーします。
それをペーストしていくわけですが、
どこにペーストすればいいでしょう？
テーマのデザインによって
（コードの書き方によって）
違うのかもしれませんが、
ワタシが使っているテーマのコードには
コメントでここ！と記されていなかったので、
とても大変でした。
（親切なテーマを使用中の方は以下は飛ばしてください）
ワタシはコードがわかりませんので、
何度か試しました。
ただ、ヒントがいくつかあります。
サルワカさんのページを良く読むと
「フォントサイズは指定してない」とあります。
つまり、おそらく見出しのh2を決めるところに、
フォントサイズが別に指定されているはず！と。
→ font-sizeというコードが近くにあるはず！
そのようなh2は３つか４つだったと思います。
それらのあとにコピーしたコードを貼り付けました。
h2{
font-size:24px ;padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}.
こんな感じです。
h2{
font-size:24px は元からあったので、
それ以降を貼り付けています。
ページを確認してみよう！
すでに、投稿した記事を
確認してみましょう。
見出しが変更されていればやったぜ大成功です！
もし変わっていなければ、
バックアップから復元して、
次のh2にアタックしましょう。
大丈夫です！ゴールは近いです。
もしh2のあとにh3もカスタマイズするのであれば、
おそらくその近くのh3が小見出しの可能性が高いです。
見た目が変わると心も変わる！
見出しをカスタマイズすることで、
一番大きな効果は、
ブログ作者のモチベーションアップだと思います。
もちろん、読みやすさアップ効果はあると思います。
ですが、
ブログが自分の好きな形に変わっていく
ということを実感することで、
作成意欲がアップする。
それがいい記事につながっていくんじゃないかな〜
なんて感じました。
のちにワタクシひびは、「QooQ」という超有名テーマを使用させていただくことになりました。というか、使用させていただいてます。そちらの見出しが結構好みにぴったりだったので、いじってません爆！
