WordPressのリスト(箇条書き)をCSSで綺麗に表示しよう!

WordPress で記事を書いていると箇条書きで表現したい項目が出てきます。この時に利用できるのがリストです。投稿ページのビジュアルエディタで、番号なしリスト番号付きリストを選ぶと画像のようなリストを入力することができるようになります。

ビジュアルエディタ

テーマによって若干表示は変わりますが、なんかオシャレじゃないですよね。記事の中で強調したい部分なのにすごく地味というか。

この記事では CSS を利用して WordPress のリストを綺麗にする方法を紹介しますので、ぜひみなさんのブログでも試してみてください。

ちなみにこのブログではこんな感じになっています。爽やかなデザインでなかなかいいと思いませんか?

スタイルシートを追加するために


まずはスタイルシートを追加できる環境を作りましょう。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

CSS で綺麗にする方法


1. スタイルシートを入力するフォームを開く

ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。

 

2. スタイルシートのタイトルを入力する

画像赤線のフォームにスタイルシートのタイトルを入力します。この例では Stylish List というタイトルにします。これは自分が管理するためのタイトルなのでなんでも構いません。覚えやすいタイトルを入力しましょう。

 

3. スタイルシートを入力する

まずタイトルの下にあるフォームの /* */ に囲まれた赤文字の英文はすべて削除しましょう。そして以下のコードをコピーして貼り付けてください。

 

すごく長いですが、これはこのブログで使っているリストのスタイルシートです。スタイルシートを貼り付けた後、右側にある 公開 ボタンを押すと、あなたのブログで使っているリストのデザインが変更されます。

 

4. とりあえず完成!

ブログの記事内にリストを入力してみてください。このような表示になっていたらデザインの変更は成功です。

もっと他のデザインはないの?


すごくたくさんのリスト用スタイルシートを提供してくれているサイトがあるので、それを使わせてもらいましょう!実はこのブログで使っている青いデザインのリストも、以下のサイトのスタイルシートを使わせてもらっています。

上記のサイトにアクセスしてみてください。綺麗なリストが画像付きで紹介されています。自分のブログで使ってみたいと思うデザインがあったら、さきほど作成したスタイルシートを編集して貼り付けてみましょう。

 

ダッシュボード > Custom CSS & JS > All Custom Code

画像のページに移動したらさきほど作成したスタイルシートの欄にある 編集 と書かれた部分を押してください。入力フォームが出てきますので、現在入力されているコードをすべて削除して、気に入ったリストの CSS を代わりに貼り付けてください。

 

WordPress でリストのスタイルシートを利用するコツ

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

ol.sample1 li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

例えばこのスタイルシートを WordPress で利用する場合、そのまま貼っても使えません。以下のように編集する必要があります。

 

.entry-content ol{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

.entry-content ol li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

.entry-content ol li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

一番最初に .entry-content を追加して、ol.sample1.sample1 を削除しました。.entry-content というのは、WordPress の記事に使われるスタイルシートのクラス名で、その内部にある <ol> タグのデザインを変更するという意味になります。

.entry-content を追加しないと、テーマに使われているリストのデザインも一緒に変更されてしまうので、ブログのデザインが崩れてしまうことがあります。

また .sample1 を削除したのは、これがついているとスタイルシートを適用するときに、毎回 <ol class=”sample1″> という書き方をしなければならないためです。リストを表示する度にテキストエディタでそのコードを入力するのは大変なので、スタイルシートのクラス名は削除しています。

この説明はスタイルシートの知識がないと、ちょっと難しいかもしれませんね。とりあえず最初に .entry-content を追加して、.sample1 と書かれている部分を削除すると覚えていてください。これを行うだけで、WordPress で 上記サイトの CSS が使えるようになります。

最後に


リストのデザインはうまく変更できましたか?

リストのデザインを変更しておくと、リストがアクセントになって記事が華やかに見えるので、これはできるだけやっておきたいテクニックです。

もしどうしてもわからないことがあったらコメント欄で聞いてください。自分にわかることならお答えします!

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

WordPress を利用していると、ここの見た目を変更したい、こんな機能を追加したいなどなど、さまざまな変更や機能追加をしたくなってきますが、そんなときに必要になるのが CSS(スタイルシート)や JavaScript です。

この記事では自作の CSS・JavaScript・HTLM を WordPress に追加する方法について解説していきます。

 

追加 CSS

WordPress には CSS を追加するための機能が最初から用意されており、画像のように、ダッシュボード > 外観 > カスタマイズ内の 追加 CSS という場所で、スタイルシートを追加することができるようになっています。

しかし、この機能はテーマに依存してしまうので、テーマを変更したときに追加したスタイルシートが効かなくなってしまうという問題があります。テーマは絶対に変えない!という方はそれでいいと思いますが、部屋の模様替えをするように、時々見た目を変えたくなったりしますよね?

そういった場合に備えて、日頃からテーマに依存しない形で CSS や JavaScript を追加していきましょう。

Simple Custom CSS and JS


このプラグインを利用すると、テーマに関係なく、CSS・JavaScript・HTMLのコードを追加していくことができるようになります。

ダッシュボード > プラグイン > 新規追加で、Simple Custom CSS and JS を検索してインストール&有効化してください。

プラグインのインストール方法がよくわからない方は、以下のページを参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

使い方


1. スタイルシートを追加してみる

インストールが終わると、ダッシュボードに Custom CSS & JS という項目が表示されていると思います。そこから Add Custom CSS を選んで、スタイルシートを追加してみましょう。

 

2. スタイルシートのタイトルを入力する

画像赤線の ここにタイトルを入力 と書かれているフォームに、スタイルシートのタイトルを入力してください。これは自分で管理するためのタイトルなので、覚えやすいタイトルを入力しておくといいでしょう。

 

3. スタイルシートを入力する

タイトルを入力したら、下のフォームに /* */ で囲まれた英文がありますので、これをすべて削除して、代わりにスタイルシートを入力してください。画像では <strong>タグを赤くするスタイルシートを入力しています。

入力が終わったら、右にある 公開 ボタンを押してください。公開ボタンを押すと、ブログにスタイルシートが適用されます。

 

4. 管理画面で確認する

メニューの All Custom Code を押すと、先程入力したスタイルシートが表示されています。この画面では、入力した CSS・JavaScript・HTML を管理することができ、星マークを押して、公開・非公開を切り替えることができます。

★は現在公開中で、☆は非公開の状態です。不要になったコードがある場合は、このページで非公開に設定しておきましょう。

今回は例としてスタイルシートを入力してみましたが、同じような形で JavaScript と HTML のコードも入力することができます。

Options について


スタイルシートや JavaScript を入力するフォームでは、オプションを設定することができます。そのオプションの各項目について解説します。

Linking type

External File: 入力した CSS・JavaScript を外部ファイルにして、以下のような形で読み込みます。

<link rel='stylesheet' id='1235-css' href='https://gameusers.org/dev/blog/wp-content/uploads/custom-css-js/1235.css?v=9179' type='text/css' media='all' />

Internal: ソースのタグ内にそのまま表示されます。

<style type="text/css">
strong {
 color: red;
}
</style>

Where on page

Header: HTMLのソースの上部、<head>タグ内に表示されます。CSS は上部に表示されるのが普通なので、CSSの場合は Header を選択しておくといいでしょう。

Footer: HTMLのソースの下部に表示されます。JavaScript の場合は、Footer を選んでください。上の方に JavaScript のコードがあると、JavaScript をすべて読み込んでから HTML の読み込みが始まりますので、ページの表示が遅くなってしまいます。特別な場合を除いて、基本的には Footer を選んでおくのが正解です。

Where in site

in Frontend: ブログのトップページや記事のページなど、誰もが見れるページに表示されます。

in Admin: ダッシュボードなど、管理者用のページに表示されます。

On Login Page: ログインページに表示されます。

このプラグインでなにができるの?


この記事を見ただけではなにができるのかよくわからないと思いますが、このプラグインを利用すれば、本当にいろいろなことができるようになります。

このブログでは Simple Custom CSS and JS を利用して、リストの見た目を変更する方法、スクリプトを利用して便利な機能を追加する方法、Web フォントで文字を綺麗にする方法などを解説していきますので、ぜひそちらもチェックしてみてください。

WordPress プラグインのインストール方法を詳しく解説

WordPressにはたくさんの便利なプラグインが用意されています。こんな機能があったらいいのになと思うものは、だいたい存在していると言っても過言ではありません。

今回はプラグインのインストール方法について詳しく解説していきます。WordPressを導入したばかりでよくわからない方は、この記事を参考にしてインストール方法を覚えてください。

プラグインのインストールには大きく分けて3つの方法があります。

  1. プラグインを検索してインストール
  2. プラグインファイルをアップロードしてインストール
  3. サーバーに直接プラグインファイルをアップロードしてインストール

1の方法は、WordPress プラグインディレクトリに登録されているプラグインをインストールする時に使う方法で、一番簡単にインストールが行えます。WordPress プラグインディレクトリというのは、WordPressの関係者が行うチェックを通過したプラグインだけが登録することのできる公式のプラグイン置き場です。

2の方法は、公式に登録されていないプラグインを利用する際に使います。プログラマーが個人的に開発した便利なプラグインを自分のウェブサイトなどで提供してくれている時に、この方法を使ってインストールすることができます。

3の方法は、プラグインのファイルを自分で修正してからインストールを行う人が利用する方法で、バグの修正や細かいカスタマイズなどが行えますが、Web制作の知識が必要になります。

基本的には1と2の方法を知っているだけで問題なくインストールを行えます。

1. プラグインを検索してインストール


1.  プラグインページに移動する

WordPressのダッシュボードで、プラグイン > 新規追加 を選択してください。

 

2. インストールしたいプラグインを検索する

右上の方にプラグインを検索するためのフォームがありますので、そこでインストールしたいプラグインの名前を入力してください。

 

3. プラグインをインストールしましょう

フォームにプラグインの名前を入力すると、プラグインが表示されます。画像では例として Game Users Share Buttons を検索して表示しています。プラグインが表示されたら 今すぐインストール と書かれたボタンを押しましょう。

インストールが始まるのでしばらく待ってください。インストールが終わると、さきほどのボタンが 有効化 に変わります。有効化ボタンを続けて押してください。

 

4. インストール完了!

画面が切り替わって プラグインを有効化しました。 と表示されたら、プラグインのインストールは完了です。簡単ですね!

2. プラグインファイルをアップロードしてインストール


1. プラグインファイルをダウンロードする

開発者が自分のウェブサイトなどでプラグインを公開してくれている場合、そのプラグインファイルをまずダウンロードする必要があります。

今回は例として、WordPress プラグインディレクトリから、Game Users Share Buttons のプラグインファイルをダウンロードしてインストールしてみます。

 

2. プラグインのアップロードページに移動する

ダウンロードしたプラグインファイルはZIPという圧縮ファイルになっています。それを ダッシュボード > プラグイン > 新規追加 からアップロードします。プラグインのアップロード と書かれたボタンを押して、アップロードページに移動してください。

 

3. プラグインファイルをアップロードする

ファイルを選択 というボタンを押して、ダウンロードしたプラグインファイルをアップロードします。プラグインファイルを選択したら、今すぐインストール ボタンを押してください。

注意:プラグインファイルはZIPのままアップロードしてください。ZIPファイルは解凍することができるのですが、インストールする時は解凍してはいけません。

 

4. プラグインを有効化してインストール完了!

アップロードが終わるとインストールが自動的に始まります。インストールが終わると画像のページに移動しますので、プラグインを有効化 と書かれたボタンを押してください。これでファイルをアップロードする方法でのインストールは完了です。

3. サーバーに直接プラグインファイルをアップロードしてインストール


1. プラグインファイルをダウンロードする

※ この方法は知識が必要になりますので、わからない方は行わないようにしてください。間違えると WordPress が正常に動かなくなったりしますので注意してください。

プラグインファイルをダウンロードしてきて、必要ならファイルを解凍してください。フォルダが出てきますので、それをFTPなどを利用してアップロードしましょう。

例えば https://www.example.com/blog/ というアドレスで WordPress を運営している場合、blog ディレクトリの内部に wp-content > plugins という構成のディレクトリがあります。そこに先程のフォルダをまるごとアップロードしてください。

Game Users Share Buttons プラグインの場合は、ZIPを解凍すると game-users-share-buttons というフォルダが出てきますので、それをそのままアップロードします。

blog > wp-content > plugins > game-users-share-buttons

上記のような構成になります。

 

2. プラグインを有効化する

ダッシュボードのプラグインページにアクセスすると、先程アップロードしたプラグインの項目が表示されていますので有効化してください。これでインストールは完了です!

最後に


プラグインのインストール方法について解説してみました。解説のとおりに操作すると簡単にインストールできますので、わからない方は画像を見ながらチャレンジしてみてください。

このブログでは WordPress の便利なプラグインを紹介していきますので、ぜひ他の記事もチェックしてみてください。

Game Users Share Buttons プラグインは特におすすめです!

WordPressのおすすめシェアボタンプラグイン、高速表示&好きなデザインに変更できます

Game Users Share Buttons

ブログをやっているなら絶対に設置しておきたいSNSのシェアボタン。公式が提供するボタンから、WordPressのプラグインで表示できるものまで様々なものがありますが、今回、ご紹介するのは、公式のものと比較すると表示速度は10倍!選べるテーマは無限大!世界中の素材サイトからアイコンをダウンロードしてシェアボタンの画像として利用できる画期的なプラグインです。絵を描いたりデザインが行える方なら、他にない世界でひとつのシェアボタンを作成することもできる、まさに夢のプラグインです!!

 

こんなシェアボタンが使えます

画像を見てください。これは世界中で提供されているSNSのアイコンを利用させてもらって作ったオリジナルのシェアボタンです。今回、紹介する「Game Users Share Buttons」を利用すると、誰でもこんなオシャレなシェアボタンをブログで使うことができるようになります。

これまではデザインに統一性のない公式のシェアボタンを並べて使うか、プラグインとして提供されている決まったデザインのシェアボタンを使うかで、見た目を変更する選択肢がほとんどなく、おしゃれなデザインのシェアボタンを設置しようとすれば、HTML・CSS・Javascript など Web 制作の知識が必要になったり、自分で画像を作る場合はデザインセンスが求められたり、誰でも簡単にできるというものではありませんでした。

しかし Game Users Share Buttons ならそれが可能です。誰にでも簡単にです!この記事ではインストール方法、使い方について詳しく解説していきますので、ぜひ一度、使って試してみてください。

対応テーマ


Twenty Seventeen Twenty Sixteen Twenty Fifteen
Simplicity2 STINGER PLUS+2 STINGER8
Xeory Extension Xeory Base

上記は表示に問題がないか確認済みのテーマです。基本的にはどんなテーマでも利用できます。

 

正常に表示されないテーマ

  • STINGER5

他にも表示に問題のあるテーマが見つかりましたら、ぜひ教えてください。

インストール方法


WordPress のダッシュボード > プラグイン > 新規追加ページで Game Users Share Buttons を検索してください。

1. ダッシュボードを表示する

ログインしている場合は、画像のように上部メニューからダッシュボードを選択してください。ログインしていない場合はログインすると自動的にダッシュボードに移動します。

 

2. メニューから プラグイン > 新規追加 を選択

ダッシュボードのメニューからプラグインを選び、次に新規追加を選んでください。

 

3. プラグインを検索する

ページ右上のフォームに Game Users Share Buttons と入力すると、黒ネコのアイコンのプラグインが出てきますので、そこに表示されている今すぐインストールボタンを押してください。

 

4. プラグインをインストールして有効化する

プラグインのインストールが終わると、有効化と書かれたボタンが表示されますので、押してください。

 

5. インストール完了

プラグインを有効化しました。と表示されると、インストールは完了です。次に使い方について解説しますので、記事を読み進めてください。

Game Users Share Buttons の使い方

1. 設定ページに移動する

ダッシュボードのメニューから 設定 > Game Users Share Buttons を選んでください。

 

2. テーマタブを選択する

Game Users Share Buttons の設定ページに移動しますので、そこでテーマタブを選んでください。

 

3. ブログで使いたいシェアボタンを選択する

シェアボタンがいくつか表示されます。これはシェアボタンのテーマになっており、好きなデザインを利用することができます。とりあえずどれか気に入ったものを選んで、編集タブに移動ボタンを押してみてください。

 

4. 編集タブに移動する

さきほど選んだテーマを利用するために、編集タブに移動します。上部メニューから編集を選んでください。

 

5. シェアボタンをブログに表示してみる

編集タブをスクロールしていくと、さきほど選んだシェアボタンのテーマが表示されています。そこの Top ボタンを押してみましょう。これはブログの記事の上にシェアボタンを表示するというボタンです。Bottom を押すと、記事の下にも表示されます。

 

6. ブログで表示を確認してみましょう!

ブログを確認してシェアボタンがどのように表示されているか、確認してみましょう。Top ボタンを押した場合、画像のように記事のすぐ上にシェアボタンが表示されているはずです。ただこのままだと、記事との間隔が狭すぎるので、もうちょっとスペースを空けたいところです。

 

7. 記事とシェアボタンの間隔を調整する

さきほどの編集タブ内で、Top 設定と書かれている部分を探してください。見つけたらその部分を押しましょう。

 

8. 余白を設定する

余白・個別投稿ページという欄に、と書かれたフォームがありますので、そこで余白を設定します。記事とシェアボタンの間隔を半角の数字で入力してください。使っている WordPress のテーマやデザインによって必要な間隔は変わりますので、いろいろ試しながら適切な値を見つけてください。

値を入力したら 保存ボタンを押しましょう。

 

9. 編集結果を確認、完成!

余白を設定したので、記事とシェアボタンの間にちょうどいいスペースができました。余白はよく設定する項目なので覚えておいてください。

その他にも設定できる項目はたくさんありますので、気になる部分が見つかったら、編集タブで設定を試してみてください。

最後に


自作自演で紹介記事を書いてみました。半年以上かけて頑張って作ったものなので、できるだけたくさんの人に使ってもらいたい!

使ってもらえばいいものだと感じてもらえると思うので、ぜひ一度試してみてください。もしわからないことがあれば、この記事のコメント欄で質問してもらえればいつでも答えるので、なんでも聞いてください。

リンク


ブログの記事を書く時に便利なChrome拡張機能を紹介します!

ブログの記事を書いていてリンクを貼る時ってみなさんどうしていますか?

自分は今までページのタイトルは、右クリック → ページのソースを表示 → <title>タグからコピー、URLはブラウザのアドレス部分からコピーして、WordPress にそれぞれ貼り付けてリンクを作成していたのですが、この作業を右クリックのメニューから一発でできるようになる便利な Chrome 拡張機能を発見したので、紹介させてもらいます

Lightning Blog Tools / 作者の解説ページ

 

Chrome上で右クリックしたところ

Lightning Blog Tools を Chrome にインストールしてから、Chrome 上で右クリックしてメニューを開くと、ライトニングツールという欄が出てくるので、そこでHTMLリンクという項目を選択すると、クリップボードに以下のタグがコピーされます(使うときはキーボードの Ctrl + V を押すか、右クリックで貼り付けを選びましょう)

<a href="https://gameusers.org/dev/blog/" target="_blank">Game Users 開発ノート – 一緒に開発しよう!</a>

なんとタグ付きで今見ているページのリンクがコピーされるのです。今までいちいち面倒なことをしてリンクを作成していたのが、一瞬で終わるこの便利さ!リンクは不要でページのタイトルだけ取得したい場合は、サイトタイトル抽出を選ぶとタイトルだけが取得されます。

さらに踏み込んだ使い方


右クリック > ライトニングツール > Options を選ぶと、画像のページが開きます。

難しそうに見えますが、慣れればすごく便利な設定が行えます。テキスト引用、HTMLリンク、サイトタイトル抽出は元から入っている設定で、<strong>赤色は自作した機能です。

 

自作した<strong>赤色を使ってみる

画像のように文字を選択してから、右クリック > ライトニングツール > <strong> を選ぶと、以下の内容がクリップボードにコピーされます。

<strong style="color: #ff0000;">Game Users Share Buttons</strong>

strong タグは文字を強調するときに使うタグなのですが、選択した文字が strong タグに囲まれてコピーされました。このように設定したタグを自在に扱うことができるようになります。

 

<pre>コード入力用

このブログではプログラム関係のコードを掲載することが多いので、黒色の <pre> タグをよく使っているのですが、Lightning Blog Tools で設定を行っているので、記事の投稿フォームで右クリックから簡単に貼れるようになっています。

<pre style="color: #ffffff; background-color: #000000;"></pre>

Options のページにコード挿入という欄がありますので、独自のコードを貼り付けたいときはここで設定を行いましょう。

タグ挿入コード挿入は予め設定しておいたコードを右クリックから簡単に貼り付けることができる機能です。

ブログの記事を書いているときに頻繁に利用するタグがある場合は、予め Lightning Blog Tools で設定しておくと、右クリックから簡単に貼り付けることができるようになってとても便利です。

最後に


プログラム関係の知識がない方には、ちょっと難しく感じるかもしれませんが、慣れれば誰でもできるようになりますので、ブログを持っている方はぜひ活用してみてください。

記事作成の時間が短縮できるのですごくいいですよ!

有名ブロガーから学ぶ、人気ブログを作るための3つのルール

世の中には星の数ほどのブログが存在していますが、大きなアクセスを集められるブログは数えるほどしかありません。一体なぜなのでしょうか?

時間があるときを見つけては一生懸命記事を書いてきたのに、ブログの記事数自体はそれなりに充実しているのに、なぜか人はさっぱり集まらない。アクセス数は少なく、記事を読んでくれている人は少数の決まった人たちだけ。これまでにブログに費やしてきた労力に対して、返ってくるものがあまりにも少なすぎる。

なぜこうなってしまうのでしょうか?

理由は簡単です。あなたが人を集めるための基本的なルールに従っていないからです。ただ思うままに記事を書いているだけでは、大勢の読者を獲得することはできないのです。すでにブログを始めている、もしくはこれからブログを始めたい、そして可能なら人気のあるブログにしたい、そういった野心をお持ちならこの記事に書いてある3つのルールに従ってください。たった3つのルールですが、常に意識しながら記事を書いていくだけで、自然と読者は増えていきます。努力次第ではブログだけで生きていくことも夢ではありません。

  1. パッと見て面白そうに感じる、魅力的なタイトルをつける
  2. 他人が必要とする情報を掲載する
  3. できるだけ毎日、丁寧に記事を書く

本当にシンプルですが、これだけです。多くのアクセスを得ている有名ブロガーは、上記のルールに従って記事を書いています。逆に言うと世の中のほとんどのブロガーは、この簡単なルールに従わずに記事を書いているのです。だから人が集まらないのです。

そんな簡単な話じゃないだろうと思う方もおられるかもしれませんが、これらのルールは様々な人気ブロガーが出版した集客術について書かれた本の共通項とも言えるべきものです。この記事はそういった本をたくさん読んできた私が得た知識、共通項をまとめた内容を掲載しています。作者のまったく違う複数の本ですが、読んでみると驚くべきことに同じ内容について述べられていたのです。

それでは3つのルールについて詳しく解説していきます。

パッと見て面白そうに感じる、魅力的なタイトルをつける


この記事のタイトルは「有名ブロガーから学ぶ、人気ブログを作るための3つのルール」です。どこかで似たような構成のタイトルを見たことがないでしょうか。

「○○をするために必要な○つの方法」

 

昨今、本のタイトルでこういった表現方法が増えているのは、興味を惹き、売り上げを伸ばす確かな効果があるためです。ブログの記事においてもこういった表現は有効になります。考えてみてください。あなたがブログのアクセス増加方法を調べているときに、以下の2つの記事を検索サイトで見つけた場合、どちらを読んでみたいと思いますか?

「ブログに人を集めよう」
「有名ブロガーから学ぶ、人気ブログを作るための3つのルール」

これらが並んでいる場合、下のタイトルをチェックしたくなる人の方が多いのではないでしょうか。本屋さんで面白そうなタイトルの本を見つけた時、つい手にとってしまった経験はありませんか?それと同じことです。

あなたがどれだけ一生懸命、時間をかけて面白い記事を書いたとしても、読んでもらわなければ意味がありません。

 

また魅力的なタイトルは検索サイト上のメリットだけでなく、SNSでの拡散にも役立ちます。SNSでは記事の全文を転載することはできませんので、タイトルが大きな割合を占めることになります。魅力的なタイトルはSNSユーザーの拡散したい気持ちを刺激しますし、拡散を目にした他ユーザーからのアクセスにも繋がります。拡散を目にしたユーザーが記事を読み、さらに自分のSNS上で拡散する、こうして雪だるま式にアクセス数が増えていくのです。

ブログを持っている方なら誰しも経験したことがあると思いますが、時間をかけて記事を書いたのに、タイトルだけはなぜか最後に思いついた適当なもので投稿してしまう。

これは費やした時間が報われない、非常にもったいない行動です。時間がかかっても構いませんので、面白いタイトルが思い浮かばなければ今日は投稿しない!このくらいの意気込みでタイトルを考えてみてください。

他人が必要とする情報を掲載する


これは3つのルールの中で最も重要で、あなたの意識を大きく変えなければならない部分でもあります。今から書くことは毒っ気のある表現になってしまいますが、非常に重要なことです。

あなたの人生、あなたの日常には誰も興味がありません

 

仮にあなたが知名度のある芸能人や文化人であったとしましょう。もしそうならば、あなたの人生や日常に興味を持ってくれる人も多く出て来るかもしれません。しかしあなたが普通に生きてきた一般的な人間の場合、その日々の生活にどれほどの人が興味を持ってくれるというのでしょうか。

「今日、○○というお店でご飯を食べました(写真)」
「散歩に出かけました。晴れていてとても気持ちよかったです。」

こんな記事を書いたことがある、もしくはこんな記事を書いているブログを読んだことはないでしょうか。あなたが特別に好意を抱いている相手が書いているブログなら、そういった記事も楽しく読めるでしょう。しかし見ず知らずの人間が書いているブログの場合、その人がご飯を食べた、散歩したことを知って、はたしてどれだけの人が楽しめるというのでしょうか。

普通の人間の日常についての記事で読者を楽しませようとするなら、相当な文才が必要になります。あなたが作家レベルの特殊な才能をお持ちでしたら、記事の内容は問いません。その文才を活かして記事をどんどん書いていくだけで目的は果たせます。しかしそういった特殊な才能を持っている人間は、残念ながらごくわずかしかいないのです。

それならどうすればいいのでしょうか?

そもそもあなたの人生や日常に興味を持ってくれる人は少ないのですから、自分についての記事ではなく、他人が興味を持つことについての記事を書けばいいのです。人間は誰しも、自分については強い関心・興味を持っていますが、他人に対してはそれほどの関心を持ちません。

人の行く裏に道あり、花の山

 

これは投資の世界でよく使われる格言で、人が進まない道にこそ綺麗な花の山を見つけることができる、という意味です。ブログの世界においてもこの格言は当てはまります。多くの人が自分について書いているからこそ、あえて自分はそうせずに、他の人が必要としている情報を記事にするのです。

自分自身が楽しめる、発信したいことではなく、他人のためになる、読者が役に立ったと感じられるような記事を書いてください。この世界には多くの人間が生きていますが、自分のことよりもまず他人のことを考えられる人は、その中でもほんのわずかしかいません。皆、与えることよりも与えられることを望むのです。しかし裏の道はその考え方では見つけられません。

まずあなたの方から与えるのです。そうすれば自ずと花の山が見えてきます。

できるだけ毎日、丁寧に記事を書く


1番目、2番目のルールは意識さえ変えれば守ることのできる決まりですが、この3番目のルールだけは強い忍耐力を必要とします。人気ブログの特徴ついてイメージしてみてください。

  • 更新頻度が高い
  • 記事がたくさんある
  • 記事の内容が充実している

どの人気ブログでも上記の項目は当てはまるでしょう。どれも一朝一夕、手軽に成し遂げることはできません。つまりブログにそれだけの時間をかけているのです。週に1時間をブログに時間を費やす人と、毎日1時間をブログに時間を費やす人ではどれだけの差がでるでしょうか。前者は1年で計48時間、後者は1年で365時間を使っていることになります。毎日ブログの記事を書いている人は、週1の人に比べて7.6倍の時間を費やしているのです。週1で記事を書いたブログが7~8個作れる計算です。

記事量にして7.6倍、もちろんそれだけ熱量を費やしているのですから、文章を書く技術にも差が出てくるでしょう。2年目、3年目になるとその差はさらに大きくなっていきます。結局はどれだけ一生懸命ブログに取り組んだかということが重要になってくるのです。適度に手を抜きながら楽をして多くのアクセスを集めることはできません。記事を書いている人間の熱意や熱量は必ず読者にも伝わります。

また1つの記事を充実させるということも非常に重要です。あなたが思いつくことは他の誰かも思いついています。つまり同じ題材、似た内容の記事はすでに存在していると考えてください。その中でどうやって違いを作るかというと、妥協せずに、ただただ多くの時間を費やすしかありません。我々は特別な才能を持っているわけではありませんので、記事の充実を図るには時間をかけて丁寧に書く、この姿勢こそが大切なのです。他の人が同じ題材で1時間かけて記事を書いたなら、あなたは2時間、3時間をかけてその記事を書き上げてください。他にない視点、新たな情報、文字量・充実度、こういったもので差をつけられなければ、ライバル記事に対して優位に立つことはできません。

そして記事の情報が古くなったらその都度、修正していくことも必要になります。古い情報のまま放置すると、読者のためになりませんし、間違った情報を提供することにもなります。検索サイトは記事の新しさや、記事を読んでいる時間も計測していますので、時々更新を行い、内容を充実させ、長く読ませることが大切です。

最後に


魅力的なタイトルを考える、他人が必要とする情報を掲載する、これらは比較的簡単に実行することができると思いますので、次に記事を書くときにぜひ試してみてください。どんな人でも得意分野や他の人よりも詳しいと言えるジャンルがあるはずなので、まずはその分野で読んだ人が参考になるような記事を書いてみましょう。

最後のルール、できるだけ毎日記事を投稿する、これはいざ実行しようとすると非常に大変で、強引に行うとブログ自体を嫌いになってしまうかもしれませんので、ブログで生活する!といった熱い野望を持った方でない限り、無理をする必要はないと思います。あくまで自分が楽しく続けられる範囲でブログの更新頻度を上げてみてください。

この記事が参考になったと思ったらぜひシェアしてくださいね!