今回ひげしげノートで実際にやってみたブログのカスタマイズを記事にするのに、HTMLタグをただ貼り付けるだけだとうまくいかない事がわかりました。
ひと工夫が必要。
はてなブログ限定の話になりますがまとめておきます。
なにもせずに貼り付けるとうまくいかない
はてなブログで書くとき、PC版だと「編集 見たまま」と「HTML編集」の2つがありますよね。
「編集 みたまま」画面の場合
HTMLタグを貼り付けると空白部分が無くなって改行はされていますが左詰めのコードになってとても読みづらいものになります。
「HTML編集」画面の場合
タグとして認識されてしまうので話になりません。
グローバルメニューが変なところに作られてしまいました。。。
どうすればうまくいくのか
「HTML編集」を使ってやります。
やることは2つです。
コードを変換する
「HTML編集」なので貼り付けるとタグが機能してしまいます。
そこでいくつかの記号を別の文字に書き換える必要があるのです。
例えば
「 < 」「 > 」「 & 」
など。文字実体参照というんだそうですが、それぞれ
「 < 」 → <
「 > 」 → >
「 & 」 → &
のようになります。
これを手動で書き換えていたら大変すぎてカスタマイズ方法を教えてくれる人なんていなくなっていたでしょうね。笑
大変なのでツールを使って一発変換してもらいます。
こちら。
変換したいコードを貼り付けて「変換」ボタンを押すだけ。なんて便利なんだ。
空白もそのままの状態で変換してくれます。
変換したらコピーして、ブログのコード編集画面で貼り付けます。
実は「編集 見たまま」に貼り付けても自動的に文字実体参照をしてくれるんですが空白が反映されず左詰めになってしまうので、このやり方にしています。
preタグを追加する
表示のしかたは色々あるようですが、コードの改行や空白などそのままの状態で表示してくれるpreタグが1番いいと思います。
<pre>
変換したコードをペースト
</pre>
先ほど貼り付けた「HTML編集」画面で、変換したいコードの上下にこのようにpreタグを追加するだけです。
これでコードを形を崩さずキレイに表示させることができます。
さいごに
ブログカスタマイズの記事にしか使わないネタでした。
では！
