人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

画像のクールなポップアップを演出する / エキサイトブログ

2017年 07月 09日
「右クリック禁止」のブログパーツは2009年に導入されました。 詳細は以下のリンクを参照ください。

この機能は掲載画像のコピー抑止よりも、スマートな画像のポップアップ(等倍拡大表示)を演出できる事に価値があります。 標準のポップアップウインドウは、見る側にとって操作性がいまひとつです。 当ブログでは、画像をクリックすると、このパーツによるポップアップが実行されます。 ポップアップは、ウインドウ内の何処かをクリックすれば、閉じて元に戻ります。 他ページへ飛ばされてイライラする事がなく、とても優れた画像の見せ方だと思います。



このブログパーツをブログに登録する手順を以下に説明します。

●ブログの設定画面に入り、黒メニューの〔設定〕→〔基本設定〕で下図の(1)〔基本設定〕の画面を表示します。

画像のクールなポップアップを演出する / エキサイトブログ_a0349576_02232115.png

ここで「画像の拡大表示」の項を探して(2)「ポップアップ」にマークを入れ、一番下の(3)「適用」を押します。

●次に下図の様に(4)〔メニュー並べ替え〕の画面を表示し、水色のメニュー項目の中で(5)「ブログパーツ」にチェックを入れ、一番下の(6)「適用」を押します。

画像のクールなポップアップを演出する / エキサイトブログ_a0349576_02394467.png

●黒メニューの〔設定〕→〔ブログパーツ〕を選択して「ブログパーツ」の画面を開いておきます。

以下のコードをコピーします。

<script type="text/javascript" src="//md.exblog.jp/scripts/rclick.js"></script>

もし、ブログ画面のメニューに画像の無断使用禁の「文言」を表示したい場合は、下のコードの方をコピーしてください。

<script type="text/javascript" src="//md.exblog.jp/scripts/rclick.js"></script>
<ul>
<li>このブログに掲載されている写真・画像・イラストを無断で使用することを禁じます。</li>
</ul>

「文言」は、このテキスト部分がそのまま表示されるので、任意に書き換える事が可能です。 私は、ブログメニューに何も表示が出ない上側のコードを使っています。

●上記のどちらかのコードをコピーしたら、下図の様に(7)「ブログパーツ追加」の枠にペーストし、(8)「登録」を押します。

画像のクールなポップアップを演出する / エキサイトブログ_a0349576_02564707.png

●開いている「ブログパーツ」の画面の下側の「ブログパーツの設定」は、何もブログパーツを使用していない場合は、下図の様な状態です。

画像のクールなポップアップを演出する / エキサイトブログ_a0349576_03035483.png

ブログパーツを登録すると、この「並べ替え」の枠内に、登録したパーツが大きく表示されます。

画像のクールなポップアップを演出する / エキサイトブログ_a0349576_03083705.png

(9)の枠には、パーツの表示内容が示されます。「文言」なしのコードを登録した場合は空白です。「文言」ありを登録した場合は、ここに文言が表示されます。(パーツ登録の結果が思い通りでない時など、パーツを削除するには、赤の「削除」を押します)

●実際にブログパーツの動作を確認します。 上図の(10)「プレビュー」でブログ誌面を表示して、掲載画像を左クリックでポップアップさせます。 下図はそのサンプルですが、半透過の黒と白の枠で囲まれた等倍の画像が、同じウインドウ内にポップアップします。

画像のクールなポップアップを演出する / エキサイトブログ_a0349576_06055576.jpg

●問題なければ、念のため(11)「適用」を押して、全ての設定画面を閉じます。



以上で、「右クリック禁止」のブログパーツが登録され、実際に機能しはじめます。 ただ、私はポップアップの枠のデザインを更にアレンジしました。 デフォルトでは、枠内に表示される「文言」が気に入らない事や、枠外の周囲が見え過ぎて落ち着かないと思ったからで、これは好みがあると思いますが。

ポップアップ枠に対するアレンジCSSをブログスキンに追記して、下図の様にウインドウ内全体が暗転するデザインとしています。 このポップアップはウインドウ内の何処をクリックしても抜けられます。 従って「CLOSE ×」は実際は不要なのですが、ポップアップの抜け方でとまどうのを防ぐ目的で残しました。「×」を押さないと抜けられないポップアップコードがたまにありますが、大きな画像で抜けられなくて困る事があります。 その点、このブログパーツは良く練られた優れものです。

画像のクールなポップアップを演出する / エキサイトブログ_a0349576_06062505.jpg

以下がスキンに追記したCSSの項目です。

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br, #facebox .b {
display: none !important; } /* 画像の半透過の外枠を消す */
#facebox .body {
background: rgba(25,25,25,0.04) !important; } /* 画像の内枠の色 */
#facebox .msg {
display: none; } /* 無断複写~の文字を消す */
#facebox .footer {
border: none !important; } /* 文字の上の細線を消す */
.facebox_overlayBG {
opacity: 0.8 !important; } /* ウインドウ内の黒反転の透過度 */



細かい問題点ですが、このブログパーツを使用すると、IE11とEdgeからの参照で、中央寄せ配置の画像に限り、マウスを乗せた(hover)時に、画像の下辺にリンクテキストの文字背景色が表示される様になります。

▪これはChromeでは生じず、上記以外のブラウザでは未確認です。
▪左右寄せ配置の画像の場合には生じない。
▪本文中のリンクテキストのフォバー(a:hover)の文字背景色の指定が、画像にも出てしまう現象。
▪画像の影の様に、画像下辺に1/3行程度の高さで出る。
▪本文中の「a:hover」の背景色指定が、本文背景色と同色か、指定が無い場合は気付かない。

IE11などで参照した時に、マウスを乗せた画像にhover背景色が表示されて気になる場合は、以下の対策コードを追加します。 このコードは、本文中のリンクテキスト等に影響が出ない様に、セレクタを「中央寄せ配置の画像」を特定する様に工夫したものです。

.POST center[draggable=""] > a:hover,
.post center[draggable=""] > a:hover{
background: none; }
/* 画像のhover時に、リンクを示す影が出ない様にする */



以下のリンク先に、これに至るまでに試した他のアレンジ例があります。 参考にしてください。




使用中のスキンを始めてアレンジする場合は、以下のリンクを最初に読んでマイスキン登録をしてから、アレンジ操作をしてください。



この記事は、エキサイトのブログテーマ/トラックバックカテゴリー「スキン編集」に、トラックバックしています。



by Ataron | 2017-07-09 16:23 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。