*目次 [#b79ea3b6]
#contents
----
*WPプラグインbrowser-shotの見た目を美しく [#i0d41c2d]
自分が使っているブラウザがFirefoxのためFirefox基準で手順。~
chromeを使っていたら結構いろいろなサイトで解説してあるため、そちらを参照したほうがいい。~
**前提条件 [#aa982502]
-browser-shot(WPプラグイン)がインストールされていること
-MakeLink(Firefoxプラグイン)がインストールされていること
**MakeLink設定 [#j03758b0]
右クリックしMakeLink-設定を選択。新規で以下を作る。~
 <div class="browsershot">[browser-shot url="%url%" width="240"]</div><a href="%url%" target="_blank">%text%</a><div class="divclear"></div><br/>
  <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/
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS