こんにちは、トロです。わたし、ブログ初心者なんです。当然ながらWordPress（以下WP）も初めて挑戦しています。レンタルサーバー借りたりWPテーマ買ったり（ストークを奮発！）してるので、ブログ挑戦を投げ出せない状況なんですが一つの記事を書くにも手こずっていて画面の前で悶絶しています。エディタがうまく使えていないようなんです。
WP投稿作成画面 ビジュアルとテキスト
WPの投稿作成画面はビジュアルエディタとテキストエディタがあります。「初心者は書式が反映して投稿イメージが掴みやすいビジュアルエディタがいいよ！」「ビジュアルエディタに依存しちゃうといつまでたってもHTML覚えられないよ？」と相反したレビューがあるので初心者は悩んじゃうわけです。
例えば、字を赤く装飾する場合ビジュアルエディタだと赤字とエディタ上で表現されますが、テキストエディタだと<span style="color: #ff0000;">赤字</span>とHTMLタグが表示されるわけです。
ビジュアルエディタだとショートコードがうまく使えない？
わたしの場合は見た目のイメージが優しかったのでビジュアルエディタから使い始めたのですが、すぐに躓くことになりました。わたしが使っているWPテーマ「ストーク（STORK）」ではショートコードを使って簡単に見栄えのよいブログを作ることができるのが特徴の一つです。例えば…
ショートコードはテキストエディタを使ったほうが確実みたいだよ
上のアイコンが見えない吹き出しなんですが、ビジュアルエディタで見ると
と、こんなふうにアイコンの画像が表示されているんですね（アイコン画像が大きくてビックリしますが）。「なぜ画像は認識できているのにプレビューするとアイコンが見えなくなるんだ？」と、見習いブロガーは泣きそうな顔でPCのモニタを見つめるわけです。原因を探ろうとググってみたり、全然関係ないことがわかっていてもPCの再起動をしてみたり。で、PCをいじくり回しながらふとテキストエディタで同じようにショートコードを使ってみると…
アイコンが表示されているときのコード（テキストエディタで記述）
[voice icon="（画像アドレス）" name="（名前）" type="l fb"]（定型文）[/voice]
となっているんですが、
アイコンが表示されないときのコード（ビジュアルエディタで記述）
[voice icon="<img src="（画像アドレス）" />" name="（名前）" type="l fb"]（定型文）[/voice]
なんかヘンなの（赤字の部分の記述）くっついてるぅ〜！ビジュアルエディタで記述するとHTMLコードが見えないために、「なんかヘンなの」が記述されていることに気付きませんでした。img src=</>は画像を表示するHTMLタグなのですが、ビジュアルエディタで画像アドレスを記述すると自動的にこのHTMLタグがくっついちゃうようなんです。
ビジュアルエディタとテキストエディタの両刀使いが吉
ということで、ビジュアルエディタだけを使っていると困ったときの謎解きができないってお話でした。こんなことがあってから、投稿作成時はビジュアルエディタとテキストエディタを行ったり来たりしています。基本はビジュアルエディタで入力していきながら、プレビューでうまく表示されないときはテキストエディタをチェック、みたいな感じです。
まとめ
人様に見せる文章を書くことすら必死な中で、さらにそれを見栄え良くするのはとても大変ですね。このあたりの話って基礎の基礎みたいでネットで検索してもなかなか答えを見つけることができませんでした。プレビューしてもイメージ通りにならないときはテキストエディタも覗いてHTMLタグもチェックしてみよう！
