WordPress関連のバックアップ(No.4)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
WordPress関連へ行く。
- 1 (2014-12-16 (火) 15:45:25)
- 2 (2014-12-16 (火) 16:46:59)
- 3 (2015-01-04 (日) 15:37:35)
- 4 (2015-01-16 (金) 16:06:00)
- 5 (2015-01-19 (月) 10:12:54)
- 6 (2015-12-22 (火) 16:15:43)
- 7 (2016-09-22 (木) 17:47:16)
- 8 (2016-11-08 (火) 11:18:04)

↑

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

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

↑

前提条件 †

browser-shot(WPプラグイン)がインストールされていること
MakeLink(Firefoxプラグイン)がインストールされていること

↑

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押す。

↑

実際の手順 †

スクリーンショットを撮りたい画面上の何も無いところで右クリック
MakeLinkで作った設定をクリック
クリップボードにコピーされるため、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;
}
/*-- ここまで --*/

↑