最新版エディタの編集パレットに囲み枠ボタンを設置する方法・・・オチあり。

こんにちは。
『やさしいブログの作り方』の松田です。

仕事のブログをされている方であれば、ほぼ確実に使うであろう装飾が囲み枠です。



この枠の作り方・使い方はいろんな方法がありますが、今日は最新版エディタを使った、ちょっと裏技的な方法をご紹介します。＾＾


まず下準備として、囲み枠を表示するためのＣＳＳを記述します。

ＣＳＳ編集用デザインを使われている方は、以下の記述をＣＳＳ編集スペースの一番最後に追記して下さい。



ＣＳＳ編集用デザイン以外のデザインスキンを使っている方は、サイドバーのフリースペースの最後に以下の記述を追記して下さい。



設定はこれで完了です。＾＾

では、実際に使ってみましょう。




最新版の記事編集エディタで、枠で囲みたい部分をマウスで反転させて引用のボタン　“　をクリックします。




範囲指定した文章の左側に縦棒が出てくればＯＫです。




プレビューで確認すると、この通り。＾＾


簡単に説明すると、この引用のボタンは<blockquote>というタグが発行される仕様になっていて、通常は範囲指定した文章の左側に縦棒が出てくるように設定されています。

それをＣＳＳを追記することで、青の囲み枠が表示されるようにすることで、引用ボタンを押すだけで囲み枠が表示されるようになる、という仕掛けです。

つまり、引用ボタンを囲み枠ボタンとして代用するわけです。


色を変更したい場合は、サンプルの#0000ffが枠の線の色、#fcfcffが枠内の背景の色を指定していますので、好みのカラーコードに変更して下さい。

引用ボタンを囲み枠ボタンに代用するこの方法は、枠は１種類しか設定できないので、一番良く使うパターンを登録しておくとよいですね。＾＾



・・・と、ここまで書いてきて気がついた。
これ、スマホ版には適用されないじゃないかーーー。（涙）

ということで、パソコン版で見た場合のみ囲み枠が表示される、という方法でした。＾＾；


最後までお読みいただきありがとうございました。