ブログの記事を書く時に便利なChrome拡張機能を紹介します!

ブログの記事を書いていてリンクを貼る時ってみなさんどうしていますか?

自分は今までページのタイトルは、右クリック → ページのソースを表示 → <title>タグからコピー、URLはブラウザのアドレス部分からコピーして、WordPress にそれぞれ貼り付けてリンクを作成していたのですが、この作業を右クリックのメニューから一発でできるようになる便利な Chrome 拡張機能を発見したので、紹介させてもらいます

Lightning Blog Tools / 作者の解説ページ

 

Chrome上で右クリックしたところ

Lightning Blog Tools を Chrome にインストールしてから、Chrome 上で右クリックしてメニューを開くと、ライトニングツールという欄が出てくるので、そこでHTMLリンクという項目を選択すると、クリップボードに以下のタグがコピーされます(使うときはキーボードの Ctrl + V を押すか、右クリックで貼り付けを選びましょう)

<a href="https://gameusers.org/dev/blog/" target="_blank">Game Users 開発ノート – 一緒に開発しよう!</a>

なんとタグ付きで今見ているページのリンクがコピーされるのです。今までいちいち面倒なことをしてリンクを作成していたのが、一瞬で終わるこの便利さ!リンクは不要でページのタイトルだけ取得したい場合は、サイトタイトル抽出を選ぶとタイトルだけが取得されます。

さらに踏み込んだ使い方


右クリック > ライトニングツール > Options を選ぶと、画像のページが開きます。

難しそうに見えますが、慣れればすごく便利な設定が行えます。テキスト引用、HTMLリンク、サイトタイトル抽出は元から入っている設定で、<strong>赤色は自作した機能です。

 

自作した<strong>赤色を使ってみる

画像のように文字を選択してから、右クリック > ライトニングツール > <strong> を選ぶと、以下の内容がクリップボードにコピーされます。

<strong style="color: #ff0000;">Game Users Share Buttons</strong>

strong タグは文字を強調するときに使うタグなのですが、選択した文字が strong タグに囲まれてコピーされました。このように設定したタグを自在に扱うことができるようになります。

 

<pre>コード入力用

このブログではプログラム関係のコードを掲載することが多いので、黒色の <pre> タグをよく使っているのですが、Lightning Blog Tools で設定を行っているので、記事の投稿フォームで右クリックから簡単に貼れるようになっています。

<pre style="color: #ffffff; background-color: #000000;"></pre>

Options のページにコード挿入という欄がありますので、独自のコードを貼り付けたいときはここで設定を行いましょう。

タグ挿入コード挿入は予め設定しておいたコードを右クリックから簡単に貼り付けることができる機能です。

ブログの記事を書いているときに頻繁に利用するタグがある場合は、予め Lightning Blog Tools で設定しておくと、右クリックから簡単に貼り付けることができるようになってとても便利です。

最後に


プログラム関係の知識がない方には、ちょっと難しく感じるかもしれませんが、慣れれば誰でもできるようになりますので、ブログを持っている方はぜひ活用してみてください。

記事作成の時間が短縮できるのですごくいいですよ!