Bloggerで記事内にコードエディターを設置する方法が、ようやくわかりました。

正直、最初は

「見た目がゴチャっとしそうだな…」

と思っていたのですが、実際に作ってみると意外と良い感じ。

せっかくなので、少しプロっぽさを出したいと思い、
コード表示用のエディター風デザインを自作してみました。

コピーボタンもちゃんと動く

今回作ったエディターには、
ワンクリックでコードをコピーできるボタンを設置しています。

自分でテストしてみましたが、

• スマホ表示：OK
• PC表示：OK
• ボタンの反応：問題なし

と、今のところは安定して動いてくれています。

「コードを紹介する記事を書くなら、やっぱりコピーボタンは必須だな」と改めて実感。

今回作ったコード表示エディター例

実際に使っているコードはこちらです。

<!-- iPhone / iPad ホーム画面用 -->
<link rel="apple-touch-icon" sizes="180x180"
      href="https://あなたの画像URL/apple-touch-icon.png" />

<!-- Android -->
<link rel="icon" type="image/png" sizes="192x192"
      href="https://あなたの画像URL/android-chrome-192x192.png" />

<!-- 通常ファビコン -->
<link rel="icon" type="image/png" sizes="32x32"
      href="https://あなたの画像URL/android-chrome-192x192.png" />
  

※ デザインや動作はCSS・JavaScript側で調整しています。

まだ完成形ではないけれど

正直に言うと、
これで完成！というつもりはありません。

• デザインをもう少し洗練させたい
• スマホでのタップしやすさも改善したい
• 言語別表示（HTML / CSS / JS）もそのうち対応したい

など、気になる点はいくつかあります。

ただ、
「まずは使える状態にする」
という意味では、ひとまず満足。

まとめ

Bloggerでも、
ちょっと工夫するだけでそれなりに“プロっぽい”記事表現はできます。

完璧を目指すより、

• 作る
• 使う
• 気になったら直す

この繰り返しが一番ですね。

また何か改善したら、
この記事も随時アップデートしていこうと思います。