2019年7月の初めにブログをはじめてから、1ヶ月半くらい経ちました。
この1ヶ月半の間に自分の中ではかなり成長しました。
少しづつ見た目が変わっていった様子を書いていきます。
右から左まで文字でぎっしり、何とかしたい
↓最初に投稿した時はこんな感じでした。
こんなブログ見た事ないな・・ が最初の感想です。
段落内で改行する
↓次はこんな感じです。両端にスペースが入りました。
Shift + Enter で段落内での改行が出来ました。
なるほど自分で調整するものだったのか・・と納得しました。
しかし、パソコンで上手く改行できても、スマホで見るとひどい事になっていました。
まだまだ勉強が必要ですね。
スペースを入れる
↓スペースを入れたらこんな感じになりました。
Enter を押して改行すればスペースが入ると思っていましたが、プレビューを見たら入っていませんでした。
ワードやエクセルとは違うんですね。
ブロックの”スペーサー”を使ってスペースを入れられるようになりました。
スペースの幅を調整する
↓スペースの幅を少し狭くしたらこんな感じになりました。
スペースを入れるとちょっと幅が広いなと思っていましたが、調整出来るんですね。
真ん中に出てくる丸いボタン？のようなものを上下させるだけでした。
これでまた少しいい感じになってきました。
見出しをつける
↓見出しは控えめな”H４”サイズでつけてみました
現在はテーマを変更したため、下記のような見出しの表示ではなくなりました。
小さいですが、見出しをつけるとメリハリが出た感じがします。
見出しの大きさを変える
↓見出しの大きさを “H２” に変えたらこんな感じです。
現在はテーマを変更したため、下記のような見出しの表示ではなくなりました。
どれが本文か見にくくなってしまいました。
サイズを変える事で上下に線が出てきます。
大きさを変えると見た目がすごく変わります。
サイドバーをつける
↓サイドバーをつけたらこんな感じです。記事の内容は上記のものとは異なりますがお許し下さい。
サイドバーというものを知った時、本当に感動しました。
これで文字でぎっしりしていた見た目から解放されたと思ったからです。
本当はそんな目的のものではありませんよね。
コンテンツの幅を変える
↓こんな感じです。分かりやすいようにちょっと極端に調整しました。
サイドバーを入れられた事で、ぎっしりしていた見た目の件はもう解決済みだと思っていました。
しかし、コンテンツの幅の調整で文字の表示を狭く出来る事を学びました。
そしたらサイドバーいらないかも？という気持ちにもなってしまいました。
そもそもサイドバーは、見た目のぎっしり感からの解決方法として入れてみたものだったからです。
サイドバーのマージンを変える
↓サイドバーのマージンを調節すると、サイドバーと本文の間のスペースが変えられます。
この幅が狭い事も気になってはいました。
でもこんなものなのかなと思っていたので、これも嬉しい発見でした。
メニューボタンをつける
↓こんな感じのメニューです。
これはずっと憧れでした。
他の方のブログを見て、いいなあ私も欲しいと思っていたものです。
でも、テーマによるのかな？とか、有料のテーマだから出来るのかな？とか思っていたら、私にも出来ました。
アイキャッチ画像を入れる
↓こんな感じの画像です。写真は Canvaを使わせていただいています。
自分の写真を使いたいと思っていました。
でも、自分で撮った写真では、なんとなくぼんやりした印象になってしまいます。
そこで、無料でも美しい写真が使えるCanvaさんのお世話になっています。
ありがとうございます。
アイキャッチ画像を投稿ページにも載せる
↓投稿ページの上の部分にうっすらとアイキャッチ画像が浮かんでます。（テーマによります）
現在、テーマを変更しましたので、下記のようにうっすらと映る画像ではなくなりました。
これはチェックボタンにチェックを入れるだけだったのですが、それを知らずなかなか出来ませんでした。
記事の中に画像を入れる
↓こんな感じで記事の間に入れてみました。
どうしても文字ばかりの記事になってしまうので、写真を入れてみたらページが明るくなりました。
文字に色をつける
こんな感じで文字に色をつけられる事を学びました。
たったこれだけの事なのですが、どうすればよいのか分かりませんでした。
本当は蛍光ペン風にラインを引いてみたかったのですが、色々な方のブログを参考にさせていただきましたが、まだ出来ません。
というか、もう少し後でもいいかなとちょっと逃げ腰です。
内部リンクを貼る
↓はじめはこんな感じで内部リンクを貼っていました。
WordPressをインストールした時の記事はこちら↓
https://kananotabi.com/first-blog-wordpress-install-delete/
↓最近、こんな貼り方を覚えました。
WordPressをインストールした時の記事はこちら
目次からページ内に飛ぶリンクをつける
これが一番大変でした。
覚えてしまえば全然難しい事ではないのですが、用語から何から全く分からず、理解するのに相当時間がかかりました。
色々な方のグログを読ませていただき、やっと出来ました。
ありがとうございます。
備忘録として方法を書いておきます。
①目次を入力（普通に入力するだけです）
1.りんご
2.バナナ
②見出しを入力（こちらも普通に入力します）
1.りんご
2.バナナ
③目次の 1.りんご のところを”HTMLとして編集”するに切り替える
↓切り替えるとこんな感じになります
<p>1.りんご</p>
↓上記の表示を以下のように入力し直します
<a href=”#page1″>1.りんご</a>
↓HTMLの編集に切り替えるためには、このような詳細設定の所から切り替えます
④見出しも同じように”HTMLとして編集”に切り替える
↓切り替えるとこんな感じになります
<h4>1.りんご</h4>
↓上記の表示を以下のように入力し直します
<h4 id=”page1″>1.りんご</h4>
このh4は見出しのサイズです。H2で入力した場合は、h2と出ますがそのままでOKです。
これでプレビューにすると出来ています。
バナナも同じように入力し直しますが、りんごでpage1 を使ったので、バナナはpage2 にしてみます。
pageではなくても、何でも大丈夫なようです。
りんごはりんご、バナナはバナナで同じもの（この場合はpage1と２でした）を使えばよいそうです。
私は目次を作る際に、りんごで1つの段落、バナナで1つの段落で作り、その間にスペーサーでスペースを入れています。
本当はそんなやり方ではないのかもしれませんが、今のところ私はこの方法しか出来ません。
でも、何とか出来たという事で、今のところ満足しています。
もう少し勉強してみます。
現在はテーマを変更したため、自動で目次が作れるようになりました。
目次作りに時間と手間がかかっていたので、楽になり嬉しいです。
そして何より自分で入力していた時と比べると、見やすさが全然違います。
徐々に検索結果にも表示されるようになった事も書きました。