post-styling-ideaSEOを考えるときには、記事ボリュームやクオリティ、またタイトルのつけ方など、最低限押さえておきたいポイントがあります。検索エンジンでの上位表示はそれでいいのですが、それと同時に意識したいのが今回のテーマである記事の「読みやすさ」です。

 

人気のブログやサイトを見ていると、文字ばかりが羅列されていることは稀で、

  • 見出し
  • チェックリスト(ブレッド)
  • 引用文
  • 補足情報

などが良く使われていて、読者があまり意識しなくてもスムーズに記事の構成を把握して内容を理解できるようになっています。そのため、長文であっても読んでいて疲れないですし、重要なところが記憶に残りやすい。

 

 

読み手を疲れさせない

⇒ 記事を最後まで読んでもらえる

⇒ ⇒ さらに別の記事も読んでもらえる

⇒ ⇒ ⇒ ブログやサイトを覚えてもらえ、リピーターが増える

⇒ ⇒ ⇒ ⇒ ブログ・サイトの評価が上がる

という感じで人気が上がっていくのだなと思います。

 

もちろん、記事を書く最初の段階でちゃんと構成を考えているからこそ、そのあとの装飾が生きてくるのであって、適当に記事を書きあげてから、「じゃあ分かりやすくなるように装飾してみるか」というやり方では本末転倒ですが・・・

 

前々から「記事を書いても何だか毎回バシッと決まらないな~」と思っていたのですが、「それは記事の装飾に統一感がないからなのかも!?」と思い、当ブログの記事装飾を見直してみました。

この記事では今回いろんなブログ・サイトを分析しながら考えたこと、やったことを備忘録もかねてまとめています。「記事を読みやすく、きれいにまとめるにはどうしたらいいのかなぁ・・・」と思っていたあなたに参考になれば幸いです。

sponsored link

WordPressテーマを直接いじらずにCSSをカスタマイズする方法

本題に入る前に、CSS編集のときに知っておくといいことを一つ。

ブログの「見た目の部分の変更」は、一発でバシッと決まることは稀で、何回か(あるいは何十回か?)ベースになるブログデザインと照らし合わせながら、適切なものに修正・変更を加える必要がでてくる場合がほとんどですよね。

こういう時に、Wordpressで使用しているテーマのCSSファイルをガンガン編集するのはちょっと怖い、ということもあると思います。バックアップをとるのは大切ですが、ちょっとした変更をするたびにバックアップするのは面倒。。「面倒だな~」と思っているうちに気が緩んでバックアップしなかったら、そういう時に限ってうまくCSSが機能しなくなって、元にも戻せなくなった!!>_< なんていう自体になったりします。。

また、お使いのテーマが頻繁にバージョンアップする場合は、テーマを更新したらせっかく編集したCSSが消えてしまいますので、直接いじらないほうが賢明です。

 

こういった理由から、WordPressテーマのCSSファイルを直接編集したくない場合、幾つかやり方があります。定番なのはCSS編集用に「子テーマを作る」方法。ただ、「そこまではちょっと…」という方も多いと思います。そこでお勧めなのが、カスタマイズ用のCSSをWordpressに追加・管理できるプラグインを利用する方法です。

 

私はテーマの更新もほぼないので、テーマ内のファイルもガンガンいじっちゃってますが、用途に応じてJetpackのCSS編集機能もあわせて利用しています。かなり便利です^^ 使い方も簡単なのでぜひ導入してみてください。JetpackでのCSS編集機能の使い方は以下のサイトの記事が親切に説明してくれています。

[WordPress] 出先からでもサクッとCSSを変更出来るJetpackの「CSS編集」が便利

 

他にも似たようなプラグインがありました。気に入ったものを使ってみてください。

Simple Custom CSS – テーマを直接編集せずにCSSをカスタマイズできるWordPressプラグイン

 

本題に入る前に、あともう一点!

デザインの調節に絶対に使いたいブラウザの開発用ツール

デザインの調節をするときに、ブラウザの開発用ツールは使っていますか?

Chromeだと「デベロッパーツール」、Firefoxだと「開発ツール」でブラウザによって言い方が色々ですが、最近のブラウザには基本、標準でついています。IEではF12、それ以外のブラウザは大抵ショートカットキー Ctrl + Shift + i (Windowsの場合)で表示されると思います。

この機能を使うと、

CSSファイルを編集して保存

ページをリロード

デザインをチェック

気に入らなかったらまたCSSを編集…

というサイクルを超短縮することができるんです。

好きなだけブラウザ上でCSSを編集して、最終的に決まったものをCSSファイルにコピペし、保存。これで完了しちゃいます^^

 

使っている人も多いと思いますが、まだだという方は、基本的な使い方を以下の記事にまとめていますので、ざっと読んでみてください。

超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

 

これで準備万端!本題に入っていきましょう^^

どんな内容を装飾したらいいのか

今回いろんなブログやサイトをはしごして、読みやすいな~と思った記事はほぼ共通して、以下に挙げるパーツが本文中で目立つように、あるいは本文との区切りが分かるように、さりげなくデザインが施されていました。

  • 見出し
  • 引用文
  • チェックリスト
  • 注意事項
  • 補足情報
  • リンク

それぞれ、CSSサンプルも含めながら以降でアイデアを紹介します。

 

記事装飾のアイデア【CSSサンプルつき】

見出しはかなり目立つ工夫を

見出しを使って、記事に適切な区切りをつけることは、読み手への配慮という意味でも、SEOという観点からしても重要。その他の装飾がなかったとしても、最低限見出しだけは目立つようにすると、それだけで記事メリハリがでます。

特に大見出し(記事内での一番大きな見出し)は、どのブログやサイトでもかなり目立つように工夫されていました。具体的には

  • 大きめフォント【必須】
  • 目立つ文字色
  • 大見出し用アイコン、または目次番号
  • アンダーライン、枠線
  • 背景色、影

といった方法が良く使われています。

中でも大きめのフォントサイズは絶対必要ですね。基本的にはどんなWordpressテーマを使っても、大見出しのフォントサイズは通常のテキストよりも大きくなるように設定されていますが、バランスを見直してみるのもいいと思います。

大きめフォントにプラスして、上に挙げた中の幾つかを取り入れるとよさそうです。

中見出し~小見出しは、大見出しより少しフォントサイズが小さめで、装飾も大見出しより控えめになっていることが多いです。このあたりは自分の大見出しのデザインを念頭に、足し算引き算で考えていく感じがいいですね。

以下は当ブログの見出しに適用されているCSSです。かなりシンプルですが参考までに載せておきます。

 

2016.4.15追記)

当ブログはテーマの変更に伴い見出しデザインが変わりました。上のCSSで表示される見出しは以下のようなデザインになります。

大見出し(h3)

h3

中見出し(h4)

h4

小見出し(h5)h5

 

以下のサイトにCSSサンプルつきで参考になる見出しのアイデアがたくさん載っているので併せて参考にしてみてください。

見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)

Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える

アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン

 

引用文

他のWEBサイトや文献からの文章を引用する場合、HTMLタグblockquote(一文ならqタグ)で囲って本文と区別することはSEOの観点からも重要です。悪質なコピペサイトと一緒にされないためにも、これは必須。また、自分が書いていることの裏付けとして、権威あるWEBサイトの言葉を引用するときも、本文とはっきり区別されて適切な装飾が施されていると、一呼吸おいてその言葉をしっかり印象付けることができます。

WordPressテーマでは、引用文が本文と区別して表示されるようにCSSが定義されていることが多いですが、自分のオリジナルに編集することだって可能です。私が使っているテーマでは、背景色と枠線のみで、パッと見「引用文」という感じがしなかったので、以下のような表示に変更しました。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel consectetur urna. Aenean dui mi, tincidunt sed nisl sit amet, consequat sodales libero. Maecenas aliquam euismod vestibulum. Donec sit amet urna commodo, egestas massa et, pharetra dolor. In fringilla nunc non iaculis porttitor. Proin dictum eros sit amet scelerisque malesuada. Ut vel augue est. Nunc ut tempor velit, quis elementum odio. Suspendisse nec vestibulum justo.

引用元:http://www.lipsum.com/feed/html

 

引用符“”がついたくらいですが、これだけで引用文だということがスグわかりますよね。

私は色々なサイトを参考にしつつ、FontAwesomeのアイコンフォントの引用符を使ってCSSを定義してみました。

 

FontAwesomeをブログやサイト内で使うには、あらかじめFontAwesomeのCSSファイルを読み込むようにheaderに定義しておく必要があります。詳細は以下の記事を参考にしてみてください。

引用タグをCSSとFont Awesomeでデザインしてみた

Font AwesomeをCSSのcontentプロパティで使用する

 

アイコンフォントって何?と思った方はコチラの記事もどうぞ

商用OK!無料で使えるアイコンフォントでブログ・サイトを楽しくお洒落に

 

引用文のデザインアイデアは以下の記事も参考になります。

blockquote(引用部分)をCSSでデザインするサンプル集

blockquoteタグをCSSだけで格好良いデザインにする【画像不要】

 

チェックリスト(ブレッド)をデザインする

htmlではulタグ(普通のリスト)とolタグ(番号付きのリスト)でリストを定義できますね。

ulタグの場合

  • チェックリストA
  • チェックリストB
  • チェックリストC

olタグの場合

  1. チェックリスト1
  2. チェックリスト2
  3. チェックリスト3

ほぼ装飾無しでかなりシンプルに使っているサイトもあれば、アイコン画像なども使って目立つように使っているサイトもあったりして、ここは好き好きなのかな~と思いましたが、「このチェックリストは重要だ!」という部分は目立つ装飾を付けられるように、強調リスト用のクラスを定義しておくといいかもしれません。

私はアイコンフォントFontAwesomeを使ってチェックマークを表示させるリスト用のクラスを定義してみました。

表示するとこんな感じになります。

  • ここに一番目のテキストが入ります。
  • ここに二番目のテキストが入ります。
  • ここに三番目のテキストが入ります。

 

注意事項

「ここに気を付けてね!」と注意を喚起したい内容は、文字色を赤にしたり、黄色いマーカーで目立たせるのが定番ですが、専用にデザインを定義しておくと統一感が出て見栄えがします。

普通に文字色を変えるだけの場合:

注意:この文章はテストです。注意してくださいね!

装飾した場合:

この文章はテストです。注意してくださいね!

 

これもFontAwesomeを使ってビックリマークのアイコンを文頭に付けるようにしました。

 

補足情報などのためのボックス

本文の内容とはちょっと脱線するけど書いておきたい補足情報とか、何となく囲ってみたい文章とか、多様なニーズに使いまわせるシンプルなボックス装飾をCSSに定義しておくと、何かと便利です。

当ブログでは

  • 背景色のみのボックス
  • 枠線のみのボックス
  • 枠線+背景色のボックス

の3パターンをdivタグ用のcssクラスとして定義しています。

 

「背景色のみのボックス」の場合はこんな感じの囲みになります。

 

「枠線のみのボックス」の場合はこんな感じの囲みになります。

 

「枠線+背景色のボックス」の場合はこんな感じの囲みになります。

 

意外と使える場面があるので用意しておくといいと思いますよ^^

 

リンクの装飾

参考になったサイト、紹介したいサイト、自分のブログ内の関連リンク、商品情報へのリンクなどなど、記事の中にはほぼ必ず何かしらのリンクがあるといってもいいくらいですね。リンクのデザインはさほど凝ったものは必要なさそうですが、先頭に何かしらのアイコンがついているとお洒落感がでます。

私は、リンクの先頭のアイコンもFontAwesome(登場頻度高っ!!)を使っているのですが、CSSではなく以下のようなHTMLタグをAddQuickTagに保存(後述)して使っています。

 

表示はこんな感じ↓

Font Awesome

 

リンクアイコン手前にテキストを追加した場合↓

公式サイトFont Awesome

 

リンクアイコン手前のテキストとアイコンまわりの色や前後余白の設定はCSS側に記述しています。

 

補足:

ところで、装飾用にCSSクラスを定義するのはいいけど、毎回、投稿画面でHTMLタグにクラスを設定するのは面倒ですよね。こういう時に役立つのが先ほどちらっと出てきたAddQuickTagというプラグインです。

公式サイトAddQuicktag

このプラグインを使うと、頻繁に使うHTMLタグを「定型」として保存しておき、投稿画面のエディタからボタン一つでそのタグを追加できるようになります。具体的な使用手順は以下のサイトが分かりやすいので参考にしながらぜひ使ってみてください。

AddQuicktagの使い方 – WordPressの投稿エディタを便利にカスタマイズしよう!

AddQuicktag – エディタにHTML雛形を登録して記事作成を効率化できるWordPressプラグイン

 

今回の記事はここまでです。それではまた^^