2014年3月31日

[拡張機能] 記事紹介の最強ツール! GetTabInfoで使えるテンプレート

gettabinfo-templates-250

こんにちは。効率的なツールをこよなく愛するヨス(@yossense)です。

以前の記事で私の中で最強のGoogle Chrome拡張機能GetTabInfo」を紹介しました。

開いているページのTITLEとかURLを取得してアレコレ出来るものですが、2014年3月26日にアップデートされ、ずっと望んでいた複数のテンプレート保存機能が搭載されました!

ヨス

という訳で、今回は最強になりすぎたGetTabInfoで使えるおすすめのテンプレート(主にブログ書いてる人向き)を紹介します!

GetTabInfoのテンプレート例

では、GetTabInfoで登録できるテンプレートの例を紹介します。使い方とかについてはこちらの記事で詳しく書いています。

ShareHTMLを全タブにかけるテンプレート

ShareHTMLと言う超有名なブックマークレットがあります。

ここで紹介するテンプレートを使うとShareHTMLのタグが、Google Chromeで開いているタブ分一気に取得できます。

ヨス

ShareHTMLでは一つ一つのタブごとに取得しないとダメでしたから、これはすんごいことです!

ShareHTMLが全タブに一瞬で!!
ShareHTMLが全タブに一瞬で!!

GetTabInfo用のコード(内部リンク用)

内部リンク用のコードです。下で紹介している外部リンク用との違いはtarget="_blank"の有無です。



<div class="shareHtmlAll"><a href="%%URL%%"><img class="shareHtmlAll-img" src="http://capture.heartrails.com/150x130/?%%URL%%" alt="%%TITLE%%" width="150" height="130" /></a><p class="shareHtmlAll-title"><a href="%%URL%%">%%TITLE%%</a></p><a href="http://b.hatena.ne.jp/entry/%%URL%%" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/%%URL%%" alt="" class="hatebu"></a></div>

ヨス

最初の2行に空白を入れてあるのは、ループした時に境目が分かりやすくなるためです。

GetTabInfo用のコード(外部リンク用)

外部リンクで「新規ウインドウ」で開くようにしたい場合はこちらのコードをどうぞ。ちなみに<A>タグにクラスを付けていますので、後々に「内部リンク」と「外部リンク」でデザインを変えたいときとかに便利です。



<div class="shareHtmlAll"><a href="%%URL%%" target="_blank" class="exit"><img class="shareHtmlAll-img" src="http://capture.heartrails.com/150x130/?%%URL%%" alt="%%TITLE%%" width="150" height="130" /></a><p class="shareHtmlAll-title"><a href="%%URL%%" target="_blank" class="exit">%%TITLE%%</a></p><a href="http://b.hatena.ne.jp/entry/%%URL%%" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/%%URL%%" alt="" class="hatebu"></a></div>

CSSコード

CSSコード(私が使っているヤツ)もオマケに載せておきます。これを入れているだけで「内部リンク」「外部リンク」両方に使えます。

.shareHtmlAll{ 
    clear : both ;
    width : 75% ;
    height : auto ;
    margin : 1em 0 1em 2em ;
    box-shadow: 0 1px 2px rgba(100, 100, 100, 0.3)inset;
    border: 1px solid #DADADA;
    border-top: 1px solid #757575;
    border-radius: 4px;
    position : relative ;
    zoom : 1 ;
    }
 
.shareHtmlAll-img {
    float : right ;
    }
 
.shareHtmlAll a {
    color : #333 ;
    }
 
.shareHtmlAll a:hover {
    background : #F7F7F7 ;
    }
 
.shareHtmlAll-title {
    font-size : 60% ;
    width : 100% ;
    margin : 0 ;
    }
 
.shareHtmlAll-title a {
    display : block ;
    min-height : 140px ;
    padding : 7% 5% 2% 5% ;
    line-height : 1.5 ;
    font-size : 120% ;
    text-decoration : none ;
    }
 
.shareHtmlAll-title a:before {
    content : "合わせて読みたい" ;
    position : absolute ;
    top : 10% ;
    left : 5% ;
    line-height : 1.2 ;
    font-size : 135% ;
    background : #fc9705 ;
    letter-spacing : 0.2em ;
    color : #fff ;
    font-weight : bold ;
    padding : 1% 0 1% 1% ;
    top : -0.4em ;
    }
 
.shareHtmlAll-title a.exit:before {
    content : "参考(外部リンク)" ;
    background : #333 ;
    }
 
.shareHtmlAll:before,
.shareHtmlAll:after {
    content : "" ;
    display : table ;
    }
 
.shareHtmlAll:after {
    clear : both ;
    }
 
.shareHtmlAll .hatebu {
    display : inline ;
    margin : 0 0 0 1% ;
    border : none ;
    position : absolute ;
    right : 0 ;
    top : 0 ;
    }

全タブにShareHTML(サムネイルにアイキャッチ画像挿入)

上で紹介した記事紹介用テンプレートですが、欠点があります。それはサムネイル画像が必ずページのスクリーンショットになることです。

別にそれでいいと言えばいいのですが、自分のブログの関連記事を紹介したいとき、WordPressを使っていて「アイキャッチ画像」を指定している人はソレを使いたいですよねー。

WordPress限定になりますが、それを実現できるてとこん(@tetokon)さんの素敵な記事を見つけました。

参考: WordPressの内部リンクのアイキャッチ画像を簡単に取得できるショートコードを作りました!コピペでできます!

これ、マジですごいです。ずっと前から「こんなこと出来たらいいな……」と思っていたけど無理やろなーって諦めていましたから。

しかもこれだとサムネイル画像を途中で変えても、それに伴って自動で変更してくれます。2014年で一番感動したコードです。

WordPressのコード

まずはこちらをfunctions.phpの中にコピペして下さい。一番下でいいです! functions.phpの場所は [ ファイル ] → [ wp-content ] → [ themes ] → [ テーマ名 ]の中です!

/* ■ 追記: 関連リンクのアイキャッチ取得
--------------------------------------- */
function get_my_thumbnail( $atts, $post_url = null )
{
return wp_get_attachment_url(get_post_thumbnail_id(url_to_postid($post_url)));
}
add_shortcode('my_thumbnail', 'get_my_thumbnail');

GetTabInfo用のコード(WordPressの内部リンク専用)

こちらがGetTabInfoのテンプレート用コードです。

改行が2行分入っている部分もコピペしてください。



<div class="shareHtmlAll"><a href="%%URL%%"><img class="shareHtmlAll-img" src="[my_thumbnail]%%URL%%[/my_thumbnail]" alt="%%TITLE%%" width="140" /></a><p class="shareHtmlAll-title"><a href="%%URL%%">%%TITLE%%</a></p><a href="http://b.hatena.ne.jp/entry/%%URL%%" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/%%URL%%" alt="" class="hatebu"></a></div>

ヨス

当たり前ですが、自分のブログ記事を紹介するときしかサムネイル画像は取得できません。

記事ページじゃないとアイキャッチ画像を取得できません(カテゴリページなどではできないということ)。

CSSコード

CSSコードは上で紹介したコードと全く同じです。

.shareHtmlAll{ 
    clear : both ;
    width : 75% ;
    height : auto ;
    margin : 1em 0 1em 2em ;
    box-shadow: 0 1px 2px rgba(100, 100, 100, 0.3)inset;
    border: 1px solid #DADADA;
    border-top: 1px solid #757575;
    border-radius: 4px;
    position : relative ;
    zoom : 1 ;
    }
 
.shareHtmlAll-img {
    float : right ;
    }
 
.shareHtmlAll a {
    color : #333 ;
    }
 
.shareHtmlAll a:hover {
    background : #F7F7F7 ;
    }
 
.shareHtmlAll-title {
    font-size : 60% ;
    width : 100% ;
    margin : 0 ;
    }
 
.shareHtmlAll-title a {
    display : block ;
    min-height : 140px ;
    padding : 7% 5% 2% 5% ;
    line-height : 1.5 ;
    font-size : 120% ;
    text-decoration : none ;
    }
 
.shareHtmlAll-title a:before {
    content : "合わせて読みたい" ;
    position : absolute ;
    top : 10% ;
    left : 5% ;
    line-height : 1.2 ;
    font-size : 135% ;
    background : #fc9705 ;
    letter-spacing : 0.2em ;
    color : #fff ;
    font-weight : bold ;
    padding : 1% 0 1% 1% ;
    top : -0.4em ;
    }
 
.shareHtmlAll-title a.exit:before {
    content : "参考(外部リンク)" ;
    background : #333 ;
    }
 
.shareHtmlAll:before,
.shareHtmlAll:after {
    content : "" ;
    display : table ;
    }
 
.shareHtmlAll:after {
    clear : both ;
    }
 
.shareHtmlAll .hatebu {
    display : inline ;
    margin : 0 0 0 1% ;
    border : none ;
    position : absolute ;
    right : 0 ;
    top : 0 ;
    }

欲を言うと、誰か、WordPress<title>も取得してくれるコード書いてくれないかなー。

リスト形式

こんな感じのリスト形式も簡単です。

リスト形式
リスト形式

GetTabInfo用のコード

こちらをGetTabInfoのテンプレート登録してください。



<li><a href="%%URL%%" target="_blank">%%TITLE%%</a></li>

最後に取得したHTMLタグを<ul></ul>で囲むのをお忘れなく!

せっかくなんでDLタグも

今度は<DL>タグです。

定義タグ
DL / DT / DDタグ(定義タグ)

GetTabInfo用のコード



<dt>%%TITLE%%</dt><dd><a href="%%URL%%" target="_blank">%%URL%%</a></dd>

最後に取得したHTMLタグを<dl></dl>で囲むのをお忘れなくっ!

今回のGetTabInfo複数テンプレートの登録機能ですが、実は前回バグをお知らせしてからちょっとだけ仲良くさせていただいている作者のHajime Nagata(@nagata)さんに、またしてもお願いしていたんです。

そしたら今回も想像以上に使いやすくアップデートしてくれたんです! ありがとうございます。もうね。感動以外のなにものでもないです!!

GetTabInfoをインストール

GetTabInfoの関連記事はこちらです。

Google Chromeとか拡張機能については下の記事をご参考に!(これらもGetTabInfoで作っています)

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!