ブログを執筆していると、以下のようなボタンにリンクを設定して設置したいという時があると思います。実際に会っている方もいるでしょう。
ですが、ボタンリンクを設置するというのはなかなか面倒であり、本格的なものを作るとなるとHTMLやCSSの知識が必要になってきます。
Webのフロントエンド開発経験・知識がある方ならカンタンなことですが、ブログをやるためにHTML・CSSを一から勉強していて理解してるという方はほとんどいないでしょう。実際問題、そんな知識なくてもハイクオリティなブログを書くことは可能です。
そういった方に便利なのが「GetTabInfo」というChrome拡張機能。「GetTabInfo」を使えば簡単に閲覧しているページのリンクボタンを作成することができます。
GetTabInfoの使い方
GetTabInfoはChromeウェブストアから入手できます。
テンプレートの作成
「GetTabInfo」を使うには事前にリンクボタンのテンプレートを設定する必要があります。
まずは「GetTabInfo」のアイコンをクリックしてテンプレート設定画面を開きましょう。
「Header・Templete・Footer」3つの項目があるので、そちらにリンクボタンのテンプレートを入力していきます。Header・Footerはオプションなので空白でも問題ありません。
今回はシンプルに「閲覧しているページのURLのリンクテキスト」を作成してみましょう。以下のコードを「Templete」の欄に貼り付けてみてください。
<a href="%%URL%%"> %%TITLE%% </a>
こちらのコードを貼り付けると、Preview欄に現在開いているタブのリンクテキスト(aタグ)が生成されているはずです。
Templete欄では4つのテンプレートタグを利用することができ、テンプレートタグを利用すると自動的にURLやページタイトルを補完してくれます。
| テンプレートタグ | 取得される情報 |
|---|---|
| %%TITLE%% | タイトル |
| %%URL%% | URL |
| %%sURL%% | Google Url Shortenerで短縮されたURL |
| %%QR%% | Google Chart APIでQRコード化されたURL |
「%%sURL%%」を使えば自動的にgoo.gl短縮リンクに置き換えることができたのですが、現在はgoo.gl短縮URLサービスが終了しているため使うことができません。
ですのでテンプレートでも「%%sURL%%」を使わないようにしてください。基本的にはページタイトル取得用の「%%TITLE%%」とページURL取得用の「%%URL%%」さえ覚えておけば大丈夫です。
作成したテンプレートの保存は[Save]をクリックして名前を付けて保存するようにしましょう。
これで、GetTabInfoのウィンドウを開くだけで作成したテンプレートに沿ったリンクボタン・リンクテキストが生成されます。
テンプレートは自由に作成できるので、ブログ内で使用しているclassやstyle属性を適用したり、リンクテキストをulタグとliタグで囲んでカンタンにリスト化することもできます。
リンク作成効率化に便利
テンプレートの設定さえしてしまえば現在閲覧しているページのリンクボタンを簡単に作成することができるため、HTML・CSSを理解している方にも便利です。
記事ごとに必ずページ内リンクを2～3個作成・設置しているという方だとかなり作業を効率化出来るので、うまく使いこなせれば非常に便利な拡張機能となるでしょう。
筆者も当ブログ(Acceliv)でリンクを設置する際によく使用しています。リンク設置時間を短縮することでより多くの時間を本文執筆に割くことができるので、ブロガーの方はぜひ利用してみてください。