実技２回目
前回、実技１で吹き出しとボックス（囲み枠）の使い方を、
説明しました。両方とも使えることは使えます。
現に吹き出しはその後の記事で何度も使いました。重宝します。
しかし、ボックスをエディターにコピペする方法は、
正直めんどくさい。
そこで、同じ効果を得るためにCSSとかタグを使った方法を模索したい。
私には一挙に難易度が上がった感じですが頑張ります。
記事中に囲み枠を作るのはCSSの方が正道？
WordPressを使いこなすためにはHTMLとかCSSとかが
分かっている方が良いに決まってます。しかし敷居が少し高い。
でも、今回はボックス（囲み枠）を作ると言うたった一つの
目的だから何とかできるのでは？
まず参考になるサイトを探しました。
見つけました。おしゃれボックスデザイン云々というサイト。
記事最後にリンクを張っておきます。
このサイトでは、HTMLコードとCSSコード両方を示してくれてます。
有難いです。
ここからが私の作業です。
まず最初の取り組みは、CSSコードをコピペすること。
どこにコピペするかというと、WordPressダッシュボードの
WordPressへようこそ！の中に サイトをカスタマイズ という
ボタンがありますのでクリック。出てきたページの左側の一番下。
ここに「追加CSS」という項目があるのでクリック。
説明文がありますが、下にスクロールしますと、
コード貼り付け用のエディターが出てきます。ここです。
（注：CSSのエディターは、外観の中のテーマエディターにもありますが、
慣れないうちは触らない方が良いです。だから追加CSSを使います。）
追加CSSは、simplicityテーマにはちゃんとありますが、ないテーマもあるかも。
その場合はCSSに慣れるまでこの作業はしない方が良いかもしれません。
参考サイトから、
・角丸ボックス
・背景塗りつぶし
・破線のボックス
・考えごと風
・枠の途中にタイトル
の５つを選びました、取り敢えず。
それぞれのCSSコードがある部分を正確にコピーし、
追加CSSに順番に貼り付けていきました。
これでCSSの部分はOK。
作業効率化のためクイックタグを作ります
参考サイトには、HTMLのコードもあります。
これをエディターにコピペするのじゃ、前回とあまり変わりません。
なので使い勝手を一層よくするために、クイックタグを
作ろうと思います。
まず準備するのは、AddQuicktagというプラグインを
インストールし、有効化すること。ここまでは誰でもできますね。
有効化すると、左側のメニューの下の方にある「設定」の中に、
下の方に「AddQuicktag」というのがでてくるので、クリック。
クイックタグの追加と削除という所に飛びます。
ここからが作業です。参考サイトから選んだボックス５つを、
順番にタグを作っていきます。
クイックタグの追加と削除のところで、入力しないといけないのは、
ボタン名、開始タグ、終了タグそしてそして一番右端のチェックボックスを
チェックすること。アイコンとかは選択するかどうかを含めお好みです。
１番目の例だと、ボタン名を角丸ボックス、開始タグを
<div class=”box2″>、終了タグを</div>、そして右端のチェックボックスを
チェックです。開始タグと終了タグは参考サイトのHTMLコードの最初と
最後をコピペするのが良いでしょう。そして変更を保存ボタンをクリックします。
２から４まで同じ作業をします。
５だけは違います。開始タグが、
<div class=”box26″> <span class=”box-title”>、
終了タグが</span> </div>と２つの<>をコピペします。
日本語の全角部分はいりません。<p>の部分はつければ目印になるかも。
５は少々難しいかもしれませんので、付けない方が良いかもしれません。
まあ、でもこれで準備は完了です。
出来栄えを確認
出来栄えを試すために新規投稿を開きます。
エディターの上の方に色々なショートカットキーのボタンが並んでいますが、
一番最後にQuicktagというプルダウンメニューが新たについているはず。
その中に先ほど入力したボタン名が並んでいるはずです。
確認出来たら、囲いたい言葉を選んでカーソル反転させ、そのままで
Quicktagからボックス種類を選んでクリックします。
ビジュアルエディターの場合、何の変化もありませんから、
テキストエディターを見て確認してください。
面倒なのは5番目です。タイトルが<span class=”box-title”>、
タイトル</span> 、囲みたい文章が</span>文章 </div>という
位置にないと上手くいきません。そうなっていない場合は、切り取って
正しい位置に貼り付けるようにしましょう。５番だけは
スマートにできません。別のやり方があるのかもしれませんが、
それは多分、中上級者向けでしょうから今回はパスです。
実際にやってみたのが以下のものです。
投稿公開の前にプレビューで確認は必要です。
私の場合は上手くいきました。
しかし、初心者の私には意外と大変でしたが、これで１歩進みました。
★【CSS】おしゃれなボックスデザイン（囲み枠）のサイトはここ
Addquicktagの部分は視覚の方がスンナリ理解できるかもしれませんので
別の人のですが、YouTubeの動画を貼り付けておきます。