本気ブログ始めよう~アイキャッチ画像と見出しと目次設定~

おはようございます!
ハッピーサラリーマンのいっしです

今日は,アイキャッチ画像と見出しと目次設定をやってみました

アイキャッチ画像

画像サイトの決定

僕は無料サイト「pixabay」を利用することにしました
https://pixabay.com/ja/

理由は、とくにかく量が豊富で無料で使用できる点ですね

今悩んでいるのはイラストか写真のどちらにするか
とりあえずイラストを利用していますが、これもサイトの目的によってロジカルに決定する必要があります

今はまだブログ作成もブレスト(散らす)ステップなので、記事がたまって色々見えてきたらその際に考えます

アイキャッチ画像の挿入

これは簡単で、投稿中に右側に出ている「アイキャッチ画像」で画像選択してアップロードするだけ
これで、簡単に無料で「ぽく」なりました(笑)

THE THORの場合は、アイキャッチ画像を設定しないと「No Image」白文字の黒い画像がデフォルトで表示されます
このままだといかにも「何もやってません」感がハンパではないので、デフォルト設定します

  • 外観-カスタマイズ―基本設定[THE]-アイキャッチ画像の設定

上のように進み「NO IMAGE画像の設定」で、画像をアップロードすればOKです
これで「何もやってません」感からサヨナラです

見出し

見出し基本設定

見出しに関しては、見出しボックスをひたすら追加するだけです(笑)
この際、階層構造を整理しておくこと、また設定は基本すべての見出しレベルに反映されるのでロジカルに決定することが大切です

  • 外観―カスタマイズ―パーツスタイル設定[THE]-見出し設定[個別ページ用]

上のように進むと、H1, H2と見出しレベルに合わせて設定できます
私はここでH3、H4について設定しました

見出しのcss設定

見出しにもcss設定して少しデコレーションします

ハッピーサラリーマンではH3見出しを[背景-基本[カラーA:背景 カラーB:文字]]に設定していて、これの角にRをつけたいなと考えました

/*見出し3カスタマイズ*/
.partsH3-21 h3 {
border-radius:10px;
}

上のようにcss追加すると角にRがつけられます

目次

目次設定

最後に目次設定です
THE THORでは、デフォルト設定では目次が「オフ」になっています

  • 外観―カスタマイズ―投稿ページ設定[THE]―目次設定

上のように進んでいき、目次設定画面で「目次を表示するか選択」で「表示」を選択します
その後、表示させる小見出し数とレベルと設定して完了です

今回の設定でやっとブログらしく見えるようになりました(中身は別として)

ワードプレス簡単な操作だけで公開に耐えるブログが作成できるので、HTMLとCSSだけで作成したことのある自分としては本当にびっくりです

次は、トップページのレイアウトはコンテンツに合わせて大きく変更したいですね

それでは、今日も楽しくハッピーに過ごしましょう♪

では~