【WordPress】レスポンシブ対応モックアップを表示。Device Mockups

device_mockups_s
Device Mockupsはショートコードを使用してレスポンシブのモックアップを表示してくれるプラグイン。設置方法はショートコード内に任意のコンテンツを入れることで画像、ビデオなどをデバイスモックアップなどに表示してくれます。

Device Mockupsプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Device Mockupsを検索
有効化にするとビジュアルにDevice Mockupsが追加されます。

推奨画像サイズ

  1. iPhone 6 – 1334×750
  2. iPhone 6 Plus – 1920×1080
  3. iPhone 5s – 1136×640
  4. iPhone 5 – 640×1136
  5. iPad – 2048×1536
  6. iMac – 1920×1200
  7. Macbook Pro – 1440×900
  8. Galaxy S3 – 720×1280
  9. Nexus 7 – 1920×1200
  10. Surface – 1920×1080
  11. Lumia 920 – 768×1280
  12. Chrome – 1440×900
  13. Firefox – 1440×900
  14. Safari – 1440×900

ビジュアル

device_mockups_1
投稿画面でビジュアルエディターにDevice Mockupsが追加されます。

device_mockups_2
最初にクリックすると上記画像のようにDeviceかBrowserを選択することができます。

Device

device_mockups_3

Link 画像をクリックした時のリンク先
Type Mockupに使うデバイスを選択。
デバイスの色
Orientation デバイスの向き。縦または横
ピクセルまたはパーセンテージで指定
Hide 左または右非表示
Scroll スクロール可能にするか
Content コンテンツ内容を入れます。画像のURLをコピーしている場合はここにペーストして下さい。その場合imgタグの抜けがないか確認

※Typeで選択したものでも色には実際にない色が選択できます。(type:iMac で 色:Goldなど)その場合は決まっているものになるようです。

最後にOKをクリックするとショートコードが挿入されます。[device]Content[/device]Contentの部分にメディアを追加します。

ショートコード

ショートコードの例
[device link=”http://voyager-jp.com” type=”iphone5s” color=”silver” orientation=”” hide=”” width=”” scroll=”true”]< img src=画像URL/ >[/device]

device_mockups_8

サイズ50%で横向きのiPhone6のゴールド

device_mockups_7

imac
device_mockups_5

Browser

device_mockups_4
ブラウザもDeviceとほとんど同じです。

Link 画像をクリックした時のリンク先
Type Mockupに使うブラウザを選択。
ピクセルまたはパーセンテージで指定
Hide 左または右非表示
Scroll スクロール可能にするか
Content コンテンツ内容を入れます。画像のURLをコピーしている場合はここにペーストして下さい。その場合imgタグの抜けがないか確認

最後にOKをクリックするとショートコードが挿入されます。[browser]Content[/browser]Contentの部分にメディアを追加します。

device_mockups_6

このプラグインを使用するに辺り、画像にhoverエフェクトを入れている場合エフェクトが邪魔になると思うのでモックアップの部分のみエフェクトをなしにすることも考えておいた方がいいかもしれません。

 
Device Mockups

【WordPress】レスポンシブ対応モックアップを表示。Device Mockups

  • LATEST
  • RELATED
  • POPULAR