WordPress

リンク先のキャプチャを自動で表示してくれるプラグイン

外部リンクを貼るときに、キャプチャも一緒に表示させたいときってあると思います。そんなときは「Browser Shots」というプラグインが便利です。このプラグインを使うと、こんな感じでキャプチャを表示することができます。

Screenshot of cotodama.co

このようなキャプチャ(サムネイル)が自動で生成されるので、わざわざ画像を保存したり、トリミングしたり、サイズ調整したりする手間もかかりません。これなら常に最新のページが表示されるので、リンク先のデザインが変わっても安心です。ここでは「Browser Shots」の使い方を見ていきます。

「Browser Shots」の使い方

プラグインを有効化したら準備はOKです。あとはキャプチャを表示させたい場所に下記のショートコードを貼りましょう。

「Browser Shots」のショートコード
[browser-shot url="ページのURL" width="幅" height="高さ"]

幅や高さの指定は数字のみで入力してください。ちなみにこのショートコードでキャプチャを表示させると、下記のようなHTMLソースコードが吐き出されます。

HTML

<div class="browser-shot "><a href="ページのURL" ><img src="キャプチャ画像URL" width="幅" height="高さ" class="alignnone" /></a></div>

スタイルシートを適用させたい場合は、browser-shotというクラス名をセレクタに指定するとキャプチャ画像の位置を調整できます。

target="_blank"で新しいウィンドウで開かせたいときは?

パラメーターが用意されいますので、target="_blank"とそのまま入れます。
こんな感じです。

target="_blank"付きのショートコード
[browser-shot url="ページのURL" width="幅" height="高さ" target="_blank"]

画像にクラス名を入れたいときは?

image_class="クラス名"という方で属性を入れると任意のクラス名を画像に入れることが出来ます。例えば、基本的に画像を中央に寄せたいという場合はWordPressに実装されているスタイルシートを使って下記のように属性を入れます。

画像を中央配置するショートコード
[browser-shot url="ページのURL" width="幅" height="高さ" image_class="aligncenter" target="_blank"]

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP