ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

      2015/02/16

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

リンクをスクショ付きで載せるのは面倒だった…

今までリンクを画像付きで紹介する時は、リンク先のスクリーンショットを撮る→Photoshopで画像編集して書き出し→ImageOptimでメタデータを削除して容量の軽量化→完成品をアップしてリンクを書く。というステップを踏んでいたのですが、もっと簡単に見栄えもよくWordPressのブログに掲載する方法があったので備忘録としてここに残したいと思います。お役に立てたら光栄です。

スポンサーリンク

完成後のリンク表示

完成するとこんな風に、

とても見栄え良く載せる事が出来ます。さっそく導入してみましょう。

WordPressのプラグイン「Browser Shots」

名前の通りブラウザのスクリーンショットを撮ってくれるプラグインです。導入はとても簡単です。管理ページ→プラグイン→新規追加→検索から「Browser Shots」と入力。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

一番上に出てくる「Browser Shots 作成者: Kevin Leary」をダウンロードして有効化してください。Browser Shotsのバージョンは今日[2014.2.8]時点で1.0です。

スポンサーリンク

Google Chromeの拡張機能にある「Create link」

上記のリンク「Chorome ウェブストアー Create Link」に飛んで右側の「CHOMEに追加」を押して拡張機能を追加してください。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

Create Linkの設定

導入されたCreate Linkにリンクを載せる為の簡単なコードを設定します。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

Chrome右上の「Create Link」ボタンを押して一番下の「Configure」を押す。するとCreate Linkのページがブラウザ上に表示されます。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

Create Linkのページ上、左下の「+」をクリックしてください。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

クリック後枠が増えるので、左側の小さい窓には「Capture」(名前は好みで)左側に下記のコードをコピペしてください。

<div class="infobox"> <div style="float:left; margin-right:19px;"> 
http://"%url%"
</div> <a style="color:#0070C5;" href="%url%" target="_blank">%title%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"> <img src="http://b.hatena.ne.jp/entry/image/%url%" alt="" border="0"> </a> <div style="clear:both;"> </div> </div> <br>

注意:<div style=”float:left; margin-right:19px;”>の中の19pxと云うサイズですが、このサイズは前回のこちらの記事
WordPressテーマ「Stinger3」のサイドバーの幅を変更する方法でカスタマイズしたStinger3の記事幅に合うように調整しています。ご自身のブログに合うように調整してください。最終的に下記の様になれば大丈夫です。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

これでCreate Linkの設定は終わりです。

注意! 現在はwidth=”150″のあとに height=”100″も追加してあります。画像は修正前です。

スポンサーリンク

スタイルシート(style.css)を編集

現状はこのように表示されます。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

この状態でも十分にいい感じなんですが、もう少しだけ「ここはリンクです!」という主張が欲しので、今度はスタイルシート(style.css)に調整のコードを足していきます。

例:ダッシュボード→外観→テーマ編集から→スタイルシート(style.css)
自分は編集にTransmit4を使っています。

style.cssの一番下に以下のコードを張ってください。

/*---------------------------------
Browser Shot
--------------------------------*/
.infobox {
    border: 1px dashed #ccc;
    padding: 15px;
}

.browser-shot img{
  box-shadow:2px 2px 3px #CCCCCC;
}

リンク全体を点線で囲って、スクリーンショットには影を付けて少しファンシーにしました。

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法

どうでしょうか?ちょっとお洒落になったんじゃないかと思います。読んで頂いてありがとうございました。

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPress[TwitterCards] ツイッターに概要を表示させる方法
WordPress[Tweetily] 過去記事を自動ツイートする方法
WordPress[Tweetily] 過去記事を自動ツイートする方法
WordPress[Stinger3] 背景を画像や写真に変更する方法
WordPress[Stinger3] 背景を画像や写真に変更する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress Backup to Dropbox
バックアップ命「WordPress Backup to Dropbox」を導入
WordPress リンク表示をはてなのブログカードと同じにする
WordPress リンク表示をはてなのブログカードと同じにする
WordPress[Acunetix WP Security] 基本的なセキュリティー対策と脆弱性対策
WordPress[Acunetix WP Security] 基本的なセキュリティー対策と脆弱性対策
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示
WordPress[.htaccess] 管理画面へのアクセスを日本国内限定にする
WordPress[.htaccess] 管理画面へのアクセスを日本国内限定にする