晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

開いているWebページのタイトルとURLをクリップボードにコピーするブックマークレット(+ダイアログ版)

開いているWebページのタイトルとURLをクリップボードにコピーするブックマークレット。備忘録として。

最初参考にしたのは以下のページ。

JavaScript

 <p>タグを使ったこの方法だと、文字にフォントサイズの属性が付いた形でクリップボードにコピーされる。

var tmp = document.createElement('p');
tmp.textContent = document.title + '\r' + location.href;
document.body.appendChild(tmp);
document.getSelection().selectAllChildren(tmp);
document.execCommand('copy');

最終的にtextareaを使った以下のページを参考にした。

JavaScript

 [タイトル+改行+URL]の形式でコピー。

e = document.createElement('textarea');
e.textContent = document.title + '\r' + document.URL;
document.body.appendChild(e);
e.select();
document.execCommand('copy');

ブックマークレット (Bookmarklet) 】

javascript:(function(){e = document.createElement('textarea');e.textContent = document.title + '\r' + document.URL;document.body.appendChild(e);e.select();document.execCommand('copy');})();

ブックマークレットをブックマークバーに登録する。

Chromeの場合】ブックマークバーの上でマウスの右ボタンをクリック。

f:id:art2nd:20190719120258j:plain

「ページを追加(G)」を選択する。

名前を適当に付けて、URL欄に上のブックマークレットを貼り付けて保存する。

f:id:art2nd:20190719120528j:plain

Webページを開いた状態で、このブックマークをクリックすれば、そのWebページのタイトルとURLがクリップボードにコピーされる。

【おまけ】

タイトルとURLをブラウザのダイアログで表示するブックマークレット

javascript:prompt('タイトル + URL',document.title+'%5Cn'+location.href)();

HTML、CSSで背景画像を並べる&透過風に白っぽくする。

昨日、GIMPで同じ画像(写真)を継ぎ目なくきれいに壁紙状に並べるのを試した。

ここで作成した画像をHTMLで壁紙として並べる方法。

f:id:art2nd:20190718170657j:plain

単純に同じ画像を背景一杯に並べるのは簡単。

<body background="photo/240.jpg">

背景画像壁紙 サンプル

背景画像を透過風に白っぽくするのは少し面倒。

f:id:art2nd:20190719094221j:plain

<body>に対してはopacityなどは指定できないので、<div>にbackground-imageで画像を指定する。透過風に白っぽくするのにopacityを使うと子要素も透過になってしまい、本文等もグレーっぽくなって見づらくなる。それを防ぐためには、<div>を重ねてrgba()で透過率を指定する。

背景一杯に画像を並べるためには、他の要素のmarginを0にし、<html>や<body>のheightを100%にする必要がある。

<style>
* { margin: 0; }
html, body { height: 100%; }
#wallpaper {
	background-image: url(photo/240.jpg);
	background-repeat: repeat;
	height: 100%;
/*	opacity: 0.7;	子要素も透過になってしまう。	*/
}
#cover {
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
}
</style>

<body>
<div id="wallpaper">
<div id="cover">
・・・
</div>
</div>
</body>

背景画像(透過)壁紙 サンプル

GIMP2.10.8で同じ画像(写真)を継ぎ目なくきれいに壁紙状に並べる。

同じ画像(写真)を継ぎ目なくきれいに壁紙状に並べる。同じ写真を単純に並べると継ぎ目が出てしまう。継ぎ目が出ないように並べる方法を試してみた。

GIMPは、バージョンが変わると機能やメニューが大きく変わる。インターネットで検索して出てきた方法は、メニューから無くなっていたり、手順が多すぎて面倒だったりで、使えなかった。

以下は、現在使用中のGIMP2.10.8での方法。シンプル。簡単。

【元の画像】

f:id:art2nd:20190718170647j:plain

手順1:継ぎ目が出ない画像に変換する。

  • メニュー[Flters]→[Map]→[Tile Seamless]

f:id:art2nd:20190718170657j:plain

HTML等で画像を並べる場合は、この画像をそのまま使えば良い。

HTML、CSSで背景画像を並べる&透過風に白っぽくする。

手順2:画像を並べる。

GIMPプラグイン「G'MIC」を使う。「G'MIC」については以下の記事を参照。

  • メニュー[Flters]→[G'MIC]→[Arrays & Tiles]→[Array [Faded]]

オプション[X-Tiles][Y-Tiles]で並べる数を指定する。

オプション[Size]で[Repeat]を選択する。

f:id:art2nd:20190718170720j:plain

【2×2で作成した画像】

f:id:art2nd:20190718170706j:plain

【3×3で作成した画像】

f:id:art2nd:20190718172448j:plain

写真でアート:モノクロ写真2枚をGIMPのレイヤーで合成。

GIMPを使った写真アート加工シリーズ。

モノクロ写真2枚をGIMPのレイヤーで合成してみた。

f:id:art2nd:20190718144953j:plain
f:id:art2nd:20190718144956j:plain
合成に使った2枚の写真

GIMPのレイヤーを使って合成する。

  1. 背景画像を読み込む。
  2. 新しいレーヤーを追加する。
    ・メニュー[レイヤー]→[新しいレイヤーの追加]
  3. 新しいレイヤーに前景画像を読み込む。
  4. レイヤーダイアログを表示する。
    ・メニュー[ウインドウ] →[ドッキング可能なダイアログ]→[レイヤー]
  5. レイヤーのモードを変えてみる。

f:id:art2nd:20190718151304j:plain

f:id:art2nd:20190718145110j:plain

Darken only

f:id:art2nd:20190718145134j:plain

Hard light

f:id:art2nd:20190718145152j:plain

Vivid light

f:id:art2nd:20190718145233j:plain

Brain merge

f:id:art2nd:20190718145302j:plain

Hard mix

f:id:art2nd:20190718145325j:plain

Multiply