*目次 [#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">%text%</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/ *Wordpress4.1でビジュアルエディタが使えなくなった時 [#je176cd5] 20150116に現象発生。~ 調べて見ると、何かしらのプラグインが悪さをしていることが多いらしい。~ **結果 [#bebd64ae] うちの環境では、 -PS Disable Auto Formatting -TinyMCE Advanced -Browser Shots を止めた結果、''Browser Shots''を停止したら表示出来るようになった。~ 無効にすることでサイト表示に影響が出るため早く修正されることを願う……。~ ***追記(20150119) [#s602eb4c] v1.3にて修正されたことを確認した。修正されて良かった……。