これは、Wordpressテーマ『JIN』を使ったデモサイトです。
このサイトは解答用の見本なので、これを基に別タブや別サイトを開くなどして以下の文章や変更を施してください。
この記事では、『ＷＰ（ワードプレス）ドリル』例題１の作り方や、作っていく際にミスしやすいポイントなどを画像も交えながら書いていこうと思います。
文章や画像等は、
鷲（ワシ）鷹（タカ）鳶（トンビ）隼（ハヤブサ）の違いって知ってる？ より引用しています。
―――――――――――――――――――――――――――――――――――――――――
Contents
これより解説
解説：リンクの挿入
鷲（ワシ）鷹（タカ）鳶（トンビ）隼（ハヤブサ）の違いって知ってる？
このリンクですが、このようなリンクを挿入するには、編集画面上部の「リンクの挿入／編集」をクリックします。
そうすると、「URLをペーストまたは入力して検索」と出てくるので、右の歯車マーク＝設定 を押します。
「リンクの挿入／編集」の画面（3つ並んでいる右側）で、リンクで飛ばしたいあらかじめコピーしておいたURLを貼り付けます。
「リンクを新しいタブで開く」にチェックを入れると、そのページだけの新しいタブが開くので個人的にはチェックを入れるのをおススメします。
開く前はタブの数が3つだが…
新しいタブで開くと、タブが１つ増えている。なお、「リンクの挿入／編集」画面で「リンク文字列」に文字を入れると、このように
任意の文字を入れることができます。
元のアドレスが長い時などは、こちらを使ったほうが便利かもしれません。
ポイント
『大きい方が鷲（ワシ）、小さい方が鷹（タカ）の違いで判別して呼びます。』の色の変更は、範囲選択後、編集画面上部の「A」ボタンを押します。その後好きな色で装飾します。
練習用なので、何色でも良いですが、見本では赤（Red）を使用しています。
太字にするには、範囲を選択して、同じく画面上部の「B」ボタンを押します。WordやExcelと同じですね。
Bを押して、太字。 Aを押して、色選び。 Wordと同じですね。
Aの横の▼マークから好きな色を選ぶ！ さて、下線を引くのはどうするか…画像の下にも文字で書きましたが、（このような文字のことを『キャプション』と言います）下線を引くのはどうするか？Word等には「U」のボタンがありますが、Wordpressには標準ではついていません。なので、範囲を選択した後、『コントロールキー＋Uボタン』で線が引けます。
実は、Wordでも、同じやり方でも線がひけます。Wordpressにボタンがないだけなのですが、慌てずに『コントロールキー＋Uボタン』です。
ポイント2 アイコンボックスを使用する
解説：任意のショートコード使用
続いて、『このサイトのテーマが、『JIN』＝隼（ハヤブサ）を意味するので、…』の文章。
記事を書く時には、所々でこのように、枠で囲ってあげたりすると、文章だけよりもオシャレになったり、ポイントのような箇所を目立たせたり…。と記事にメリハリをつけることができます。
今回は、『jin-iconbox16』というものを使っています。
これは、編集画面上部の、ショートコード→アイコンボックス→「旗」でも行けますし、
JINマニュアルサイトの中にある『ショートコード一覧』の記事からコードをコピーしても表示可能です。※
ショートコード一覧 JIN MANUAL
画面の「アイコンボックス」の一覧の三角マークから、好きなものを選ぶ。
隼（ハヤブサ）について
出典：umdash9 / iStock. by Getty Images
体長約35～50cmとタカ目の中でも最も小型に位置づけられていた隼（ハヤブサ）。日本ではシロハヤブサやチゴハヤブサが知られています。
しかし、日本鳥学会は2012年に隼を猛禽類からインコやスズメの仲間へと分類変更しています。
タカよりインコ、スズメに近いとの決断です。
ハト大のチゴハヤブサ。たしかにインコにみえなくもない…？
出典：PIXTA
解説：画像挿入（アイキャッチ画像）のやり方
記事には、先ほども書いたように、文章を枠で囲って装飾する以外にも、記事中に画像や写真。それに吹き出しなどもあると、より文章がはなやかになります。
画像を挿入するには、編集画面上部の『メディアを追加』ボタンから入ります。
その後ボタンを押すと、このような画面に変わるので、
新しく写真をアップする場合は、「ファイルをアップロード」。すでに別記事等でアップした写真をもう一度使いたい場合などには、「メディアライブラリ」の中から探します。
「ファイルをアップロード」を押した場合、「エクスプローラー（ファイル・フォルダ）」マークをクリックした時と同じ画面になるので、デスクトップやドキュメントなどからアップしたい写真を探します。
ファイルをアップロード→ファイルを選択を押すと…
今使っているパソコンのフォルダ（ドキュメント・デスクトップとか。画面はピクチャ）が表示される。アイキャッチ画像を追加する場合は、
編集画面右下の「アイキャッチ画像を設定」をクリックします。
その後は、画像を追加するのと変わりません。
すでにアイキャッチ画像が設定されている場合は、 「アイキャッチ画像を削除」に表示が変わっています。解説：吹き出しの使い方
吹き出しの使い方は、サイトのテーマ（このサイトは『JIN』を使っています）によって変わるので、自分が使っているテーマのマニュアルサイトを確認して、それに沿ってやっていきます。
このサイトでは、JINを使っているので、このリンクをクリックするか、
JIN 吹き出しの使い方
編集画面上部の黒いバーにある「JINマニュアル」から検索ワード「吹き出し」と検索すれば、やり方がでてきます。
なので、ここではマニュアルなどでは省略されがちな、ちょっとしたイージーミスを私の体験談に基づき、画像付きで紹介します。
よくあるミス1：ビジュアルエディターに直接入力
JINマニュアルに沿って進めていく過程で、「吹き出しのコードを設置」という項目で、吹き出しのコードの基本形をいれていくのですが、コードをビジュアルエディターの状態でそのまま設置してしまうと、このようにきちんと表示されません。なのでコードを貼り付ける際は、「ビジュアル」ではなく、「テキスト」エディターの方で貼り付けましょう。
とはいえ、字が細かく分かりづらいので、先に「ビジュアル」でコードを貼り付ける付近の文章を選択してから、「テキスト」に切り替えるとわかりやすいです。
先に「ビジュアルエディター」で近くを選択してから～
「テキストエディター」に切り替えると、範囲選択も反映されているので、分かりやすい。
サイトの編集画面や、プレビュー画面など。 ”見たまんま”に近いのが「ビジュアル」
字ばっっかり並んでいるのが「テキスト」。…見にくい WordPressやってて最初の壁。ボチボチ目を慣らしましょう。↑表示がみだれている。
※分かりやすいよう、青枠でかこんでいます。
きちんと表示されました～
よくあるミス2：不必要な空白（スペース）＆必要な空白を消してしまった
失敗した時の例は青枠で囲んだ通りなのですが、よくある失敗例として、
①吹き出しのコードの打ち間違いがある
②本来必要な空白を消してしまったり、余分に空白を入れすぎてしまった この2つが多いです。
よくあるミス１のところで、吹き出しのコードは、ビジュアルではなく、テキストエディターで と書きました。実際に吹き出しのコードを貼り付けるとこのようになります。
これが無事成功しているときのコードです。
マニュアルに従って、吹き出しの配置の左右（left・right）や、吹き出しの色（組み合わせ例：none・blue/red・none)など好みのものに変えていくのですが、特に間違いやすいのが「キャラクターの画像情報を入力」の部分。
例えばたびたび登場してもらっている、”かざみ”ちゃん。彼の画像情報は、
色が変わっている『”かざみわし.jpg”』の部分です。
なお、この『かざみわし』の部分は、「画像を名前をつけて保存」の時に任意の名前に変更可能です。
あまり長いものにしてしまうと、自分でも分かりづらくなるだけでなく、吹き出しのコードとして表示させたときに、細かい字がズラーッと並んで困惑するので、そういう意味でも名前はコンパクトに。分かりやすいものがベストです。
では、同じものを使ってわざと失敗してみます。よくあるのが、例えば
吹き出しの位置を最初は左（left)にしていたけど、後から右にしたくなって、rightに変えているときに…
「left」から「right」にかえるだけのつもりが、うっかり、alignや ” とborderのbの前に本来必要なはずのスペースまで消してしまった。というパターン。
そのため、文字では「right」＝右になっているのに、表示させると、左にきています。
こういうときは、落ち着いて、青の↑で書かれている箇所に半角スペースを入れます。そうすると、
元通り。きちんと右に表示されていますね。
この際大事なのが、半角スペースという点で、間違って全角でスペースを入れても失敗して表示されてしまいます。
今回は失敗例として、「align」や ” と「border」のところに必要なスペースをあえて消してみましたが、ほかの箇所も同様です。
少し慣れてくると、不要なスペースを消すことに意識が行き過ぎて、「chat face」のtとfの間のスペースも気になって、消してしまって変になったり。というのもあるあるです。
後は「left」から「right」に変えるとき、そのまま「”」ダブルコロンの片方も消してしまったり…。etc
これは吹き出しに限らずですが、アイコンボックスやその他のショートコードを入れる際は、ビジュアルではなく、テキストエディタで。スペースは半角。というのを心がけているとミスしにくいです。
最悪わけが分からなくなった場合には、正しいコードをコピーし直し、もう一度やり直してみるのも一つです。
他にも色々出てくると思いますが、失敗しながらボチボチ慣れていきましょう！
解説：動画挿入のやり方
この解説記事もこれで最後。最後は、動画挿入のしかたをご紹介します。
動画を記事の中に挿入するには、挿入したい動画を探して、「共有」ボタンを押します。
その後、コピーを押します。
コピーしたら、後は、貼り付けたい場所に「テキスト」エディターで貼り付けます。
テキストエディタにお目当ての動画のアドレスが貼り付けられていれば成功！ ビジュアルモードに戻して、きちんと反映されているか確認してみましょう。このように動画が出ていれば成功です。
※特定の位置から動画を再生させたい場合は…
この「ハヤブサの鳴き声」動画ではあまり必要ないかもしれませんが、例えば曲のサビ前～など。特定の場所から再生させたい！という場合も出てくると思います。そんな時は…
予め、動画のバーを任意の場所まで移動させておいてから、動画を共有して、アドレスをコピーするのですが。
この画面で、「開始位置」のところに注目。
比較。開始位置0:01
比較。開始位置1:00細かい微調整は手動入力でも可能です。
先ほどは、開始位置が「0:01」でしたが、ひと手間くわえると、「1:00」に変化しています。
まとめ
ここまでお疲れ様でした。
以上で、解答の解説記事を終わります。
今回紹介した、
・アイコンボックス（ボックス）
・吹き出し
・画像やアイキャッチ画像の挿入
・動画の挿入
といったものは、記事を作ったり、更新したりする際のよく使う機能です。
他にも色々ありますが、この4つがマスターできれば、どのテーマでも、ある程度の目を引く記事を作れることでしょう。
テーマを変えても、基本的な操作は変わりませんが、吹き出しやボックス挿入の仕方は微妙にテーマごとに異なっているので、このサイトだけでなく、ほかのサイト（テーマ）でも練習問題を作っていく予定です。
様々なテーマや、様々なサイトに見て・触れていくことが、私たちのWordpressライフをより豊かにしてくれます。
