*目次 [#b79ea3b6] #contents ---- *WPプラグインbrowser-shotの見た目を美しく [#i0d41c2d] 自分が使っているブラウザがFirefoxのためFirefox基準で手順。~ chromeを使っていたら結構いろいろなサイトで解説してあるため、そちらを参照したほうがいい。~ **前提条件 [#aa982502] -browser-shot(WPプラグイン)がインストールされていること -MakeLink(Firefoxプラグイン)がインストールされていること **MakeLink設定 [#j03758b0] 右クリックしMakeLink-設定を選択。新規で以下を作る。~ <div class="share_link"> [browser-shot url="%url%" width="230"] <div class="link_title"> <a href="%url%" target="_blank">%title%</a> <div class="clear"></div></div></div> OK押す。 **実際の手順 [#wb3d5354] +スクリーンショットを撮りたい画面上の何も無いところで右クリック +MakeLinkで作った設定をクリック +クリップボードにコピーされるため、WPに貼り付け。 **WPスタイルシート変更 [#n8e18802] 見た目の問題なので追加しなくても問題なし。~ /*-------------------------------- キャプチャ Browser Shots ---------------------------------*/ .share_link { width:85%; margin: 20px auto; padding: 10px; border:double #008B8B; overflow: hidden; } .browser-shot{ text-align:center; } .browser-shot img{ box-shadow:0px 2px 4px #CCCCCC; } .link_title{ text-align:center; line-height:150%; overflow: hidden; padding-top:10px; } /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (max-width: 780px) { } /*media Queries タブレットサイズ ----------------------------------------------------*/ @media only screen and (min-width: 380px) { } /*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 780px) { /*-------------------------------- 780px キャプチャ Browser Shots ---------------------------------*/ .share_link { margin:30px auto; } .browser-shot{ margin:0 15px 0 0; float:left; text-align:left; } .share_link .link_title{ margin:0; text-align:left; } /*-- ここまで --*/ ***参考にしたサイト [#c8ee792a] http://shufulife.com/capture/