はてなブログ編集用のChrome拡張機能を作りました（使い方の説明）

見たままモードの編集を補完するChrome拡張

はてなブログでブログを書くときに「見たままモード」を利用している人が多いかと思います。

ということで、「見たままモード」での記事編集を補完するGoogle Chromeの拡張機能を作ってみました。

このChrome拡張のインストール方法と使い方を説明していきます。

Chrome拡張のインストール方法

この拡張機能を使うには、以下のサイトに行って下さい↓↓

Chrome Add-on for Hatena – Chrome ウェブストア

そうすると下のようなページに飛びますので、「Chromeに追加」をクリックしてインストールしてください。

拡張に追加を許可すると、ブラウザの右上にアイコンが出てくると思います。

このアイコンをクリックするとポップアップが出てきますので、ポップアップ内のボタンをクリックしてテキストを編集していきます。

インストールができたら、お次は使い方の説明をしていきます。

この拡張機能でできること

この拡張機能でできることは、「h2タグでの見出し」「目次の挿入」「本日の日付の挿入」「文章の背景をグレーにして強調」「文章・画像の左・中央・右揃え」「テキスト（<p>タグ）にクラスを付与」「書式の初期化」です。もしかしたら今後機能を増やしていくかもしれません。

拡張機能でテキストを編集するには、段落を選択してください。

「目次」と「日付」に関しては、カーソルがある所に挿入されます。

h2での見出し

h2にしたい行を選択して「h2」ボタンを押してください。テーマによってはh2タグにスタイルが記述されていない場合があります。プレビュー画面で確認してみて下さい。

目次入れる

「目次」ボタンを押すと、カーソルの位置に目次が挿入されます。

• 見たままモードの編集を補完するChrome拡張
  • Chrome拡張のインストール方法
  • この拡張機能でできること
• h2での見出し
  • 目次入れる
  • 背景をグレーにして強調
  • テキスト・画像の左・中央・右揃え
  • pタグにクラスの付与
• 使用上の注意点
  • 改行に注意
• 関連記事

背景をグレーにして強調

選択した段落の背景がグレーになって強調されます。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

テキスト・画像の左・中央・右揃え

テキスト左揃え

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

テキスト中央揃え

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

テキスト右揃え

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

pタグにクラスの付与

ポップアップ内の入力ボックスにクラス名を入力して、「Add Class」ボタンをクリックすると、選択されている段落のpタグにクラスが付きます。

例えば、あらかじめ下記のようなCSSを「デザイン」→「カスタマイズ」→「デザインCSS」に記述しておきます。

p.my_style {
border: 1px solid #e869a0;
color: #666;
padding: 10px;
}

そして、この拡張機能で「my_style」というクラスをテキストに付与すれば、簡単にオリジナルのスタイルを適用することができます。

<p>～</p> → <p class=”my_style”> ～ </p>

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

「日付」をクリックすると今日の日付が挿入されます。あまり使いどころがなさそうですが、個人的に欲しかったので入れておきました。

使用上の注意点

改行に注意

この拡張は、下記のような二つ以上の段落をまたいだ編集はできません

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

段落を分けずに改行するには、Shift + Enter を使います。

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

Shift + Enterでの改行は段落が分かれないので、改行してもそのままスタイルが適用されます。

あと、たまに見出しを普通のテキストに初期化してもうまく反映されないことがあります。そんな時は、一度「HTML編集」にして再度「見たままモード」に戻すと反映されます。

これははてなの仕様なので…

とまあ…

挙動にクセがあるのは許して…

使ってみると簡単ですので。

今回作ったChrome拡張の技術的な話はまた改めて記事にしようと思います。といってもそんなに難しくないんですけどね。

チラ、チラ。

欲しい物リスト

関連記事

見たままモードでの編集で使えるTipsを紹介しています。

はてなブログの見たままモードを使いこなそう

見出しのカスタマイズ方法。h2タグにCSSが記述されていないのでしたら、こちらの記事を参考にカスタマイズしてみて下さい。

コピペで簡単！CSSではてなブログの見出しをカスタマイズ！