ブログを書いていると
リンクを張ったり文字にマーカーつけたり、
いろいろ装飾することも多いですよね。
元々HTMLに詳しくない私ですので、
以前は、記事のタイトルの大きさを
変更するために四苦八苦し、
何とか大きさを変えることができました。
★「cocoon（コクーン）」で記事タイトルの大きさを変える方法（ＰＣ）★
今回もまた、
任意のテキストや段落範囲をボックスで
囲む方法で少しだけ苦戦したので、
簡単に囲む方法を書いておこうと思います。
ビジュアルエディターとテキストエディター
ビジュアルエディターとテキストエディターで
設定する方法があるので、
まず、エディターの説明を超簡単にしますね。
WordPressの記事編集画面で記事を書くとき
右上に「ビジュアル」「テキスト」
の切り替えがあると思います。
①がビジュアルエディターで
②がテキストエディターです。
①ビジュアルエディター
編集画面で設定した書式などがそのままエディタ上で反映されるもので、実際にどのように表示されるのかを確認できます。
②テキストエディター
文章や直接HTMLタグを記述することにより書式などを設定していくもので、実際にどのように表示されるのかは編集画面では確認できません。
どちらで書いても同じなので使いやすいほうを
選択し使用すると良いと思います。
私は普段はビジュアルエディターで
書いていますね。
ビジュアルエディターを使った方法
ボックスで囲みたい範囲の上下を改行しておき
選択範囲に含めます。
（＊矢印部分が改行部分です）
↓
囲みたいボックスタイプを選択します。
（＊スタイルタブで選択します）
ボックスが上記のように分割されますので
そのまま矢印部分を削除します。
↓
これで完了ですね。
条件が良いときはときは一瞬です～。
[affi id=5] [affi id=20]
テキストエディターで設定する方法
まず、ビジュアルエディターモードで
ボックスで囲みたい部分を選択します
（＊範囲選択時はビジュアルエディターです）
↓
そのままスタイルタブで囲みたい
ボックスタイプを選択します。
（＊スタイルタブで選択します）
そうすると以下のように
ボックスが分割されて表示されます。
↓
この状態で
右上からテキストエディターモードを選択し
切り替えます。
すると
以下の画面のようにテキストとタグ表示に
なるので、四角部分を削除します。
考え方としては、
最初の <div～～> 部分と
最後の </div> を残します。
↓
こんな感じになります。
はあってもそのままでよいです。
そして右上から
再びビジュアルエディターモードを
選択し切り替えます。
↓
これで完了です。
どちらでもやっても簡単にできますが、
ビジュアルエディターでやると文章の段落や
改行によっては狙い通りにいかないときも
あるとおもいますので、
うまくいかないときはテキストエディター
での設定方法がおすすめですね。
それでは～。
