WordPress の記事に目次を設定する方法

WordPress で記事を書くときに目次を付けたくなることもありますよね。
プラグインを使って目次をつけることもできるようですが、ここではプラグインを用いずに目次を作る方法を紹介したいと思います。

この方法を使うと、こんな感じに目次をつけることができます。

それではさくっと行ってみましょう。

1. html 内の見出しにタグを設定する

まずは、見出しする部分に次のように id を設定していきます。
たとえば、この見出しには以下のようにidを設定しました。

ここで指定したidが目次をクリックした時にどこまで飛ぶのかのターゲットになります。
ここでは、

としましたが、id の文字は好きに決めることができます。

自分がわかりやすい文字を設定すればよいです。

2. タグをページ内のリンクとして設定する

次に目次を実際に挿入したい部分に、

といった感じで目次の設定を行います。

と書かれている部分が、目次としての外観を設定している部分になります。

と書かれている部分が、ターゲットへのリンクを設定している部分です。
ここに見出しに設定した文字をしていすることになります。

これらのタグを設定することで、プラグインを利用しなくても目次の設定が行えるようになります。
個人的には、見出しと目次を作ってしまってから、実際の内容(本文)を書いていくのが文章も書きやすい気がしています。

おまけ: 目次をスタイルとして登録しておく

先ほど、以下の部分が目次としての外観を設定していると書きました。

このstyleを自由に設定することで、見た目を自由に変化させることができるのですが、気に入ったスタイルが見つかった場合には、「テーマの編集」からスタイルを登録しておくことができます。

WordPress で「外観」-「テーマの編集」と選択して、テーマの編集画面を開きます。

テーマの編集

「スタイルシート(style.css)」の部分に、次のように class 属性を設定します。

画面でみると次のような感じになります。

テーマの編集

これで、「ファイルの更新」ボタンを押すと class 属性の設定が保存されるので、あとは今まで style として指定した部分を

とすることができます。

このページで使われている具体的な目次は、次のようになっています。

class 属性を指定しておくことで、毎回同じstyleをせってする必要がなくなったりだとか、あとからすべてのエントリーの見た目を一気に変えたいという時に class 属性だけを変更すれば良くなったりと、少し便利になるかと思います。

WordPress で見出しのデザインを設定する

WordPress のインストール時のテーマで見出しタグを使うと、なんの装飾もないシンプルな見出しが表示されます。
これはこれで、シンプルな感じで良いのですが、もう少し目立たせたかったりする場合には、スタイルシート(CSS)を記述することでデザインを変えることが出来ます。

また、見出しに限らずサイトをもっと凝ったデザインにしたい場合などには、スタイルシート(CSS)を編集する必要がでてくるので、まずは手馴しのつもりで、見出しタグの変更を行ってみるのも良いでしょう。

まずは、どんな感じに見出しが設定できるのか見ていくことにしましょう。

サンプル見出し-①

これは見出しです

 

サンプル見出し-②

これは見出しです

 

サンプル見出し-③

これは見出しです

 

サンプル見出し-④

これは見出しです

 

こんな感じに、見出しのデザインを変更することができます。

見出しのデザインをスタイルシートに設定する方法

ダッシュボードから”外観” – “テーマの編集”を選びます。
テーマの編集

すると、”スタイルシート (style.css)”が開きますので、ここにCSSのコードを書き加えていくことになります。

テーマの編集

class属性の内容

では、どのようなコードを書き加えていくかというと、次のようなコードを加える事になります。

サンプルコード

 

サンプル見出し-②

これは見出しです

 

サンプル見出し-③

これは見出しです

 

サンプル見出し-④

これは見出しです

 

サンプル見出し-⑤

これは見出しです

使い方

WordPress 投稿時にテキストエディタで以下のような感じに記述します。

「class」 に、設定したクラス名を指定してください。

おまけ

これを応用すると、

こんな風に枠を付けて表示できたり

します。

これは、次のようなclassを設定しました。

CSS

使い方

考え方になれるまではなかなか難しいかもしれませんが、様々なバリエーションを作ることができるのできっと力になると思います。

 

blog で1万アクセスを取ると世界はどう変わるのか?

月間1万アクセスを集めるblogとは、どの程度のレベルになるんでしょうか?
そんな疑問を持ったのでちょっと調べてみました。

まずは、有名ブロガーのイケダ ハヤトさんのブログ収益によると

1万PV 〜 1,000円
5万PV 3,000 〜 10,000円
10万PV 10,000 〜 50,000円
20万PV 50,000 〜 100,000円
30万PV 100,000 〜 150,000円
40万PV 150,000 〜 200,000円
50万PV 200,000 〜 250,000円
100万PV 500,000 〜 750,000円
150万PV 750,000 〜 1,250,000円
200万PV 1,000,000 〜 1,500,000円
250万PV 1,250,000 〜 1,750,000円

(出典 : 月間10万PVでいくら稼げるの?「ブログ収益早見表」をつくりました)

ぼんやりと眺めてみると、10万PV〜50万PVまでのゾーンでは10万PVあたり50,000円程度の広告収入が見込める程度ということなんでしょうか?

ちょっと表を書きなおしてみると次のようになるんだと思います。

PV数 最小単価(@PV) 最大単価(@PV)
1万PV 0 0.1円
5万PV 0.06円 0.2円
10万PV 0.1円 0.5円
20万PV 0.25円 0.5円
30万PV 0.33円 0.5円
40万PV 0.375円 0.5円
50万PV 0.5円 0.5円
100万PV 0.5円 0.75円
150万PV 0.5円 0.83円
200万PV 0.5円 0.75円
250万PV 0.5円 0.7円

こうやって見てみると、PV数が上がるごとにPV単価が高くなっていくんだろうなぁ…なんてことが想像できます。

…google adsense の報酬が1クリックあたり30円程度が平均値になるようなので、1万PV程度だと、333PVに1件クリックされる程度の換算になります。

CTR(Click Through Rate:クリックスルーレート)という広告がクリックされる割合を(1クリックあたり30円程度が平均として)考えてみるとこんな感じになります。

 

 

PV数 最小CTR(予測) 最大CTR(予測)
1万PV 0 0.0033
5万PV 0.002 0.0066
10万PV 0.0033 0.0166
20万PV 0.0083 0.0166
30万PV 0.01111 0.0166
40万PV 0.0125 0.0166
50万PV 0.0133 0.0166
100万PV 0.0166 0.025
150万PV 0.0166 0.0277
200万PV 0.0166 0.025
250万PV 0.0166 0.0233

こうやって表を眺めてみると、PVが増えるに従って有利な条件になっていきそうな世界なんでしょうね。

どうも1万PV程度だとやっとブログ飯道(?)の門前に立てたという程度なんだろうなぁという気がしてきます。

また、別のblogでは次のように紹介されていました

最上級 ネ申 1億PV 〜
トッププロ 1,000万PV 〜
上級 プロ 300万PV 〜
セミプロ 100万PV 〜
エキスパート 30万PV 〜
中級 トップアマ 10万PV 〜
アマチュア 3万PV 〜
ノービス 1万PV 〜
初級 脱ビギナー 3,000PV 〜
ビギナー 2,999PV以下

(出典 : PV数でわかるブロガー番付 | あなたのブログはどのレベル? )

わかりやすく、1万PVを超えると中級者の仲間入りができるみたいですね。

この参考にさせていただいたエントリーでも書かれていましたが、1万PVぐらいまではコンテンツを充実させることに力を注いで、PVなんかも気にしない方が良いのかもしれませんね。

逆に、1万PVぐらいまでだとコツコツと積み重ねていくことが大事で、コンテンツの内容だとか、目を引くタイトルだとかも二の次なのかもしれません。

しかし、プロと称されているのが 300万PVというと、イケダハヤトさんの「ブログ収益早見表」と見比べてしまうと、ちょっと理想が高すぎるような気がしてしまいますね…

まぁ、先を見すぎても疲れるだけなので、ひとまずの山として月間1万PVを目標にするのは良さそうな気がします。

WordPress の投稿に表を挿入する方法

WordPress がデフォルトの状態では表の挿入を行うことができない。

表の挿入を行いたい場合には、別途『TinyMCE Adbanced』というプラグインを入れるのが便利だ。

TinyMCE Advanced

『TinyMCE Adbanced』をインストールすると、次のようなエディタ画面が

WordPress Editor

こんな風に拡張されてメニューが表示されるようになる。

TinyMEC Advanced

表を作成するのには、”テーブル”から”テーブルを挿入”を選択し表の列と行数を選ぶだけだ。

テーブルを挿入

そうすると、次のような表が作成できるようになる。

1行1列 1行2列 1行3列 1行4列
2行1列
2行2列

WordPress のビジュアルエディタを利用していれば、セルのサイズをで決定することができる。

セルのサイズをピクセルで調整したい場合には、調整したいセルを選択して”テーブル” – “セル” – “セルのプロパティ” を選択するとピクセルの入力が行えるようになる。

セルのプロパティ

セルのプロパティの幅や高さの欄にピクセル値を入力しよう。

セルのプロパティ

Excel の操作に慣れている人には直感的に取り扱うことができると思う。

なかなか便利なプラグインなので利用してみて欲しい。

WordPress でソースコードを表示したい時には”Crayon Syntax Heightlihter”

WordPress でソースコードを表示したい時には、”Crayon Syntax Hightlighter”というプラグインが人気があるようです。

Crayon Syntax Heightlighter を利用すると、こんな感じにソースコードを表示することができます。

これはなかなか便利そうですね。

 

blogはじめました

ふと、独自ドメインでblogを始めてみようか…なんてことを思い立ったので、サイトを立ててみました。

折角だからAWSのEC2なんかを利用してWordpressを立ち上げてみるのもおもしろそうかなどと思い悩んでみたものの、実験的なサイトのために回りくどい手間をかけるのもアホらしく思えてきてしまったので、結局はロリポップの簡単インストールなどを使ってみることにしました。

世の中色々と便利なもので、実際に作業をする手間なんかよりは、どうやって運用しようか悩んでいる時間のほうがよっぽど時間がかかってしまったなんて変な状況になっていたりもします。

ドメインも新しく取り直そうかと思ったのですが、ちょうど一年前に取ったまま放置していたドメインをそのまま使ったほうが変に悩まなくていいかなぁ…なんてことを思ってみたり。

…全然別のことに使おうと思ったドメインなんですけどね…

まぁ、名前なんてのは使っていれば馴染んでくるものですからね。

あまり頑張りすぎても先が続かないんで、気長に運営してみたいと思います。