目次 †

↑

WPプラグインbrowser-shotの見た目を美しく †

自分が使っているブラウザがFirefoxのためFirefox基準で手順。
chromeを使っていたら結構いろいろなサイトで解説してあるため、そちらを参照したほうがいい。

↑

前提条件 †

↑

MakeLink設定 †

右クリックしMakeLink-設定を選択。新規で以下を作る。

 <div class="share_link"> [browser-shot url="%url%" width="230"] <div class="link_title"> <a href="%url%" target="_blank">%text%</a> <div class="clear"></div></div></div>

OK押す。

↑

実際の手順 †

  1. スクリーンショットを撮りたい画面上の何も無いところで右クリック
  2. MakeLinkで作った設定をクリック
  3. クリップボードにコピーされるため、WPに貼り付け。
↑

WPスタイルシート変更 †

見た目の問題なので追加しなくても問題なし。

/*--------------------------------
キャプチャ　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;
}
/*-- ここまで --*/
↑

参考にしたサイト †

http://shufulife.com/capture/

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS