HTMLのコードをブログの記事に載せる方法

ららです。
　

こんなご質問をいただきました。

　

どれのことかって？
これのコトです。

　

これは、数日前に書いたこの記事の中の
一部です。
　

この四角い部分を表示させるには、
２つのポイントがあります。

 

ポイントその１：codeタグを使う

表示させたいテキストの前後を、
<code>　～　</code>
で囲みます。
　

こんな感じ。

　

これはcodeタグといって、
この範囲がコードであることを示すタグなんだそうです。
（今回調べて初めて知りました）
　

(・o・)　は？知らずに使っていたの？？
と思いますよね。
　

実はそうなんです。
記事投稿画面のココにボタンがあるのでね、
試してみたら便利なので、使ってたんですよ～　（;´▽｀A“

　

このボタンの並びは、私のカスタマイズなので、
あなたの場合は違うかもしれませんが、
code　というボタンは、最初からついてましたよ。

 

(・o・)　よしっ、じゃあさっそく使うぞ！
と、このページを閉じそうになったあなた、ちょっと待ってください。
　

私と同じような結果になるかどうかは、
わかりませんよ。
　

　

なぜかというと、
codeタグそのものには、
四角で囲ったり、グレーに網掛けしたり
そういう働きはないんです。
　

テンプレートの中で定義されているんですよ、たぶん。
　

なので、
エフィシエントを使っているあなたは、
私と同じ結果になりますが、
それ以外のテンプレの場合は、ならないかもしれません。
　

では、どうやって設定すればいいのか？
それは私も知りたいところなので、
今後の課題にさせてくださいませ。
　

はい、これがポイントその１でした。
続いて、ポイントその２です。

 

ポイントその２：<　と　>　は、そのまま書いちゃイケナイ

たとえば、

<strong>aaa</strong>

と記事に書いて、
ブログを表示させるとどうなるでしょう？
　

aaa
と表示されますよね。
当たり前ですね。
　

だから、

<strong>aaa</strong>
↑このように表示させたいからといって、
　

<code><strong>aaa</strong></code>
と書いても、
　

aaa
としか表示されないんです。

 

 

ややこしいですね＾＾；
　

とにかく、
<　と　>　は、そのまま書いちゃイケナイんです。
　

偶然表示されたとしても、
ブログが崩れる原因になりますから、
絶対書いちゃだめです～。
昔こんな失敗しました　→　昔の記事

 

じゃあどうやって書くのか？
それは、こうやって書きます。
　

<　　→　　＆ｌｔ；　　
>　　→　　＆ｇｔ；
今は全角で書いてますが、半角で書いてくださいね。

 

なので、冒頭の記事は、
こんなふうに書いてます。

　

うわぁ～、頭イタイですね。
ぐちゃぐちゃの文字の羅列にしか見えません　（;´▽｀A“
でも仕方ないです。
<　と　>　を、辞書登録しておくと便利ですよ＾＾
　

私は、全角で＜と入力して変換すると、
＆ｌｔ；と出るように設定してます。
　

はい、これがポイント２でした。

 

エフィシエントで、同様の機能のタグ

これもエフィシエント限定なんですが、
同じような機能のタグがあります。
　

b-quote　タグ（ボタンがあります）と、
summary　タグです。
　

summaryタグとは、文章の前後を
<div class=”summary”>　～～　</div>
で囲みます。
　

私は、記事の書き出しによく使います。
moreタグで、記事を折りたたんだときに、
とっても見栄えがよくなります。

 

 

以上です。
ぜひ、チャレンジしてみてくださいね。
　

わからないことや疑問に思ったことなど、
どんな些細なことでもお寄せください。
このように、記事にさせていただきます＾＾
→　さっそく疑問を送ってみる