ブログ

【初心者向け】投稿エディタの使い方-WordPress4.0最新版-
2015/6/25 修正・追記
内容を WordPress の 4.2.2 の最新版の仕様に基づいた記事に更新しました。

このエントリーは “投稿エディタの使い方” に関してまとめています。WordPress のエディタをうまく使いこなせれば、1 記事 1 記事を魅力的なものにしていくことができますので、ぜひ色々と研究して欲しい部分です。
WordPress はバージョンアップを繰り返すごとにエディタの操作性も変わっていっていますので、お使いのバージョンと記事内のバージョンを確認してください。

WordPressの２つのエディタを使いこなす

WordPress の記事投稿・編集用のエディタには 2 つのタイプがあります。

ビジュアルエディタ

1 つはビジュアルエディタ。Word なんかの文章作成ソフトのような感覚で、文字入力・装飾などができます。
文字の色や配置などを視覚的に確認しながら装飾していくことができるので、初心者でも簡単に記事を編集することができます。

HTMLエディタ

もう 1 つは HTML エディタ。タグを打って入力していきます。ある程度のタグはワンクリックで挿入できますし、HTML や CSS に詳しい人なら細かいデザインも好きなようにできます。

どちらを使うべき？

オススメはどちらも使うことです。記事を書いたり、簡単な装飾はビジュアルエディタで行って、細かい設定やデザイン・装飾をしたり、タグをきれいに整えたりといった作業は HTML エディタを使って行います。
もちろん、なれていない方はビジュアルエディタだけで十分です。
両方使い分ける際には、エディタの切り替え時にレイアウトが崩れたり、タグが無効になったりすることもあるので注意してください。

ビジュアルエディタを使う

まずはビジュアルエディタの使い方をまとめておきます。
なお、ここでは 2015 年 6 月時点でのデフォルトのエディタの使い方を説明していますが、より使いやすいビジュアルエディタにするためには、functions.php にコードを追記してエディタの機能を追加したり、TinyMCE Advanced などのプラグインを導入することをオススメします。
ちなみに、デフォルト状態のビジュアルエディタはツールが 1 行分しかないかと思いますが、1 段目右端にあるボタンをクリックすれば、2 段目の表示/非表示ができます。

ビジュアルエディタの改行について

まず押さえておきたいのが改行方法。
ビジュアルエディタの改行方法には 2 通りあります。ひとつは普通に Enter キーを押す方法。この場合タグは【<p> 〜 </p>】が差し込まれ、改行というよりは段落が変わります。改行前の段落と改行後の段落の間にスペースが空きます。

例）
改行前の文章です。
改行後の文章です。それぞれの文章は <p> 〜 </p> に挟まれています。

もうひとつは shift + Enter キー を押す方法です。この場合タグは【<br />】の改行タグが差し込まれます。改行前と改行後の文章の間にスペースはありません。

例）
改行前の文章です。
改行後の文章です。2 段の文章全体が <p> 〜 </p> で挟まれていて、間に <br /> が入ります。

ビジュアルエディタのボタン一覧

初期状態では上の図のようなボタンが配置されています。プラグインを使えばボタンを追加・削除することもできますが、一通りデフォルトの機能について紹介していきたいと思います。

(1) メディアを追加

画像・音声・動画などのメディアファイルをアップロードし、記事内に追加できます。詳しくは別の記事にまとめました。

【初心者向け】WordPress投稿の画像アップロード/挿入と編集の仕方

(2) 強調

文字を <strong> で囲み強調します。HTML 的には重要性を表します。一般的に見た目は太字になります。

強調

(3) 斜体

文字を <em> で囲みます。HTML 的にはアクセントを表します。見た目は斜体になります。
ちなみに、純粋に斜体にしたい場合は <i> タグでも実現できます。このタグは声や思ったことなどを表現する時に使用します。

斜体

(4) 取り消し線

文字を <del> で囲み取り消し線を入れます。HTML 的には削除された部分を表します。

~~取り消し線~~

(5) リスト（順序なし）

<ul> タイプの順番のないリスト表示です。行頭には■や●、□や○などが表示されます。この行頭記号の指定はスタイルシートで変更できます。
- リスト
- リスト
- リスト
(6) リスト（順序あり）

<ol> タイプの順番のあるリスト表示です。リストの並び順に意味がある場合はこちらを仕様します。行頭には 1 から順番に番号が付きます。この行頭番号も、ローマ数字やイロハなどスタイルシートで変更可能です。
1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト
(7) 引用

文章を <blockquote> で囲み引用を表します。文章を書籍などから引用した場合や、他のサイトから記事を転載した場合はこの引用タグで囲みます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

(8) 区切り線（横ライン）

<hr> タグを挟みます。一般的に表示は横ラインが入ります。HTML 的には段落・テーマの区切りを意味します。

(9) 左寄せ

<p> タグで囲まれた段落を左寄せにします。通常は初期状態で左寄せになっていますが、中央寄せや右寄せした文章を左寄せに戻す時などに使えます。

左寄せ

(10) 中央寄せ

<p> タグで囲まれた段落を中央寄せにします。

中央寄せ

(11) 右寄せ

<p> タグで囲まれた段落を右寄せにします。

右寄せ

(12) リンク挿入/編集

文字を <a> タグで囲みリンクを挿入します。リンク編集画面が表示され、リンク先やリンク先のページを同一ページで開くか/新規のページ or タブで開くかなどを選べます。
また、過去に投稿した記事をワンクリックでリンク挿入することもできます。

リンク

(13) リンク削除

<a> タグで囲まれた部分から <a> タグを取り除き、リンクを削除します。

(14) 続きを読む

<more> タグを挿入し、投稿の一覧表示画面でこのタグの部分に「続きを読む」を表示します。このタグ以降の文章は「続きを読む」をクリックしないと読めません。
1 記事 1 記事ごとに、「続きを読む」の挿入場所を変えたい場合に有効な機能です。テーマによってはある一定文字数以降を自動的に「続きを読む」状態にしている仕様もあります。

(15) ビジュアルエディタ 2 段目の表示/非表示

ビジュアルエディタの 2 段目を表示させたり、非表示にしたりします。初期状態は非表示になっていますので、ビジュアルエディタをメインで使う方はここをクリックして 2 段目を表示させておきましょう。

(16) 段落

文字を見出しタグで囲みます。<h1> 〜 <h6> まで用意されています。基本的に <h1> はタイトル部分に適用されており、1 ページに 1 つであることが望ましとされているので、<h2> 以降を仕様しましょう。
また見出しにしていた部分を選択し「段落」をクリックすれば、<p> タグで囲まれた書式に戻ります。
たまに知識のない方が、段落タグを文字の大きさを変えるために使っているようですが、これは文字の大きさを変えるためのものではないので注意してください。
見出しタグの使い方はこちらの記事を参照してください。

【初心者向】WordPressで記事を作成する時に意識したいSEO的７つのポイント

(17) アンダーライン

文字に下線（アンダーライン）を引きます。

アンダーライン

(18) 両端揃え配置

テキストを両端揃えにします。日本語の場合だと右端の縦ラインを綺麗に揃えてくれます。ただし、ブラウザによってはうまく表示できな場合もある・・・らしい？？

WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !　WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !　WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !

(19) 文字色変更

文字に色を付けます。
▼ をクリックするとあらかじめ設定された色を選べます。【カスタム】から自由に色を設定することもできます。

フォントカラー：レッド（#ff0000）
フォントカラー：ブルー（#0000ff）
フォントカラー：イエロー（#008000）

(20) テキストとしてペースト

ビジュアルエディタに Word などの文章をコピーして貼り付けたい場合、元の Word の書式をそのまま引き継ぐ設定になっています。この設定を OFF にしたい場合はこのボタンをクリックしておきます。
純粋に文字情報のみがペーストされます。

(21) 書式設定のクリア

装飾した文字を装飾なしの状態にします。

(22) 特殊文字挿入

特殊文字を挿入します。クリックすると選択ウィンドウが開くので挿入したい文字をクリックします。

♠♣♥♦

(23) インデントを減らす

テキストのインデントを減らします。次の【 (24) インデントを増やす】で右へインデントを追加した段落のインデントを戻す時に使用します。

(24) インデントを増やす

テキストのインデントを増やして右にずらします。スタイルシートを使って左側に余白が追加される書式になります。元に戻す場合は【(23) インデントを減らす】をクリックします。

インデントを増やす（クリック 1 回）

インデントを増やす（クリック 2 回）

インデントを増やす（クリック 3 回）

(25) 取り消し（undo）

操作を取り消して 1 つ前の状態に戻ります。

(26) やり直し（redo）

取り消した操作を元に戻します。

(27) キーボードショートカットの表示

キーボードショートカットの一覧が表示されます。

(28) 集中執筆モードへの切り替え

集中執筆モードへ切り替えできます。集中執筆モードをオンにするとエディタ周りのメニューやウィジェットが非表示になり、中央のエディタ部分だけが表示されます。
マウスをサイドバー部分に動かせば再び表示されますが、エディタ部分にマウスを戻すと再び非表示になります。集中執筆モードをオフにするには、もう 1 度エディタ右上のボタンをクリックします。
集中執筆モードのボタンがない場合は【表示オプション】を開いてみてください。集中執筆モードを有効化する（最大行表示エディターと集中執筆モード機能を有効化します。）にチェックを入れることで機能が使えるようになります。
集中執筆モードは WordPress 4.0 か 4.1 辺りから仕様が変わりました。以前はエディタのボタンもほとんど非表示になり、もっと無駄を削ぎとった感じで今より本当の意味で “集中” って感じでした。
個人的には以前の集中執筆モードの方が好きです。

ビジュアルエディタでの装飾方法

ビジュアルエディタを使って文字を装飾する場合は、装飾したい文字をドラッグしてハイライト状態にし、装飾したいボタンをクリックします。
例えば文字に色を付けたい場合、色を付けたい文字を選択して反転させます。
その状態のまま文字色変更のボタンをクリックして好きな色を選択すると、文字の色が変わります。ビジュアルエディタの場合、実際に文字の色が変わるので視覚的に確認もできます。

HTMLエディタを使う

HTML エディタの使い方についてまとめておきます。
HTML エディタとは言っても全てをタグ打ちするわけではなく、クリックひとつでタグを打ち込んでくれるボタンがいくつかそろっています。また、独自の CSS をつくって class や id 指定する場合も、HTML エディタで編集した方が早いと思います。
また、AddQuicktag というブラグインを使うとワンクリック入力できるタグを自由に追加することができるのでオススメです。

HTMLエディタでタグを入力する方法

まずはそのボタンの使い方です。
タグの構造は【<● >〜</●>】というように、文字を挟むことで挟んだ文字に対して条件を指定します。
例えば・・・

<strong>装飾したい文章</strong>

とすれば

装飾したい文字

のように強調文字（太文字）になります。
もちろんこれらを手打ちしてもいいのですが、より簡単なのはエディタのタグボタンを使うことです。
このボタンを使うには、まず装飾したい文字の頭にカーソルを持って来て、装飾したいタグをクリックし、装飾を終わらせたい文字の後にカーソルを持って来て、もう一度装飾に使ったタグをクリックします。そうすると、装飾したい文字がタグにはさまれることになります。
例えば、、、

(1) 装飾したい文字の先頭にカーソルを合わせる

(2) 使用するタグのボタンをクリックする

(3) 装飾を終了したい文字の後ろにカーソルを合わせる

(4) 使用したボタンと同じボタンをもう１度押して終了タグを挿入する

こんな感じです。
タグを挿入したい文章を選択ハイライトしてからボタンを押すと一発で開始タグと終了タグで囲ってくれますので、こっちの方が便利かもしれませんね。

HTMLエディタの改行について

HTML エディタは基本的には <strong> や <a href=”url”>、<h2> などのタグが表示されるんですが、段落（ <p> ）と改行（ <br /> ）のタグは表示されません。なので、これ改行なの？　それとも段落が変わっているの？　とよく分からなくなっているかもしれませんね。
結論から言いますと、Enter キー 1 回の普通の改行は【<br />】扱いとなり、Enter キー 2 回の 1 行空きにすると【<p> 〜 </p>】で囲まれることになります。
こんなイメージ・・・

まとめ

WordPress のエディタはデフォルトの状態でも結構使いやすくはできていると思います。まずは基本的な使い方を覚えておきましょう。その後物足りないと思った場合も、プラグインをインストールすることで機能を拡張し補うことができます。そうすればより使いやすいエディタになると思います。
ところでエディタにはもう 1 つ重要な【メディアを追加】ボタンがあります。このボタンでは画像や音声、動画などのメディアファイルをアップロード&埋め込むことができます。メディアの挿入・編集の方法については別の記事でどうぞ。

【初心者向け】WordPress投稿の画像アップロード/挿入と編集の仕方

【初心者向】WordPress3.5以降の画像/メディアの追加方法
2012年5月8日
【初心者向け】WordPressの記事投稿を便利にするカスタマイズ法

2015/6/24 修正・追記
内容を WordPress の 4.2.2 の最新版の仕様に基づいた記事に更新しました。

やはりワードプレスはブログとして使いのがメインになると思いますので、一番使用頻度が高いと思われる記事投稿の仕方をまとめておきます。
今まで無料のレンタルブログを使っていた人にとってはちょっと馴染みが薄かったり取っ付きにくかったりするワードプレスですが、実は便利で無料のレンタルブログに比べて汎用性が高く自由度も高い（さすが CMS です）ので、使いこなせればインターネットでのビジネス展開に大きなプラスになりますよ！
よく分かんない・・・という方にはもちろん、すでに初心者の域を脱していても「知らなかった」ということがあるかもしれません？！　まぁちょっと流し読みしてみてください。

新しいブログ記事の投稿画面を表示させる

新しい記事を書くためには、ブログ投稿画面へ行かなければなりませんが、新規の投稿をするための画面へ行く方法は 3 通りほどあります。

１．管理画面のサイドバーから行く

管理画面のサイドバーに【投稿】という項目があります。ここの２つめの【新規追加】をクリックすれば、新規のブログ記事投稿画面を開くことができます。

２．記事一覧表示から追加する

投稿した記事は、記事一覧表示に表示されます。この画面の上部に【新規追加】のリンクがありますので、クリックすれば投稿画面を開くことができます。

３．上部のアドミンバーから追加する

ログインした状態だとワードプレスの管理画面、もしくはブログを表示さいた状態の上部にダークグレーのバーが表示されていると思います。これをアドミンバーと言うそうですが、ここからも新規記事の投稿が行えます。
アドミンバーの【＋新規】をクリックするか、マウスのポインタを【＋新規】という部分に持ってくると、メニューが表示されますので、【投稿】をクリックするとブログの新規記事投稿画面へ移動します。

ブログ記事の投稿画面を使いやすくする

ブログ記事の投稿画面は初期状態ではこんな感じだと思います。

真ん中に記事を書くスペースがあり、右サイドには投稿やカテゴリーの設定、タグの設定をするためのウィジェットがあります。記事を書くスペースの下にも、いくつかウィジェットが確認できるかもしれません。
しかし、これらのウィジェットの中には必要ないものもありませんか？　正直フォーマットとか、リビジョンとか、無くてもいい人は多いはず。。。
そんな時は消しちゃいましょう。

投稿画面のウィジェットを表示／非表示にする

もし必要ないウィジェットが表示されているなら、非表示にして見やすくすっきりさせちゃいましょう。
画面の右上に【表示オプション】というのがあると思います。ここをクリックすると、下にドロップダウンされてメニューが現れるんですね。そしてチェックボックスのついた項目がいくつもあるのが分ります。

ここにはデフォルトのウィジェットに加え、プラグインによって追加されたウィジェットも表示されます。
例えば、WordPress の必須プラグインとして名高い「All in One SEO Pack」。このプラグインが入っていると、記事を書くエディタの下（フッターエリア）に SEO の設定ができるウィジェットが表示されます。
まぁこのプラグインを入れているからには使用するはずでしょうから、非表示にする必要はないと思いますが、とにかく、ここで表示ウィジェットの切り替えができます。

レイアウトをワンカラムにする

また記事投稿・編集画面をワンカラムか 2 カラムか選ぶこともできます。最初は２カラムになってますが、ワンカラムにすると、サイドメニューにあった「公開」とか「カテゴリー」とかのウィジェットが全て投稿エディタの下に 1 列に並びます。

ウィジェットの位置を変更

さらに、ウィジェットの位置は変更することができます。
やり方は各ウィジェットのタイトルバーの部分にカーソルを持って行き、マウスのポインタが十字になるのでドラッグ＆ドロップで移動させるだけ。
例えばアイキャッチ画像を設定するウィジェットを一番上に持って行きたいときは、アイキャッチ画像の部分をドラッグして上に移動させると・・・移動可能な位置に点線が表示されますので、目的の位置で離せば OK です。

ただ、右サイドバーのウィジェットと、投稿スペースの下のフッターウィジェットとでは、必要な横幅が違うのでむやみに移動させると逆に使いにくくなるかもしれません。
なので、ウィジェットの配置を入れ替える場合は、右サイドバーのウィジェットは右サドバー内で、フッターのウィジェットはフッター内で入れ替えることをオススメします。

記事を書く

さて、投稿画面が使いやすくなったところで早速記事を書いていきましょう。記事は分かりやすく、おもしろく、読みやすい（見やすい）が理想ですよね。そのあたりの記事内容に関しては別の記事にまとめました。

分かりやすい文章コンテンツをつくる５つの鉄則

また記事を書くためのエディタの使い方はこちらのにまとめていますので、ビジュアルエディタや HTML エディタの使い方を知りたい方は上記の記事を参考ください。

【初心者向け】投稿エディタの使い方-WordPress4.0最新版-

投稿を公開しよう！

記事を書き終わったら早速投稿！・・・と言いたいところですが、その前に 1 度プレビュー表示で実際のブログ画面を確認しておきましょう。他にも誤字脱字の確認など、声に出して記事を読み直すと違和感を感じる部分が出てくると思うので加筆・修正を行って仕上げに入りましょう。

ブログ記事のプレビューで表示を確認

サイドメニューの【公開】ウィジェットに【プレビュー】というボタンがあります。このプレビューをクリックすると、別ウィンドウ（もしくはタブ）が開きます。実際にブログに記事を公開したときと同じような状態で投稿内容をチェックすることができます。
特に画像の表示や改行のされ方、CSS での装飾など、ビジュアルエディタ上ではうまく反映されない内容をチェックしておきましょう。

公開条件の指定

公開ウィジェットには色々なメニューがあり、公開条件を細かく指定することができます。例えば下書きとして保存したり、公開日時を予約したりなどです。

(1) 公開ステータスの指定

公開ステータスには、【公開済み】と【レビュー待ち】と【下書き】の 3 つがあります。新規で投稿している場合は公開するまで【レビュー待ち】と【下書き】の 2 つだけになります。
また、一度公開した後も【下書き】を選択すれば下書きの状態、つまり公開されていない状態にいつでも戻せます。
【レビュー待ち】は、投稿者や寄稿者が管理者や編集者などに投稿内容をチェックしてもらった上で公開したい場合に選択します。とは言っても、寄稿者だとこのレビュー待ちしか選べませんが・・・（泣）

(2) 公開状態の設定

普通に公開するのか、何か条件指定をするかを選べます。
【公開】は普通の一般公開のことですが、その下にある「この投稿を先頭に固定表示」にチェックを入れるとどれだけ記事を追加しても常に先頭に表示されるようになります。
またテーマによっても扱いが異なります。例えば Twenty Eleven のショーケーステンプレートを使用した場合のショーケース部分に表示させたい記事もここをチェックする必要があります。Twenty Fifteen の場合は固定表示した記事に「注目」のタグが追加されます。
【パスワード保護】はその名の通り記事にパスワードを設定して、パスワードを知っている人のみが閲覧できるようにします。顧客や会員ごとに公開範囲を変えたい時などに使えそうですね。
パスワード保護にチェックを入れると、パスワード設定の入力欄が表示されます。
【非公開】は一部の人以外ブログ上では閲覧できないようにする設定です。一部の人とは、管理者や編集者、そしてその記事を投稿した本人のことです。

(3) 公開日時の指定

年・月・日・時・分、と細かく公開日時を指定できます。過去の日時を指定して記事の順番を入れ替えたり、未来の日時を指定して予約投稿にしたりできます。
また【ゴミ箱へ移動】をクリックすれば記事は瞬く間に「ゴミ箱」へ移動します。とは言っても、ゴミ箱の中をみればまだ記事が確認できますし、復元することも可能です。

準備ができたら公開する

これらの設定が済んだら【公開】をクリックして投稿しましょう。とは言っても、基本的に何も設定することはなさそうですよね・・・。
1 つ注意しておきたいのが公開日時です。そのままだと記事を立ち上げた時間のままだったりしますので、「昨日の下書きを仕上げて公開するか〜」とか思ってたら昨日の日付のまんまだった・・・なんてこともありえます。一度も公開していなければ、日付だけは最新の日にちに自動調整してくれるようですが、実際あやしいです。
というわけで、これで無事投稿ができます。あとはコンテンツ命、良質な記事をつくって行きましょう！

投稿した記事を編集するときに便利なリビジョン機能

WordPress 3.6 から備わった新しいリビジョン機能。今までもリビジョンはありましたが、より見やすく、使いやすくなりました。
ちなみに、リビジョンとは過去の記事内容と現在の記事内容を見比べることができる機能です。また、必要があれば古い記事を復元することもできます。
WordPress 3.6 からの仕様で、変化のあった部分がハイライトされるようになりました。レイアウトも左右に表示されるので、とても見やすいです。
Mac を使っている方は、バージョンと似たようなものだと思ってもらうと分かりやすいと思います。

リビジョンの表示方法

新規投稿時は表示されていないと思いますが、下書き保存や投稿した記事の更新を繰り返していくと、リビジョンが溜まっていきます。それでも表示されない場合は、表示オプションを開いて「リビジョン」の項目にチェックを入れてください。

リビジョンの使い方

リビジョンのところには、溜まっているリビジョンの数が【7+】などと表示されています。その横の【表示】をクリックすると、上の画像のような画面に遷移します。左側が過去のバージョン。右側が最新のバージョンになっていて、上部にあるスライダーを動かすことで保存されている過去のバージョンを遡って確認することができます。
過去のリビジョンを復元することもできますし、一部だけ復元したい場合は左側のバージョンから復元したい部分をコピーして、元の記事に戻った後にペーストすれば OK です。

リビジョン機能の注意点

WordPress は通常の設定のままだとひっきりなしリビジョンを保存していきます。しかしこれが WordPress を重たくさせる要因になっているとかなんとか・・・。いずれにしろ、どんどんデータベースの容量を食っていきますのでできれば保存する過去記事数を制限した方がいいでしょう。
リビジョンに貯める記事数を制限するにはプラグインを使えば簡単です。ぼくが使っているのは WP Total Hacks というプラグインです。このプラグインを使えば、リビジョンに保存する記事の数を設定できます。他にも様々な専門知識がないとできない設定がクリック 1 つでできてしまう超便利なプラグインなのでオススメです。

まとめ

いかがでしたでしょうか？　WordPress は色々な機能が備わっていて、自分の使いやすいようにできるのが魅力です。
逆にそれが原因で解りにくいとか、使いこなせないと感じている人も多いみたいですが、1 つ 1 つの機能を確認していただき実際に記事投稿や更新を繰り返し、WordPress の使い方に慣れていきましょう。

2012年5月7日
久しぶりにハマってしまったアーティスト

こういうのを“音楽”って言うんだろうなって思った。初めて彼ら彼女らの音楽に出会ったのは、全くの偶然だった。
アーティストや曲名を指定すれば、該当する YouTube の動画を自動で再生してくれるサービスがある。YouTubeXL というサービス（現在は利用できません）で、これがかなり BGM として使える。

ここの検索窓に『阿部真央』と入力して関連動画を自動再生させていた日だった。1 時間かそれ以上か、ひとしきり彼女の曲が流れ終わった頃、どうも阿部真央の声じゃない人の歌が聞こえてきた。
『ん？これはよくある「○○を歌ってみた」系か？
　このタイプにあんまりうまい人いないんだよな〜・・・。』
と思いつつ、仕事を続けていた。
作業は Mac で OS は Lion を使っているのだが、デスクトップはマルチタスク展開にしていて、ブラウザ用のデスクトップと仕事用のデスクトップ画面を分けて使っている。
なのでブラウザ上で流れる YouTubeXL の画面は見ていなかったのだが、聞こえてくるアマチュアかとおぼしき人たちの歌声に、作業中断。すかさずブラウザの動画を見る。
『なにこの人たち？　めっちゃうまいんだけど。』
特にハモリがきれいだと思った。
『すごい・・・。』
と、そのままずるずると関連動画を視聴。
仕事が忙しいにも関わらず、気付いたら２時間近くの時間を、彼や彼女たちに奪われてしまっていた（笑）

ぼくの時間を奪ったやつら・・・

関連動画では色んなアーティストのカバーを演奏していて、しかもたいていカバーって本家におとるもんだというイメージがあるが、それをことごとく覆してくれた。
自分の好きなアーティストの曲であっても、この人たちがアレンジしたら、何か満足してしまう。むしろ『その曲やってくれてありがと〜〜！』と思える、そんな不思議なパワーをもったすごい人たち。
僕が久しぶりにハマってしまったアーティスト、、、
それが Goosehouse のみんなだ。
元々は play you house というソニーミュージックの企画のひとつだったようだが、今は独立して Goosehouse として活動しているそうな・・・。
その辺りの情報は不確かだが、音楽は確かだ。
メンバーがいっぱいいて、曲ごとに編成を変えて、色々な角度から楽しめる。
アレンジもめっちゃクール！
そしてまたイケメンぞろいにかわいい子ばかりときたもんだ。
みんながみんな歌がうまくて、ハモリもできて、楽器までできちゃう人もいる。なんかもう、なんなのこいつらと、音楽やってた自分としては嫉妬のひとつもしたくなる。
万能すぎるぜ、Goosehouse。
けど、本当に Goose のみんなを見ていると、幸せな気持ちになるというか、音楽の楽しさが体中から伝わって来て、こういうのを音楽っていうんだな、と思う。
CD が売れないと言われる昨今ですが・・・
YouTube にある Goosehouseのチャンネルにはたくさんのカバーがアップされているが、中にはオリジナルの曲もある。
そのオリジナルがまたいい。
数ヶ月？数年ぶり？に CD も買ってしまった。
これを書いている時点ではまだ予約しただけなので届いていないが、届くのが楽しみだ。まじでCDなんて久しぶりすぎる。
しかもリリースが自分の誕生日みたいだから、まるで誕生日プレゼントだ。
ありがとう！
ライブも行ってみたいがだいぶ遠いからな〜・・・。全国ツアーとかしないんだろうか・・・。不定期ですが、Ustでライブもやってるのでそちらで我慢します。
とにかく今色んな人に知ってもらいたいアーティストですよ！　音楽好きな方は是非チェックしてみてほしい。
＞ Goosehouseの公式ホームページ
※忙しい時は注意。仕事がストップしてしまうかもしれません。

追記

Goose の皆さん、まぁ読まれることはないと思いますが、最初は大学のサークルか何かかと思ってました。すいません。。。
今度発売するアルバムの中の１曲

2012年4月25日
WordPressの記事一覧にアイキャッチを表示させてみた（＋αで個別記事にも）
やっとできました！　アイキャッチの表示。
アイキャッチとは、その名の通り目をキャッチするためのもので、一般的には画像・写真が使われています。人は写真に注意を惹きつけられてしまう癖があるため、ブログなどの記事に注目してもらうためにこのアイキャッチが有効なのです。
WordPress にも実装されていて、アイキャッチ、またはサムネイルなどと呼ばれています。テーマによってはただ写真をアップロードするだけで表示されるものもありますが、中には自分でカスタマイズしないと表示されないテーマもあります。
ですので、ここでアイキャッチ（サムネイル）の一般的な実装方法について試行錯誤して分かったことをまとめておきたいと思います。

アイキャッチ画像を設定すると、ブログが消えた！？

とにかく、めちゃくちゃ苦労しました。ワードプレスの記事投稿画面に「アイキャッチ画像を設定」という項目があるので、そこから簡単に設定できるものと思っていたのですが、どうもカスタマイズの過程でいろいろいじった結果、表示がされなくなってしまっていたようです・・・。
表示がされないどころか、アイキャッチに画像を追加すると、ブログ記事自体が見れなくなるという困った現象が起きてしまいました。それを解決するため、テンプレートを初期状態に戻して試してみたところうまくいったので、その方法をメモしておきたいと思います。
ただし、何が原因で（どのカスタマイズが原因で）アイキャッチ画像のを設定するとブログが消えてしまったのかは、現在も不明なままです。

アイキャッチ画像の設定方法

まず、最新の WordPress（Ver.3.3.1以降）を使用しているのであれば、記事投稿画面の右下に【アイキャッチ画像】という部分があると思います。
この記事では WordPress Ver.4.2.2 の仕様に基づいて説明していきます。
また、解説で仕様している画像やコードは Twenty Eleven のものです。
Twenty Eleven はデフォルトの状態ではアイキャッチが表示されない仕様なので、Twenty Eleven をのカスタマイズで学んだ方がいいと思い取り上げています。
もし WordPressのバージョンに問題がないのに、【アイキャッチ画像】という設定項目が表示されていない場合は、右上の【表示オプション】を開いてみてください。
【画面に表示】の中の【アイキャッチ画像】のチェックボックスのチェックが外れているかと思いますので、チェックを入れてください。そうするとアイキャチを設定するウィジェットが表示されるはずです。

この記事の解説で使用しているWordPressやテーマのバージョン
・WordPressのバージョン：4.2.2
・テーマ：Twenty Eleven Ver.2.1

アイキャッチ画像のアップロード

アイキャッチ画像をまずは選びましょう。【アイキャッチ画像を設定】をクリックすると、画像のアップロード用ウィンドウが開きます。新たにアイキャッチ用の画像をアップロードしてもいいですし、既にアップロード済みの画像を使っても構いません。

画像を選択したら、「アイキャッチ画像として使用」という選択肢があるので、こちらをクリックすれば、アイキャッチ画像の設定は完了です。右下にもアイキャッチ画像が確認できると思います。

アイキャッチ画像を実装するタグ（基本設定の必要はなし）

アイキャッチ画像を表示させるためには、PHP のタグを functions.php に書き込まなければなりません。以下がそのタグです。
```
<?php add_theme_support('post-thumbnails'); ?>
```
ですが、Twenty Eleven の場合このタグはすでに書き込まれています（functions.php の 110 行目辺りです。）ですので、この設定は必要なさそうでした。

アイキャッチ画像を出力するタグ

あとは、アイキャッチ画像を表示させたい位置に、アイキャッチを表示してくれる PHP タグを書き込めばいいわけです。
こちらがそのタグです。
```
<?php the_post_thumbnail(); ?>
```
表示のさせ方で色々バリエーションがあるようです。

サムネイル表示（150×150）
```
<?php the_post_thumbnail('thumbnail'); ?>
```
サイズを100×100（希望のサイズ）に指定
```
<?php the_post_thumbnail( array(100,100) ); ?>
```
※【 array(100.50) 】と指定しても、小さい方の50に合わせて正方形表示されてしまうとのこと。

アイキャッチ画像の表示場所

アイキャッチ画像を表示させるタグは分かりましたが、どこを見ても「表示させたい位置に配置してください」と書かれているばかりで、具体的にどこに埋め込んだらどこに表示されるのかよく分かりませんでした。
というわけでいくつか試してみましょう。

トップページの記事一覧にアイキャッチ画像を表示させる

アイキャッチ画像は、その名の通り“記事に目を留めてもらう”ことが目的です。ですので、記事一覧のページに表示されなきゃ意味ないですよね……。
というわけで、トップページの記事一覧や、アーカイブページの一覧表示の部分でアイキャッチ画像が表示されるようにしてみました。
【 content.php 】を子テーマフォルダ内に複製します。複製したファイルを開くと以下のような部分があります。
```
</header>
	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div>
<?php else : ?>
<div class="entry-content">
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
```
このテーマファイル上の 33 行目辺りで、記事タイトルやメタ情報を出力しているヘッダー部分が終わって、その後にコンテンツ部分が始まっています。今回は 40 行目辺り（上記で言うと 9 行目）の【 <div class=”entry-content”> 】と指定されている部分の後にアイキャッチのタグを埋め込みました。
```
</header>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div>
<?php else : ?>
<div class="entry-content">
	<?php the_post_thumbnail('thumbnail'); ?> /* ！追加したアイキャッチ画像表示タグ */
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
```
今回は常にサムネイル表示されるタグにしました。大きさは常に 150 × 150 になります。
すると、こんな感じで表示されました。

個別記事にもアイキャッチ画像を表示させてみる

投稿記事の一覧にはアイキャッチ画像を表示することはできましたが、この記事を見ようと続きを読むなどのリンクをクリックすると、個別記事ページではアイキャッチ画像は表示されなくなります。
表示されなくても構わないという人もいると思いますが、中には個別記事にもアイキャッチと同じ画像が必要だ！　という方もいるでしょう。あなたがそういうタイプかは分かりませんが、個別記事にもアイキャッチ画像を表示させる方法をメモしておきます。
【 content-single.php 】を開きます。
```
<div class="entry-content">
	<?php the_content(); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div>
```
こちらは 22 行目辺りに【 <div class=”entry-content”> 】がありますので、このすぐ後にもアイキャッチ画像のタグを埋め込みましょう。
```
<div class="entry-content">
	<?php the_post_thumbnail('thumbnail'); ?>　/* ！追加したアイキャッチ画像表示のタグ（サムネイル表示バージョン） */
	<?php the_content(); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div>
```
すると・・・個別記事にもアイキャッチ画像が表示されました！

ちなみに、content-single.php は「標準」で記事投稿した場合のファイルです。その他のフォーマット、例えば「ギャラリー」で投稿した記事をカスタマイズしたい場合は content-gallery.php のファイルを編集します。
さて、これで問題なく表示されそうです……と思ったのですが、確認してみるとなんだか不格好ですね。
レイアウトを整えた方が良さそうです。

アイキャッチ画像のレイアウトを整える

ただタグを埋め込んだだけでは、画像と記事が縦に並んで表示されるだけです。アイキャッチ画像の大きさがコンテンツを表示させる幅と同じだけあれば自然な表示だと思いますが、今回みたいにサムネイル表示させたり、画像のサイズを小さめで表示させたい場合は右か左に回り込みをしたいところです。
というわけで、これは CSS の話ですが、アイキャッチが回り込みをして表示されるようにしたいと思います。クラス指定をして【 style.css 】の方でレイアウトをしてもよかったのですが、今回は直接指定してみました。
以下のタグでアイキャッチ画像の PHP タグを挟めば OK です。
```
<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span>
```
回り込みを指定しているので、【 clear: both; 】で回り込み解除をするのが普通ですが、Twenty Eleven の場合は既にメタ情報の部分で回り込み解除が指定されていますので、必要なさそうです。
```
.entry-meta {
	color: #666;
	clear: both; /* メタ情報は回り込みが解除されるようになっている！ */
	font-size: 12px;
	line-height: 18px;
}
```
Twenty Eleven の style.css のだいたい 760 行目辺り。
と、いうわけで、実際の表示はこんな感じですね。

これでスッキリしました。
以上、ワードプレスでのアイキャッチ画像設定と表示の方法でした。

アイキャッチに個別記事ごとのパーマリンクを指定するには？

ちなみに、今のままだとアイキャッチをクリックして個別記事へ行く事ができないので、アイキャッチ画像に記事ごとのパーマリンクを指定したいと思いませんか？
そういうわけで、こちらの記事にパーマリンクの設定方法をまとめてみました。

アイキャッチに個別記事へのパーマリンクを貼る方法

参考にさせて頂いたブログ

― WP MEMO

ありがとうございました。
2012年4月20日
無料でメルマガ・ステップメールが発行できるWordPressプラグインAutoresponderの使い方
こちらで紹介しているプラグインは Ver.2.7.4 以下のものになります。2012.5.1 以降 Ver.4.0 がリリースされ、大きく内容が変わっておりますのでご注意ください。

プラグインがあれば、なんでもできる！
いつからか何かやりたい事があれば、まずは WordPress のプラグインを探すようになりました。それで WordPress でもできると分かれば、WordPress のプラグインに乗り換えることも検討する次第です。そんな中、「プラグインを使って WordPress の管理画面からメルマガの発行ができないだろうか・・・」と考えるようになって、色々調べてみました。

Subscribe2 でメルマガの発行ができる……と思いきや

最初は Subscribe2 というプラグインが良さげかな〜と思ってました。他のブログやサイトをググってみても、色々なところで紹介されていましたので、まずはためしてみました。しかしこのプラグイン、肝腎なステップメールの配信ができませんでした。

ステップメールってご存知ですか？

読者さんに対して 1 通目、2 通目、3 通目・・・とあらかじめ決まったメールを順番に配信していくシステムのことです。これがあれば、メルマガに登録してくれた読者さんに対してあらかじめ用意したメールを順番に送ることができるんです。つまり最初にメルマガを書いて設定をしておけば、あとは全て自動的に読者さんへのフォローアップを行ってくれるというわけです。
具体的な使い方としては・・・商品を購入した方を自動的にステップメールに登録されるようにしておいて、、、
- 商品購入 3 日後に商品の使用感を訊ねる文面のメールを送り
- さらに 3 日後に他のお客さんの声を紹介するメールを送り
- さらに 3 日後に他のお客さんからの質問＆回答を紹介するメールを送り
というようなシナリオをあらかじめつくっておいて、順番に配信されていくの見守っておけばいいわけです。

ステップメールでお客さんをファンにする

このステップメールで外せないのは、あくまでもお客さん個人に送っているメールにすることです。ほとんどのメルマガ配信スタンドには【名前差し込み機能】というのがあり、これによって同じメールを一斉に配信したとしても、ちゃんと個別の名前が差し込まれて相手のメールボックに届きます。
お客さんの名前も自動的に差し込まれてパーソナルなメールのようにできますので、この仕組みを知らないお客さん側からしてみれば、「なんてマメな会社なんだろう！」って感動してくれるはずです（そういう方もまだいるかと思います）。
このステップを 1 〜 2 週間続けて最後にアップセルやクロスセル、つまり上位商品や関連商品の販売につなげていけば成約率も上がるでしょう！　これができないメルマガは、はっきり言ってメルマガじゃないので、このステップメールの仕組みはどうしても必要でした。

無料でメルマガとステップメールの配信ができるプラグインを発見！

そんな感じで色々探していたら最終的に WordPress の管理画面からメルマガの発行と、ステップメールの配信ができる無料プラグインを探しているなか、ひとつ、良さそうなプラグインが見つかりました。

[GWA]Autoresponder（オートレスポンダー）

日本語だと「自動返信メール」・・・って感じでしょうか？　とにかく、ネーミングからすると自動でメルマガを配信してくれそうです。しかし、この Autoresponder は海外のプラグイン、情報も少ない、ということで使い勝手はあまり良さそうではありません。
とはいいえ、無料でメルマガの配信、そして登録後最大 60 通まで自動でメールを配信することができるのです！　もちろん、読者さんの名前も差し込めます。これはすごい・・・。ついにメルマガ配信もここまできたか、という感じでした。
まぁシナリオは 1 つしかつくれないので、あくまでも初心者向けと言った感じでしょうか。ステップメールを何通もつくって顧客ごとに対応を変えて行く・・・という上級者の使い方をしない限りはこれで十分だと思います。
と、言うわけで、前置きがだい〜〜〜ぶ長くなってますが、この「[GWA]Autoresponder」というプラグインの使い方を説明して行きたいと思います！

Autoresponderのインストール方法

無料でメルマガの発行やステップメールの自動配信ができてしまうWordPressのプラグイン、「Autoresponder」のインストール方法から使い方までを解説してます。
通常 WordPress のプラグインのインストール方法には 3 通りがあって、ひとつはローカル側にあるプラグインのファイル（zip形式）を WordPress へアップロードするか、FTP を使ってプラグインのフォルダをアップロードする方法。そして、もう一つはプラグインページから目当てのものを検索して、そのままインストールする方法です。
Autoresponder の場合、前者の方法でいくと販売者にメールアドレスを差し上げることになってしまうので、後者のプラグインページからインストールする方法をオススメします。

1．プラグインページから検索する

プラグインのページの「新規追加」というところをクリックすると、プラグインの検索ページに行けます。そこの検索フォームに「autoresponder」と入力して検索すると、上の方に「[GWA] Auto Responder」というプラグインがヒットします。

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

プラグインの説明部分にある「いますぐインストール」をクリックして、しばらく反応を待っていると、「インストール完了」と表示されます。
そしてその下にある「プラグインを有効化」をクリックすれば OK です。

3．プラグインを確認する

プラグインの有効化に成功すると、WordPress 管理画面のサイドバーに【 [GWA] Autoresponder 】というメニューが現れます。

以上で Autoresponder のインストールは終了です。。

Autoresponderの初期設定

さて、インストールした後の最初の設定に関してまとめてみたいと思います。
プラグインをインストールし、有効化した後の設定に関してです。まずは、

[GWA]Autoresponder　＞　Option　＞　SETUP

と進みましょう。

セットアップ画面の概要

フッター情報の設定

① Enter custom message footer to be added to all outgoing email.

フッター部分のメッセージを入力する部分です。つまり、発行者情報のテンプレートを入力すれば OK です。
「Enable automatic addition of custom footer to all messages.」と書かれた部分にチェックを入れないと、メールを送ってもフッター情報は表示されないので、必ずチェックを入れておきましょう。

購読解除リンク用テキストの設定

② Enter custom unsubscribe link text for email messages.

購読解除リンクを表示させる時の、テキストメッセージを入力します。
デフォルトの設定では「Click to unsubscribe.」と入力されています。意味は「購読解除はこちらクリック」というニュアンスでしょうか。
ですので、同じような意味の文面を日本語で書いておけば大丈夫でしょう。
その下にあるチェックボックスには、「Automatically add unsubscribe link to every message sent. 」と書かれています。「この購読解除リンクを全てのメッセージに自動的に挿入すかどうか」を訊いています。
- チェックした場合
  チェックすれば自動的にメールの一番最後に解除 URL が挿入されます。
- チェックしない場合
  チェックしなかった場合は自動的に解除 URL は挿入されません。
  ただし、解除 URL をメール本文に記載しておくことは法律で義務づけられている必須事項なので、チェックを外したとしても、毎回配信解除 URL を手動で記載する必要があります。
  つまりチェックは外すな！ということです。
その他の部分、③〜⑤の設定

③ Enter subscription success response to display on weblog.

読者登録がうまくいった場合のメッセージを入力します。

④ Enter unsubscribe success response to display on weblog.

メルマガの配信解除がうまくいった場合のメッセージを入力します。

⑤ Enter subscribe failure text to display on website.

読者登録がうまくいかなかった場合のメッセージを入力します。

【補足】③～⑤はデフォルトで英語のメッセージがそれぞれ入力されていますが、テストしてみたところ、登録後も解除後も登録失敗時もうまくメッセージが表示されませんでした。
表示させる方法がはっきりしていないのですが、それでも念のため内容を日本語に変更しておいた方がいいでしょう。

読者登録フォームをサイドバーに設置する

次に読者登録フォームを設置しましょう。
登録フォームに関しては「FORM HTML」と「FLY-IN HTML」の２つがありますが、とりあえず基本的な登録フォームとして使うなら「FORM HTML」で大丈夫です。
メニュー画面への行き方は・・・

[GWA]Autoresponder　＞　Option　＞　FORM HTML

FORM HTML画面の概要

登録フォームのタグを日本語向けに書き換える

①の部分を書き出して、ちょっと体裁を整えてみました。
```
<form action="http://example.com/index.php" method="POST" name="ARGWA">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; padding: 10px;">
<tr>
<td>
<div>
Name: <input id= "argwa_name" type="text" name="gwaname" value="" size="20"><br />
Email: <input id="argwa_email" type="text" name="gwaemail" value="" size="20"><br>
<input type="submit" class="button" value="ADD" name="Add" onclick="return gwaCheckForm1(this.form)">
</div>
</td>
</tr>
</table>
<input type="hidden" name="act" value="s_add">
<input type="hidden" name="listid" value="1">
</form>
```
最低限変更しておいた方がいい箇所は以下の 3 つです。
「Name」の部分は「お名前」、「Email」の部分は「メールアドレス」、「ADD」の部分は「登録」など、分かりやすいように書き換えてください。

サイドバーに読者登録フォームを設置する

上記の部分を書き換えたら、フォームのタグをコピーしてください。次はウィジェットのページへ移動します。
テンプレートによって若干異なる部分もあるかとは思いますが、「テキスト」というウィジェットが必ずあるはずです。それをサイドバーウィジェットとして使用しますので、ドラッグしてサイドバーエリアへ持って行ってください。

次に、テキストウィジェットの右端にある【 ▼ 】をクリックしてテキストウィジェットを開きます。
そして先ほどコピーした登録フォームのタグをペーストします。「タイトル」の部分は「メルマガ登録」など、適宜入力してください。

今回は
- タイトル　⇒　メルマガ登録はこちら
- Name:　⇒　お名前：
- Email:　⇒　Email：
- ADD　⇒　登録する
に変更しました。
実際にブログ上のサイドバーを確認してみます。

ちゃんと登録フォームが表示されてました。
以上で Autoresponder のインストール後の設定は終了です。

Autoresponderでのメール配信方法

それでは、いよいよメルマガ配信の方法に関してまとめていきます。

Welcomeメッセージを編集する

Welcome メッセージとは、読者さんがメルマガに登録した際に、自動的に読者さんの元へ返信されるメッセージのことです。つまり登録完了メールですね。
まさにオートレスポンダーという名が示す通りの機能というわけです。
まずは、この Welcome メッセージを編集していきましょう。
次の管理画面から、読者登録完了メールの編集、一斉配信メルマガの作成・送信、ステップメールの作成・編集ができます。

Welcomeメッセージ編集画面

まずは以下の手順で登録完了メールの編集画面へ行きます。

[GWA]Autoresponder　＞　Messages　＞　Welcom　＞　Edit Message

すると以下のようなメッセージの編集画面を開くことができます。

① Type

HTML 形式のメールか、テキストタイプのメールか選ぶことができます。
テキストタイプを選ぶ場合はプルダウンメニューを開いて、「PLAIN TEXT」を選んでください。

② Subject

登録完了メールの件名を入力します。例えば、「ご登録ありがとうございます。」など、初めて登録した方へ分かりやすい件名にしましょう。
間違ってもおどろおどろしい件名はやめてくださいね。

③ BODY と ④ 差し込みタグ

メールの本文を入力します。
デフォルトでは HTML 形式の英語のメールが入力されています。HTML 形式の場合、タグが有効になりますが、改行は <br> などを使う必要があります。
また、HTML 形式・テキスト形式のどちらの場合でも、差し込みタグが使用できます。
使用できるタグは以下の３つです。
- <?Name?>
  読者の名前に変換されます。読者ごとにいちいち名前を差し替える必要はありません。１通つくれば後は読者ごとに名前を変換して送信されます。
- <?Email?>
  読者のメールアドレスに変換されます。
- <?Unsubscribe?>
  購読解除リンクに変換されます。Optionメニューで解除リンクを常に表示させるにチェックを入れている場合は改めて使わなくても大丈夫です。
一斉配信のメルマガを作成・送信する

登録している読者さんに対して一斉にメールを配信する方法です。
まずは以下の手順でメール作成・送信画面を開きます。

[GWA]Autoresponder　＞　Messages　＞　SEND MESSAGE

① TYPE

テキストタイプか、HTML タイプかを選べます。

② SUBJECT

メールの件名を入力します。

③ Body

メールの本文を入力します。使用できる差し込みタグは <?Name?>・<?Email?>・<?Unsubscribe?> の３つで先ほど説明した内容と同じです。

④ Select users list

メール送信対象となるユーザーを選択できます。
「Send to Subscriber List」と「Send to WordPress Users」のどちらに送るかを選べますが、メルマガ読者に送る場合、「Send to Subscriber List」のままで大丈夫です。

⑤ Filter Leads

読者に条件を付けて送信対象者を選別することができます。選別基準は登録した日付で、それ以前か以後で 2 通りに分かれています。
- Send only to leads added after
  指定した日付より後に登録した人たちに送信します。
- Send only to leads added before
  指定した日より前に登録した人たちに送信します。
どちらの場合も入力方法は「yyyy-mm-dd」、つまり「年-月-日」の順番で入力します。例えば「2012 年 4 月 15 日」と指定したい場合は、「2012-04-15」と入力すれば OK です。「Send only to leads added before」の部分に「2012-04-15」と入力すれば、2012 年 4 月 15 日以前に登録した読者にのみ、メールが送信されます。

メッセージを送信する

メッセージが完成したら、最後に【 Send Message >> 】と書いているボタンをクリックして送信します。ワンクリックで送信完了となるので注意してください。送信済みのメールは、アーカイブとして残るわけではありませんので、必ずバックアップを取るようにしてください。

Autoresponderでのステップメール配信方法

ステップメールでは、メルマガ登録をした読者に対して自動的にあらかじめ決まったメールを配信していく機能です。WordPress の無料プラグイン Autorespnder でステップメールを配信する方法を説明していきます。

Autoresponderのステップメール設定

Autoresponder には、登録後 60 日までのステップメールを組み込むことができます。
最初に設定されている「Welcome」のメッセージは0日後という扱いで、その 1 日後、2 日後、3 日後、5 日後、7 日後・・・のようにスケジュールを組んで配信していくことができます。

[GWA]Autoresponder　＞　Messages　＞　ADD NEW MESSAGE

① Day

登録した日を 0 日後とし、最大 60 日後までのスケジュールを指定できます。
0-60 となっていますが、0 日後はデフォルトで設定されているので、ステップを追加する場合は 1 日後から設定してください。
※0を指定したり、既に作成済みの日数を入力するとエラーになります。

② Type

テキストタイプか、HTML タイプかを選べます。

③ Subject

ステップメールの件名を入力します。

④ BODY

メールの本文を入力します。新たに加えたステップを確認するステップメールを新規で作成してみましょう。
こんな感じで入力してみました。

入力が終わったら、「Add Message」をクリックして編集を完了させます。すると「Message added successfully.」というメッセージが表示されましたのでメッセージの作成に成功したようです。

作成したメッセージを確認する

さっそくメールを確認してみましょう。
上記の「Click here」、もしくはサイドバーメニューの「Messages　>　MANAGE MESSAGES」から表示できます。

うまく追加されているようです。

注意！

上記の画面でメールの件名（Subject の項目）をクリックすると、既に作成したメールの編集ができます。
ただし！　メールは日本語で送信する分には問題ないのですが、一度作成したメールを再編集しようとして編集画面を開くと、なぜか文字化けしてしまいます。
そして１度文字化けしてしまうと（つまり再度編集画面を開くと）その後送信されるメールも文字化けしてしまいます。

解決策としては、

①必ずメールの文面はバックアップを取っておく。
②メールを再編集する際は、バックアップした本文を編集して貼付け、そして保存する。

この 2 点です。
特にメールのバックアップは必ず取っておいてください。再編集しようと思っても文字化けしてしまうので、同じメール本文を WordPress 上から確認することができません。1 度つくったメールは編集をしない限り件名をクリックしないようにしてください。
以上、ワードプレスのステップメールプラグイン、[GWA]Autoresponder の使用方法のまとめでした。
ありがとうございました。
2012年4月16日
メニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法
これ、よく使う CSS テクニックなのでメモしておきます。サイトの横幅を超えて、ヘッダーやメニューをブラウザの画面一杯に広げる方法です。WordPress の Twenty Eleven に関してのメモですが、CSS のテクニックですし基本は同じなのでどんなテーマでも（ WordPress じゃなくても）応用ができると思います。

2013/01/23　追記
ヘッダーやグローバルメニュー、フッターなどの要素を親要素をはみ出してブラウザの画面いっぱいに広げる方法です。より単純化して別の記事にまとめました。以下の内容を途中まで理解した上で、スタイルシートの記述に関してはこちらの記事で確認してください。

【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック

2013/06/29 追記
Twenty Twelve をテーマとして使用している場合、少々 CSS の記載に付け加えなければならない点がありました。もし Twenty Twelve を使っていて同様のことをしたい場合はこちらの記事を参考にしてください。

ヘッダー・フッター・ナビメニューなどを横幅いっぱいに広げるCSSの書き方-Twenty Twelve篇-

ブラウザの画面いっぱいにグローバルメニューを広げたい

今回目指しているのは、こんなデザインです。

よくグローバルメニューやヘッダー部分、あとはフッター部分でよく見るんですが、body 要素の横幅を無視してブラウザの画面一杯に広がるようになっているサイトがありますよね。元からそのようなデザインになっているテーマもありますが、今回は Twenty Eleven のように、そうなってはいないテーマでブラウザいっぱいんに広がる背景を実現しようというわけです。

仮説）要素をブラウザの画面いっぱいに広げるにはどうしたらいいか？

どうすればいいかと考えた結果、margin の右と左を負の値で横に広げればいいのではないかと仮説を立てました。margin に負の値を指定すると（ネガティブマージン）要素をはみ出します。しかし、そうすると中身のコンテンツまではみ出てしまうので、padding の右と左に同じ値を正で指定して元の位置まで戻す、という方法でうまくいくのではないか、という仮説です。。。が、言葉で説明が難しいのでこんなイメージです。

結果）サイトの横幅自体が広がって・・・

で、これを実践してみたのですが、本当にサイトそのものの横幅が広がっちゃって、右側へいくらでもスクロールできてしまう状態に・・・。ぱっと見 OK なんですが、横スクロールバーが拡大してしまい使い物になりませんでした・・・。
まぁつまり失敗だったわけです。

対策）横スクロールバーの拡大を防ぐ方法を発見！

ブラウザの画面一杯にメニューやヘッダー or フッターを広げる方法はあまり情報が見つからず苦戦していましたが、ひとつ、参考になったブログを発見したました。

＞親要素の幅を越えてボックスの幅をブラウザいっぱいに広げるテクニック

このブログに書いてあった事は、横スクロールバーが拡大してしまった場合、その拡大を防ぐ方法があるということ。使ったのは CSS の【 overflow 】という要素。

「ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定するための要素」

という事でした。
この【 overflow 】に【 hidden 】と指定すれば、はみ出した部分を表示させないということが可能です。
以上を踏まえて、Twenty Eleven の CSS を変更してみました。

ヘッダーやメニューをブラウザの画面一杯に広げるための作業手順

テーマは Twenty Eleven で試しています。上記のブログに書いている class や id とは異なるので、あくまでも Twenty Eleven の class や id などの要素に対応している記述だという点はご注意ください。またブラウザ対応も上記のブログに書かれている範囲に止まります。
ですが、id や class こそ違えど、どんなテーマでも応用ができると思います。

まずは下準備

まずは先ほど説明した【 overflow 】の要素を加えます。
Twenty Eleven の子テーマを作って、以下のスタイルを追記します。
```
html {
    overflow: auto;
}
body {
    overflow-x: hidden;
    position: relative;
    min-width: 1000px; /* 指定してもしなくてもいいと思います。指定するとブラウザの幅をち縮めても、横幅が 1000px 以下にはならなくなります。 */
}
```
【 html 】という要素は元々 Twenty Eleven の　CSS には記述されていませんので、追記してください。【 html 】は【 body 】のさらに親となる要素、、、というイメージでしょうか。
カスタマイズは、必ず子テーマを作成してから行うのを忘れないように！

グローバルメニューをブラウザ一杯に広げる

下準備が整いましたので、まずはグローバルメニューを body の要素をはみ出して、ブラウザ一杯に広がるようにしてみたいと思います。Twenty Eleven のグローバルメニューに関する指定は【 #access 】という部分です。だいたい 540 行目辺りです。
※ヘッダー部分のCSS要素に関してはこちらを参考ください。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ

【 #access 】の【 margin 】と【 padding 】の左右を以下のように指定します。
どちらとも指定の仕方は【上　右　下　左】の順番ですが、4 番目の左を指定しなければ、2 番目の値が “左右同じ” というふうに解釈されます。
```
/* =Menu
-------------------------------------------------------------- */
#access {
/* paddingの追記とmarginの変更 */
    padding: 0 500%;
    margin: 0 -500% 6px;
    width: 100%;
}
```
【 margin 】は左右に関しては元々【 auto 】となっていますので、ここにマイナスの値（ネガティブマージンと言うらしい・・・）を入れて body 要素からはみ出させます。margin-bottom が 6px となっているのは、Twenty Eleven の親テーマのスタイルがそのようになっているので、それを引き継いでいます。
指定する値は【 -500% 】にしていますが、はみ出すくらい大きな値であれば問題ありません。好きな値を入れてください。
デフォルトでは【 padding 】は何も指定されていません。【 margin 】の左右にはみ出した分だけ、今度はプラスで指定して相殺させるわけですね。
純粋に margin と padding の左右のみを指定する場合は以下のように書いても OK です。
```
#access {
    margin-left: -500%;
    margin-right: -500%
    padding-left: 500%;
    padding-right: 500%;
}
```
するとこんな感じでグローバルメニューがブラウザ一杯に広がります。

もちろん、横スクロールバーは出てきません（縦スクロールしかできません）。

ヘッダーも横一杯に広げてみましょうか

ついでにヘッダー部分もブラウザ一杯横に広がるようにしてみたいと思います。分かりやすくするために、まずはヘッダーの背景色を黄色にしてみました。
```
#branding { /* ヘッダーのデザインを指定するidです */
    background: #ff0; /* 背景色を黄色に指定 */
}
```
親テーマでは 500 行目辺りにありますが、子テーマに【 #branding 】の背景要素【 background（or background-color）】を追記しています。

後はこの黄色の背景が横一杯に広がればいいわけですね。
下準備が終わっていれば、あとは margin にマイナスの値を、padding にはその絶対値を取るだけです。
```
#branding { /* ヘッダーのデザインを指定するidです */
    background: #ff0;
    margin: 0 -500%; /* ネガティブマージンを追記 */
    padding: 0 500%; /* マージンで横へはみ出した部分を相殺 */
}
```
これで黄色の背景が画面一杯に広がりました。

まとめ

Twenty Eleven を使っている場合は、最低限以下のようにスタイルを追記すれば、ブラウザいっぱいに広がるヘッダーやナビゲーションメニュー、フッターなどを実現することができます。
あとは広げたい要素の margin にはマイナス、padding にはプラスを、それぞれ left と right の部分に大きな値を指定しておけばいいわけですね。
```
/* はみ出した要素を表示させない */
html {
    overflow: auto;
}
body {
    overflow: hidden;
    position: relative;
}
/* 特定の要素をブラウザいっぱい横に広げる */
id や class {
    padding: 0 500%;
    margin: 0 -500%;
}
```
2015/6/20 追記
【 overflow-x:hidden; 】よりも【 overflow:hidden; 】とした方が汎用性が高そうです。うまくいかない場合や Twenty Eleven 以外のテーマを使用している場合は、【 overflow 】で試してみてください。詳しくはこちら。

【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック

以上です。
2012年4月11日
どこに「いいね！」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか？
「いいね！」ボタンの設置方法をメモしようと思って、前回の記事を途中まで書いたのがもう 2 ヶ月くらい前の話・・・。ずいぶん間が空いてしまったよ・・・。
悪い癖が出てしまった。
設置の仕方に関して前回の続きから書いていきたいと思います。
【手順】
1. Facebookのデベロッパー（開発者）として登録してアプリケーションIDを取得する
2. 「いいね！ボタン」のタグを取得する
3. 「いいね！ボタン」のタグをWordPressに書き込む（←前回の記事はここの途中まで）
4. OGP設定用のタグを取得する
5. OGP設定用のタグを書き込む
6. OGP設定用のタグを書き込む
大まかに言うと以上の流れです。
今回は３．の「いいね！ボタンの」タグを WordPress のどこに配置するのがベストなのか、という部分を考察していきたいと思います。
ただ実際は「いいね！」ボタンに限らず、全てのソーシャルプラグインに共通する話です。ツイートボタンであろうが Google プラスワンボタンであろうが、はてなブックマークであろうが、タグを埋め込む場所は同じはずです。なのでソーシャルプラグインのタグの配置場所ということで参考にして頂ければと思います。

理屈はいいからとりあえず設置してたい人へ

なぜ、そこにタグを配置すればいいのか？　どうして、そんな表示になるのか？　などなど、理屈を説明し出すと長くなる＆ぼくもはっきし言ってよく分かってないので、とりあえずこうやったらうまくいったよっていう方法をご紹介します。
書いてあるとおりにやったらうまくいくのではないでしょうか・・・。
なお、WordPress を対象にしてますが、テンプレートは Twenty Eleven を使っているので他のテンプレートだと話が通じないかもしれません。
ただ、PHP によるテンプレートの構成の仕方は基本同じだと思うので、どんなテンプレートだろうが応用が効くと勝手に思っております。

ソーシャルプラグインの配置場所３パターン

他のブログを見てみると、ソーシャルプラグインが表示されている場所は大きく以下の３つに分けられると思います。

・記事の下
・記事の上
・記事の上と下

そして一番多いのが記事の下パターンですね。

ソーシャルプラグインの設置場所①
記事の下

一番簡単かなと思うのがテンプレートファイルの中にある【 comments.php 】に「いいね！」ボタンなどのタグを埋め込む方法です。
【 comments.php 】のファイルを開くと、結構頭の方に【 <div id=”comments”> 】と書かれているのが見つかると思います。
このタグの前か後にソーシャルプラグインのタグをコピペすればOKです。
```
<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form. The actual display of comments is
 * handled by a callback to twentyeleven_comment() which is
 * located in the functions.php file.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
/* ▼ ソーシャルプラグイン系 ▼ */
 /* ▼ いいね！ボタン ▼ */
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
 /* ▼ tweetボタン ▼ */
<a href="https://twitter.com/share" class="twitter-share-button" data-via="TwitterID" data-lang="ja" data-related="ユーザーネーム">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 /* ▼ Googleプラスワンボタン ▼ */
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>
/* ▲ ソーシャルプラグイン系 ▲ */
	<div id="comments">
	<?php if ( post_password_required() ) : ?>
		<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyeleven' ); ?></p>
	</div>
```
コメント用のファイルは必ず投稿記事の最後に出力されるようになっているかと思うので、ここにタグを貼っておけば必ずソーシャルプラグインも表示されるという寸法です。
また、Twenty Eleven で試した場合、WordPress の設定でコメント受付を拒否していた場合でも、ソーシャルプラグインは表示されました。
さらに【 <div id=”comments”> 】の前後にタグを埋め込むと、まずソーシャルプラグインが表示され、次にコメント欄が表示されるという流れですが・・・逆がいい場合、つまりコメント欄が表示されその後にソーシャルプラグインを表示させたい場合は、一番下にタグを埋め込めばOKです。
本当に最後の最後、【 </div><!– #comments –> 】と</div>で閉じられていると思うので、その後にコピペしてください。

ソーシャルプラグインの設置場所②
記事の上

今度は記事が始まる直前、だいたい想定しているのは記事タイトルの後がいいかな〜と思っておりますので、“ 記事タイトルと本文の間に表示させる方法 ”です。
しつこいようですが、使用しているテンプレートはTwenty Elevenです。
まず通常の投稿であれば【 content-single.php 】というファイルが記事を出力しています。このファイルを開くと、【 h1 】とか【 header 】とかいう文字が見つかるかと思います。
```
<?php
/**
 * The template for displaying content in the single.php template
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<h1 class="entry-title"><?php the_title(); ?></h1>
/* ▼ ソーシャルプラグイン系 ▼ */
 /* ▼ いいね！ボタン ▼ */
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
 /* ▼ tweetボタン ▼ */
<a href="https://twitter.com/share" class="twitter-share-button" data-via="TwitterID" data-lang="ja" data-related="ユーザーネーム">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 /* ▼ Googleプラスワンボタン ▼ */
<g:plusone href="<?php the_permalink(); ?>"></g:plusone>
/* ▲ ソーシャルプラグイン系 ▲ */
		<?php if ( 'post' == get_post_type() ) : ?>
```
11 行目辺りからヘッダーやタイトルに関しての記述らしきものが見つかりますよね。
ここの【 <h1 class=”entry-title”><?php the_title(); ?></h1> 】の後にソーシャルプラグインのタグをコピペすればOKです。

ソーシャルプラグインの設置場所③
記事の上と下

最後は記事の上にも下にも「いいね！」ボタンやツイートボタンなどのソーシャルプラグイン（ソーシャルボタン）を表示させる方法です。
と言っても、①と②の両方すればいいだけです。
こちらの記事で書いたように、ページの URL は自動的に取得してくれるようになってますので、上も下も連動していることになります。

ソーシャルボタンを好きな位置に配置できるように

以上を参考にして頂ければ、だいたい一般的なソーシャルプラグインの配置には対応できるかと思います。
最近は自力で設置しなくても、テーマに元々設置されていたりプラグインを使ったりすることで簡単に設置できるようになっていますので、それらを使用するのもいいと思います。
2012年4月9日
事業者向けのWEBデザイン概論-WordPressってすごい！そしてCSS3が楽しすぎる！

3 月はとにかくワードプレスをいじる機会が多かったので、WordPress やら Twenty Eleven やらのことをかなり把握することができました。
「使えば使うほどワードプレスってすごい！」って思いますね。
だいたいのことは、これ 1 つあればできてしまうのでは？　と本気で思いますよ。特にプラグインがあるから素人でも望んだことを手軽に実現できたりします。
先月は会員サイトをつくってみたり、ワードプレスの管理画面からメルマガ配信ができるようにしてみたり、会員ごとに公開・非公開などの権限を与える振り分けを行ってみたりと、色々試す事ができました。
ぼくのような素人からすると非常にとっつきにくい PHP ですが、そんな知識はなくても、プラグインひとつでカスタマイズが簡単にできてしまうのですから、ほんと、便利な世の中だとつくづく思います。
あとは CSS をある程度学べばデザイン面も問題無しという感じですね。

Webのデザイン性はかなり進化している！

特に今はまっているのが CSS3！
「CSS3っておもしろい！！」
本当に簡単にちょっとした工夫でサイトがおしゃれになりますよ。今までは画像をつくってアップしてサイズや位置を調節して・・・とやっていた事がCSSだけでできることも少なくありません。
しかもそれが更新しようと思った時にもすぐできてしまうのもいいですね。画像の再編集は面倒ですから・・・。
未対応ブラウザを使っている人がまだまだ多いというのが難点ですが、それでも自己満足に浸る分には申し分ないですね（笑）jQuery とか使えるともっと幅が広がるんでしょうが、まぁ素人ならその辺はプラグインに任せてもいいのではと思います。
また無駄なフラッシュとか、ギミックとかはただの自己満足で終わる可能性がありますからね・・・。

サイトの目的にそったデザインとは？

実際のところ、反応を上げたり売上を上げたりという目的を果たすのに、デザイン性の最大化は図る必要はほとんどなく、やるべきなのは最低限のデザイン性を確保しておく事です。
デザインでは印象・インパクトを与える事はできても、お客さんを行動させることはほとんどできませんので、やはり最後は言葉か文字で人が語りかけるしかないのです。
でないと商品を買ったり、申込をしたり、問い合わせをしたりといった行動には繋がりません（それを解決するためにコピーライティングがあるのですが）。
とはいえ、最近は本当にオシャレなサイトが多いので、この最低限の基準がものすごく上がっているな〜と感じるわけです。
ある程度素人っぽさを払拭した作りにしておかないと、デザインが素人っぽいってだけでサイトを閉じられてしまう！なんてこともありますし、信頼性を欠いて見込み客の反応を下げてしまうということもありますからね。
残念ながら『商品の良さ＝中身』は、実際に購入してみるまで分かりません。
ですので、『見た目』で判断されてしまうことを考えると、やはり最低限のデザイン性は確保しておかないとこれからどんどん進化するネットの世界でビジネスをしていくのは厳しくなってくるのかなと思います。

素人でもデザイン性の優れたサイトが無料でつくれる時代

サイトやブログを集客やセールスに活用しようと考えている人は、そこも抜かりなくやっておかなければならないわけです。
資金力のある企業は問題ないんでしょうけどね。
ですが、ホームページにかけるお金がないと、いつまでたってもみすぼらしい作りのまま・・・。周りでは最新のシステムを入れたオシャレなお店が次々とオープンしているのに、自分のお店は未だに10年前の店構えのまま・・・という状況です。
そこでワードプレスのような無料で使えるブログは中小企業や個人事業主にとって非常に心強い存在になるわけです。しかもプラグインも無料で使えてカスタマイズできるとなれば、コストダウンの効果は明らかでしょう。

プラグインの可能性

プラグインをうまく使えば、ショッピングカートも設置できるみたいですし、不動産管理もできるみたいですし、先ほど言ったように顧客向けの専用ページ（会員ページ）もつくれますし、なんと無料でメルマガ配信もできます。
さらに無料で配布されているテンプレートも多いので、デザイン面でも最低限を確保するのは難しくない時代です。
とは言っても、やはり専門知識もある程度は必要でしょう・・・。しかしプロのウェブデザイナーレベルの知識やスキルは不要ですし、ググればだいたいのことはできてしまうのが今のネットの世の中です。
ぼくもデザインやウェエブ制作に関して専門的な勉強はしてませんが、ほぼやりたいことはググれば解決してしまってますかね。
本当に帝王 Google 様に逆らえそうにないです（笑）

無料で使えるCSSのジェネレーター

CSS とか意味不明・・・、CSS3？　何それ！？　という方でも、勝手にCSSタグを吐き出してくれるジェネレーターサービスがたくさんあるんですよね。
これもググれば色々出てきます。
ブラウザ上で動くジェネレーターばかりなので、ネットに繋がっていさえすれば、よほど古いブラウザを使っていない限り動きます。
しかも無料。
直感的に操作すれば、グラデーションとかドロップシャドウ（影）とか、ボタンがつくれたりグローバルメニューがつくれたりと、とても便利です。
CSS3 の知識なんてなくても、おしゃれなデザインがすぐにできてしまうわけですね。

無料の素材も豊富

使用条件にある程度制限はあるものの、商用利用できる写真素材やイラスト素材を配布しているサービスはたくさんあります。
画像の加工もある程度は許可されてますし、人の写真があるだけでサイトの印象はがらっと変わりますからね。
もちろん、有料素材に比べるとクオリティに欠けますが、さっきも言ったように、ネット上での販売、集客においては“最低限のデザイン性”があれば結果がでるのですから、素材集めも無料で完結させて大丈夫なんですね。

結局は時間を買うかどうか

ほとんどのことが無料でできてしまう今の世の中、じゃあわざわざプロに任せるなんてお金がもったいない、と思う方もいるかもしれませんが、そうとも言い切れません。
自社で無料でやろうとすると、時間というコストが大幅にかかってしまうのです。
ある程度の知識を学ぶことも必要ですし、試行錯誤しながらつくっていくのは時間と労力がはんぱなくかかります。
そこに対して業者にお願いすることが費用対効果としてどうなのか、という点を考えた上でどうするかを決めないといけないでしょうね。
あとはセキュリティ面かな。
ただ、一つだけ言えるのは、WordPress（もしくは Movable Type でも OK）ベースのサイト・ホームページ・ブログにしましょうということです（つまり CM Sベースということですね）。
更新作業なども全て業者任せよりは、いざという時に自分で更新できた方がいいですからね。更新料とかぼったくられたくないですから（笑）
これさえ押さえておけば、ネットセールスにかなり使えるサイトをつくれるんじゃないかな〜と思います。

2012年4月6日
トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-
Twenty Eleven のデフォルトって、トップページに記事がフルで表示されますよね？
トップページの記事表示を 10 件とかに設定してて、さらに 1 記事の分量も多いとなればトップページの縦はものすごい長さになります。
さらにカテゴリーやタグのアーカイブを表示させたりした時も関連記事がフルに表示されるので、ちょっと必要な記事を見つけにくいな・・・とそう思ったわけです。それで、よく他のブログで見る抜粋記事の一覧表示にできないかなと思ったわけです。
まぁトップ画面から見たい記事をいちいちクリックしないと詳細が見れないというのも、ユーザビリティ的にどうなんだろうと思うところもありますが、だいたい検索でいらっしゃる方ってトップページには着地しませんしね。
というわけで抜粋記事の一覧表示の方法をググってみました。

結論

結論から言うと、
Twenty Eleven のテンプレートフォルダの中にある【 content.php 】の 40 行目あたり、【 <?php the_content　〜】と書かれている部分を【 <?php the_excerpt　〜】に変更するだけでした。
```
<div class="entry-content">
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?> /*ここの the_content を the_excerpt に変更*/
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div>
```
そうするとこんな感じで記事が抜粋されて一覧表示されるようになります。

トップページ以外も、アーカイブのページなども全て抜粋で表示されていました。
また、表示される記事の数を変更したい場合は、【設定　＞　投稿設定】の部分で「１ページに表示する最大投稿数」で好きな数に変えてください。

抜粋記事の文字数を変更する

さて、無事トップページの記事一覧を抜粋表示にできたのですが、なんだか 1 記事分の文字数が少ないように感じました・・・。
そこで、抜粋記事に表示される文字数を変えてみます。
これはテンプレートをいじらない方法なので、王道のやり方じゃない可能性大です！（そもそもこのブログに書かれている事の大半はググって調べたことをまとめただけなので、何が王道か分かりませんが・・・）
とは言え簡単にできたのでメモっておきます。

１．プラグインのページを表示させる

プラグインの一覧ページを表示させます。

２．WP Multibyte Patchを見つけ出す

このプラグインは、恐らく最初からインストールされているはずなので、削除していない限り表示されているはずです。

３．プラグインを編集する

プラグインの【編集】をクリックします。

４．中身をちょっとだけいじる

【 ‘excerpt_mblength’ => 110, 】とう部分があります。この 110 という数字の部分を変えれば、抜粋記事に表示される文字の数が変わるみたいです。
ぼくの場合は 2 倍の 220 にしてみました。
```
<?php
/*
Plugin Name: WP Multibyte Patch
Description: Multibyte functionality enhancement for the WordPress Japanese package.
Version: 2.3.1
Plugin URI: http://eastcoder.com/code/wp-multibyte-patch/
Author: Seisuke Kuraishi
Author URI: http://tinybit.co.jp/
License: GPLv2
Text Domain: wp-multibyte-patch
Domain Path: /languages
*/
/**
 * Multibyte functionality enhancement for the WordPress Japanese package.
 *
 * @package WP_Multibyte_Patch
 * @version 2.3.1
 * @author Seisuke Kuraishi <210pura@gmail.com>
 * @copyright Copyright (c) 2015 Seisuke Kuraishi, Tinybit Inc.
 * @license http://opensource.org/licenses/gpl-2.0.php GPLv2
 * @link http://eastcoder.com/code/wp-multibyte-patch/
 */
/**
 * @package WP_Multibyte_Patch
 */
class multibyte_patch {
	// Do not edit this section. Use wpmp-config.php instead.
	var $conf = array(
		'excerpt_mblength' => 110, /* ここの値を変更します */
		'excerpt_more' => ' [&hellip;]',
		'comment_excerpt_mblength' => 40,
		'dashboard_recent_drafts_mblength' => 40,
		'patch_wp_mail' => false,
		'patch_incoming_trackback' => false,
		'patch_incoming_pingback' => false,
		'patch_wp_trim_excerpt' => true,
		'patch_wp_trim_words' => false,
		'patch_get_comment_excerpt' => true,
		'patch_dashboard_recent_drafts' => true,
		'patch_process_search_terms' => false,
		'patch_admin_custom_css' => false,
		'patch_wplink_js' => true,
		'patch_word_count_js' => true,
		'patch_force_character_count' => false,
		'patch_force_twentytwelve_open_sans_off' => false,
		'patch_force_twentythirteen_google_fonts_off' => false,
		'patch_force_twentyfourteen_google_fonts_off' => false,
		'patch_force_twentyfifteen_google_fonts_off' => false,
		'patch_sanitize_file_name' => true,
		'patch_bp_create_excerpt' => false,
		'bp_excerpt_mblength' => 110,
		'bp_excerpt_more' => ' [&hellip;]'
	);
```
５．表示を確認する

表示を確認してみると、抜粋記事の文字数が増えていました。

先ほどの画像と比べると、ボリュームのアップを感じて頂けるかと思います。

アイキャッチ（サムネイル）も表示させてみたい

どうせなら抜粋記事にサムネイル画像も表示させようかと思ってワードプレスの投稿画面に最初から備わっている【アイキャッチ画像】を設定してみました。
きっとここに画像を挿入すれば、サムネイルが表示されるに違いない・・・。
が、思うようにサムネイル画像は表示されませんでした。しかもそれだけにとどまらず、個別記事を表示させようと記事タイトルをクリックすると、背景だけのまっさらな画面になってしまっていました。
というわけでつまずいています。ググってもいまいちピンと来ていないので、分かったらまたメモしたいと思います。

またアイキャッチ画像の設定ができました。別途記事をアップしてまとめていますので、必要な方はご参考くださいませ。

WordPressの記事一覧にアイキャッチを表示させてみた（＋αで個別記事にも）
2012年4月5日