minimalist tokyo
最新記事 by minimalist tokyo (全て見る)
- 婚活でもモテる、一流の会話術。 - 2023.03.14
こんばんは。
高梨沙羅選手、銅メダル取れてよかったですね～！
平壌五輪テーマソング・マライアキャリーのheroが頭に鳴り響いてます。
今回は、ブログ初心者の方、必見！
「SEO対策にも！人の心に響く、読みやすいブログを書くためのマークアップ講座」
をお届けしま～す(=ﾟωﾟ)ﾉ
スポンサーリンク
もくじ
SEO対策ってなに？
SEO対策（Search Engine Optimization）とは、 検索結果で自社サイトを多く露出をするために行う対策のことです。 検索エンジン最適化とも呼ばれます。
引用元：SEO対策とは – 初心者でも分かるSEOの基礎 -｜ferret [フェレット]
書いたブログは、人に読んでもらいたいですよね。
誰にも読まれなかったらイヤですもんね(笑)
人がブログを見るときは、キーワードで検索してたどり着くことが大半だと思います。
キーワードで検索して、上の検索結果からページを開いていきますよね。
SEO対策とは、ホームページを的確に構築して、検索して上位にくるようにすることです。
たくさんブログを見てもらえるように、SEO対策をしていきましょう！
・・・ということなんですけど、
なかなか難しいんですけど、だいたいこんなかんじです。
- きれいなデザイン
- 目的に対して明確なコンテンツ
- 人にたくさん見られている
きれいなデザインで、目的に対して明確なコンテンツでないと、人にたくさん見てもらえないですよね。
パッとホームページを見た瞬間、デザインがグズグズだったらすぐ閉じちゃいますよね(笑)
デザインがきれいで読み進めても、書いてある内容がグズグズだったら、やっぱりすぐ閉じちゃいますよね。
たくさんの人にたくさん見られているサイトはいいサイトと判断されて、検索上位になります。
細かいテクニックはいろいろあるんですけど、
本質的には、人にたくさん見てもらえる良いサイトを作れば、それがSEO対策ってことになります！
なかなか難しいので、ブログコンテンツに絞って言うと、だいたいこんなかんじです。
- 画像を入れる
- 絵文字を使う
- 文章に体験や感情、個性を出す
- 文章をマークアップする
ってなりますよね(笑)
ということで、文章をマークアップする方法について詳しく説明していきます(=ﾟωﾟ)ﾉ
スポンサーリンク
タグの意味を知って的確に使おう
SEO対策のためにも、読んでくれる人のためにも、文章を装飾して、読みやすい、きれいなデザインを目指したいもの。
読みやすいきれいなデザインにするためには、htmlコードを書く必要があります。
htmlコードを書くときに、いろんなタグがあるのですが、タグはそれぞれ意味と用途を持っています。
画像はimgタグ、とかね！
私がブログで使用しているタグはこのくらい。
- h2タグ・・・コンテンツ内タイトル
- pタグ・・・文章
- blockquoteタグ・・・引用
- ulタグ・・・順番付きリスト(unorder list)
- olタグ・・・順番なしリスト(order list)
- spanタグ・・・文章装飾用
- imgタグ・・・画像
- strongタグ・・・強調
CSSってなに？
タグを正しく用途に合わせて書いても、ほとんど文字がただ並んでいるだけの地味な読みづらいサイトになってしまいます。
なんでっ！？(≧◇≦)
タグは、コード上の意味を持っているだけで、見た目には影響しないのです。
ブラウザのデフォルトのCSSが適用されるので、h2タグだと文字が太くなったり大きくなったり、ulタグ、olタグだとリストに・や数字がついたりするかもしれませんが、たいそう地味な感じですよね。
もしデフォルトのCSSがなかったら、それすらもない、プレーンな文字の羅列になります。
そう、文字を大きくしたり、太くしたり、色を付けたり、余白を取ったり等々のサイトの装飾は、CSSがやってくれているのです。
スポンサーリンク
ブログで使うCSSの種類
私が普段、ブログで使用しているCSSはこのくらい。
- font-size・・・文字の大きさ
- font-weight・・・文字の太さ
- margin・・・外側余白
- padding・・・内側余白
- border・・・線
- color・・・文字の色
- background-color・・・背景色
CSSの書き方
CSSの書き方には3種類あります。
上から順に、推奨されている方法になります。（同時に、難易度の高い順にもなります）
- スタイルシートに書く方法
- ヘッダに書く方法
- タグに書く方法
ワードプレスを使っている人は、1か3になりますね。
スタイルシートに書くと、そのスタイルシートを読み込んだ全部のページに適用されるので、複雑なデザインの指定も一回書くだけで済みます。
タグに書くと、そのタグでだけ適用されますので、毎回書かないといけないけど、その箇所に合わせて記述を指定できるので、デザインの自由度が高いです。
スポンサーリンク
CSSをタグに書く
一番簡単なのは、CSSをタグに書く方法です。
いくつかこのページで書いているCSSをご紹介します。
▼文中の大きな強調文字です。
文字を大きく太くして、上下に余白をつけています。
大きな強調文字
▼通常サイズの強調文字です。
特に強調したい部分は、黄色背景をつけて、マーカーっぽくしています。
ここは強調ここは特に強調！ここまで強調
▼話しているときに、意図的に間をあけるときがありますよね。
人を引き付ける話し方のテクニックのひとつです。
これをブログで行うときに使います。
上に間をあけ、文章に緩急をつける
自分のサイトデザインに合わせてCSSを調整して、使って下さいね！
スポンサーリンク
CSSをスタイルシートに書く
少し難易度は上がるのですが、スタイルシートに書く方法はとても便利です。
毎回タグにCSSをいちいち書かないで済むので、楽です。
デザインを固定したいタグに指定します。
ワードプレスを使っている方は、「外観」→「テーマの編集」からCSSを更新できます。
このページで使っているリストは、スタイルシートに書く方法でやってます。
▼見た目
- アン
- ドゥー
- トロワ～♪
▼html
▼CSS
▶コチラのサイトを参考にさせていただきました
【CSSの補足説明】
mainというID（記事コンテンツのID）内にあるulとolに対してCSSを適用しています。
さらに、mainというIDのなかでも、sd-contentというクラスには適用させたくないので、打ち消すCSSを書いています。
スタイルシートに書く方法を取る場合は、タグにCSSを指定すると、そのタグが使われている記事以外の思わぬ部分に影響が出る場合があります。
それを避けるためには、このように、クラスやIDを指定してCSSを適用させなければなりません。
初心者の方にはちょっと、難しいですよね・・・。
ブログのマークアップは、プレゼンでの話し方と同じ
いかがでしょうか。
マークアップ、理解できましたか？？
ブログのマークアップは、プレゼンテーションでいうところの聞き手に興味を惹きつける話し方に相当する大事な要素です。
同じ話でも、プレゼンの上手い下手で、聞き手の食いつき方は全く変わってきます。
読み手に語り掛けるつもりで、ブログをマークアップするといいですね。
せっかく書いたブログをたくさんの人に読んでいただけるように、気を付けていきましょう。
ではまた～
スポンサーリンク
