未分類 – 256beat

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

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

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

■ 目次
1. html 内でタグを設定する
2. タグをページ内のリンクとして設定する
おまけ: 目次をスタイルとして登録しておく

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

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

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

<h3 class="midasi01" id="i1">1. html 内の見出しにタグを設定する</h3>

1	<h3 class="midasi01" id="i1">1. html 内の見出しにタグを設定する</h3>

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

id="i1"

id="i1"

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

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

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

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

<div style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;">
■ 目次
<a href="#i1">1. html 内でタグを設定する</a>
<a href="#i2">2. タグをページ内のリンクとして設定する</a>
</div>

■ 目次

<a href="#i1">1. html 内でタグを設定する</a>

<a href="#i2">2. タグをページ内のリンクとして設定する</a>

</div>

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

style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;"

1	style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;"

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

href="#i1"

1	href="#i1"

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

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

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

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

style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;"

1	style="padding: 10px; border: solid 1px #DFDFDF; background-color: #F5F5F5;"

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

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

テーマの編集

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

.mokuji{
    padding:10px;
    border:solid 1px #DFDFDF;
    background-color:#F5F5F5;
}

.mokuji{

padding:10px;

border:solid 1px #DFDFDF;

background-color:#F5F5F5;

}

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

テーマの編集

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

class="mokuji"

1	class="mokuji"

とすることができます。

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

<div class="mokuji">
■ 目次
<a href="#i1">1. html 内でタグを設定する</a>
<a href="#i2">2. タグをページ内のリンクとして設定する</a>
<a href="#i3">おまけ: 目次をスタイルとして登録しておく</a>
</div>

■ 目次

<a href="#i1">1. html 内でタグを設定する</a>

<a href="#i2">2. タグをページ内のリンクとして設定する</a>

<a href="#i3">おまけ: 目次をスタイルとして登録しておく</a>

</div>

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

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

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

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

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

サンプル見出し-①

これは見出しです

サンプル見出し-②

これは見出しです

サンプル見出し-③

これは見出しです

サンプル見出し-④

これは見出しです

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

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

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

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

テーマの編集

class属性の内容

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

.midasi01{  
     color:#000; /*文字色*/
     background:#fff; /*背景色*/
     border-top:1px solid #ccc; /*上線の太さ、種類、色*/
     border-right:1px solid #ccc; /*右線の太さ、種類、色*/
     border-left:1px solid #ccc; /*左線の太さ、種類、色*/
     border-bottom:1px solid #ccc; /*下線の太さ、種類、色*/
     padding:.8em .9em .8em .9em; /*上下左右の間隔*/
     background-image:url(画像のURL); /*背景に使用する画像のURL*/
}

.midasi01{

color:#000; /*文字色*/

background:#fff; /*背景色*/

border-top:1px solid #ccc; /*上線の太さ、種類、色*/

border-right:1px solid #ccc; /*右線の太さ、種類、色*/

border-left:1px solid #ccc; /*左線の太さ、種類、色*/

border-bottom:1px solid #ccc; /*下線の太さ、種類、色*/

padding:.8em .9em .8em .9em; /*上下左右の間隔*/

background-image:url(画像のURL); /*背景に使用する画像のURL*/

}

サンプルコード

サンプル見出し-②

これは見出しです

.midasi01{
     border-left:7px solid #1E90FF;
     padding:.6em .8em
}

.midasi01{

border-left:7px solid #1E90FF;

padding:.6em .8em

}

サンプル見出し-③

これは見出しです

.midasi02{  
     border-top:1px dashed #ccc;
     border-right:1px dashed #ccc; 
     border-left:7px solid #ff1493;   
     border-bottom:1px dashed #ccc;  
     padding:.6em .8em 
}

.midasi02{

border-top:1px dashed #ccc;

border-right:1px dashed #ccc;

border-left:7px solid #ff1493;

border-bottom:1px dashed #ccc;

padding:.6em .8em

}

サンプル見出し-④

これは見出しです

.midasi03{  
     background:#fff8dc;  
     border-top:1px dotted #ccc;  
     border-right:1px dotted #ccc;  
     border-left:7px solid #ff7f50;  
     border-bottom:1px dotted #ccc;  
     padding:.8em .9em 
}

.midasi03{

background:#fff8dc;

border-top:1px dotted #ccc;

border-right:1px dotted #ccc;

border-left:7px solid #ff7f50;

border-bottom:1px dotted #ccc;

padding:.8em .9em

}

サンプル見出し-⑤

これは見出しです

.midasi04{  
     background:#f8f8ff;  
     border:3px double #555;  
     padding:.8em .9em 
}

.midasi04{

background:#f8f8ff;

border:3px double #555;

padding:.8em .9em

}

使い方

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

<h2 class="midasi01">これは見出しです</h2>

1	<h2 class="midasi01">これは見出しです</h2>

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

おまけ

これを応用すると、

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

します。

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

CSS

.waku01{
     border-top:1px dashed #ccc;
     border-right:1px dashed #ccc; 
     border-left:1px dashed #ccc;   
     border-bottom:1px dashed #ccc;
     padding:.8em .9em   
}

.waku01{

border-top:1px dashed #ccc;

border-right:1px dashed #ccc;

border-left:1px dashed #ccc;

border-bottom:1px dashed #ccc;

padding:.8em .9em

}

使い方

<div class="waku01">
こんな風に枠を付けて表示できたり
</div>

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

</div>

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

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』をインストールすると、次のようなエディタ画面が

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

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

テーブルを挿入

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

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 を利用すると、こんな感じにソースコードを表示することができます。

void main()
{
    for (int i  = 0; i < 10; i++) {
        printf("Count %d¥n", i);
    }
}

void main()

{

for (int i = 0; i < 10; i++) {

printf("Count %d¥n", i);

}

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

写真投稿のテスト

WordPress に写真を貼り付けてみるテスト。

どんな感じの見た目になるんだろう？

blogはじめました

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

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

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

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

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

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

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