▼ このページへのリンクLightbox や Shadowbox のような JavaScript ライブラリはとてもかっこよく表示できるのでとても自己満足はできるのですが、イザその画像の詳細を見たくて実際のサイズで見たいときにはあまり意味がなかったり。特に、イラストを作った直後で、ブログに貼り付けてから再度見直したい時にはなんか違うなぁ(画像小さいし)・・・・なんて思う事もあったので、単純に大きく開くボタンを作ってはみたのですが、結構コードが長くて使いまわしがつらかったので作りました。 『関数にすれば?』 という意見も頭の中には少しあったのですが、このほうがイラスト毎に後から開いたウインドウの背景をカスタマイズできるので、これでいいかなと思いました。 ▼ 通常ボタン 上で開くイラストは、背景が透過しているのでこんなふうにカスタマイズできます。 ▼ インラインに JavaScript で背景を追加したカスタマイズボタン 5行目が追加部分です
<input type="button" value="最大表示" onclick='
var w=1000,h=860;
hwin=window.open("about:blank","","width="+w+",height="+h+",scrollbars=yes,resizable=1,left="+(screen.width-w)/2+",top="+(screen.height-(h+100))/2);
hwin.document.write("<img src=\"https://lh6.googleusercontent.com/- FQO8GbFoAUI/VQVVLysRSzI/AAAAAAAAY1g/trUU_gZMCkQ/s1200/Aiko6_maid.png\">");
hwin.document.body.style.background="url(https://lh5.googleusercontent.com/-yzSGYSSjnFo/VP8HrL7VPLI/AAAAAAAAYts/r_GE5g8ee9s/s1200/marge_city_a01.png) no-repeat 0px 100px";
'>
|
|
【WEBサービスの最新記事】
- #ZOOM #アバター #ベータ版
- ロリポップの phpMyAdmin の SQL 入力部分のフォントを変更する( Google Chrome のデベロッパーツールを利用 )
- utf8 文字ツール の 文字参照リンクの作成方法
- Windows 用 curl で、Googls Photo API を呼び出して画像の baseUrl を取得する
- WordPress の リダイレクト用のコードを作成する PHP / パーマリンクが数字だけだったので、投稿名を追加してから
- 無料SSL(Let's Encrypt) : [さくらインターネット]SSLサーバ証明書発行のお知らせ
- イメージユニット作成サービス / window.open と Lightbox2 と Shadowbox
- フリーフォントでボタン素材作成のバリエーションサンプル / ノーマル・文字なし・太枠・フォント
- フリーフォントでボタン素材作成
- というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました
- 電力自由化 : 関西向け東電プレミアムプラン シュミレーション
- Google+、はてな、Twitter、Facebook のボタンを貼り付けるコードの一括取得
- livedoor Blog で、Twitter カードを使用する
- livedoor Blog で、Facebook の『シェアボタンを表示する』
- CKEditor CDN を使用して、簡単に HTML コンテンツ作成エディタを利用できます
- フリーフォントで簡単ロゴ作成の『横書きページで』文字の中央に鏡を置いたような結果を反映させられるようにしました。フリーフォントの種類によって、みんな違うものになります。
- bit.ly の短縮URLのドメイン部分に自分のサブドメイン(Branded Short Domain)を使用する
- Google のカスタム検索の結果と、通常の site: 検索の結果が同じにならないので、後者でしばらく様子を見る事に
- 自分の著作では無い写真を、Twitter 経由でブログに埋め込む時の一考。Google+ も使ってみると、元記事消えても画像は残るかもしれない・・・
- ＨＴＭＬ整形ツール / 属性単位の改行機能付き
