アサブロのエディタ画面でhtmlの編集をしてみる2013年03月09日 22:48

アサブロのエディタは、シンプルで良いけどシンプルすぎて、、、
出来れば、
 文字の色もとかだけじゃなくて、、、緑の文字 とか、

 さらに太字にしてみたり、、、、、、、、緑の文字

 文字のバックに色つけたり、、、 緑の文字  とか、

と言うのができたらいいなぁと思い、Wordからコピペしたら、アッサリ出来ました。
が、フォントが指定されたり、サイズが指定されたり、と、不要な『style』情報がたくさん付いて来てしまうようです。

そこで、 Internet Explorer 9 では出来なかったけれど、無料ブラウザで有名な、Firefox でエディタ画面を開き、要素を調査で書き換えてみると、そのまま反映されました。

やり方をちょっとメモっておこうと思います。


1. エディタをFirefoxで開く
 エディタで新規作成を使って、Firefoxでエディタを開きます。
1エディタで新規作成


2. HTMLを表示させる
 エディタ画面で右クリックし、ポップアップメニューの要素を調査(Q)を選択します。
 下にツールバーが出てくるのでマークアップパネル (Alt+M) をクリックし、
 HTMLを表示させます。
2htmlを表示させる


3. 文字列に span タグをつける
 ツールボックスの  B  F  F  のどれかを使い、
 加工したい文字に『span タグ』をつけます。
3文字加工


4. 要素を選択する
 HTMLの該当箇所(=要素)を見つけます。
4要素を選択


5. span タグの style を書き換える
5spanタグ書き換え
 ※)カラーチャート参考ページ:GOODSEARCH, ColorHexa

例1) 緑の文字
<span class="asahi_editor_styling" style="color: rgb(0,128,0);">緑の文字</span>

例2) 緑の文字
<span class="asahi_editor_styling" style="font-weight: bold; color: rgb(0, 128, 0);">緑の文字</span>

例3)  緑の文字  (上図では、緑の文字から 緑の文字 に書き換えています)
<span class="asahi_editor_styling" style="font-weight: bold; color:white; background:green;"> 緑の文字 </span>


6. 補足
 class="asahi_editor_styling"をつけたままにしておくと、、、?
 ツールボックスのクリアボタンで文字の装飾をクリアすることができます。



関連記事 -------------------------

ちょこっとカスタマイズ-フォント
ちょこっとカスタマイズ-ファビコン

コメント

コメントをどうぞ

※メールアドレスとURLの入力は必須ではありません。 入力されたメールアドレスは記事に反映されず、ブログの管理者のみが参照できます。

※なお、送られたコメントはブログの管理者が確認するまで公開されません。

名前:
メールアドレス:
URL:
コメント:

トラックバック