ブラウザで表示している画像を中央揃えにするブックマークレット

画像 真ん中 ブックマークレット

こんにちは!YOUKNOWです。

デザインカンプを完成させ、いざ書き出してみてブラウザに画像を表示させた時にこれじゃない…って思うときが多々あります。

なんでや…Photoshopで完璧に調整したのに…

このように(?)Photoshop上で見ている時のデザインとブラウザで見た時のデザインの印象がどうしても違ってるように見える病にかかっている人は多いんじゃないでしょうか。
(長いから病名決めよう)

僕はその病気の重症患者なので、デザインの微調整を行うときはブラウザで確認して、Photoshopに戻ってまた修正みたいな事を繰り返しながらデザインをブラッシュアップさせます。

画像 真ん中 ブックマークレット

しかし!Photoshopから書きだした画像をブラウザにそのまま放り込むと、画像が左端によってしまっていて実際のイメージ感がつかめません。

その問題を解消するために、ブラウザで表示している画像を中央揃えにするブックマークレットを作りました。(長い)

ブラウザの画像を真ん中にするブックマークレット

ブラウザデザイン確認用

この上のリンクをブックマークに登録して下さい。

後は中央寄せにしたい画像をブラウザに読み込ませて、ブックマークレットをクリックすればOKです。

画像 真ん中 ブックマークレット

使用した感じはこのような感じになります。

最後の微調整はブラウザで見ながらやるとより良い調整が出来ますので、ぜひご利用下さい!