SQLの窓

2014年12月22日


GIMP : 吹き出しスクリプトで作った画像の利用

日本語で配布されていたスクリプトがサイト閉鎖でダウンロードできないので、WEBアーカイブでダウンロードしたら、GIMP 2.8 で動かなかったのでオリジナルを探してみました。そうすると、バージョンアップ版を見つけたので日本語化して、変な効果が付いてしたのをコメントにしています。( 必要ならコメント外すかオリジナルを使ってみて下さい )(オプションにしました)

※ 動かなかったのは、他のスクリプトとの関数名の衝突でした。
※ ですから、バージョンアップ版は -3 と付加されています。また、バージョンアップ版のほうが色を指定できるので優れています。

バージョンアップ版をテストしていると、四角形の吹き出し処理がバグっている事が解ったので修正しました。また、ぼかし処理はオプションで実行可能にしました。

▼ オリジナルはバグがあります。
オリジナル





▼ 日本語化版


▼ ソースを直接エディタで保存する場合は UTF-8N で保存する必要があります
; balloon 
; creates a balloon like in comics
; it sucks a bit ;-)
; (C) Copyright 2000 by Michael Spunt <t0mcat@gmx.de>
; Gopal.V hacked it in 2002 to make it suck less (Aqua'ish)
; but cut a few corners (literally)
;
; ramok hacked it in 2006 to make colors

(define (round-balloon-3 img drawable bw bh lw rect np orientation revert fill border gauss)
  (let* ((x 0))
    (if (= np FALSE) 
      (begin
        (set! x (- (* bw 0.5) (* bw 0.2)))
        (gimp-ellipse-select img x (* bh 0.5) (* bw 0.4) (* bh 0.4) REPLACE TRUE FALSE 0)
        (set! x (- (* bw 0.5) (* bw 0.2) (* bw orientation -0.1)))
        (gimp-ellipse-select img x (* bh 0.5) (* bw 0.4) (* bh 0.4) SUB TRUE FALSE 0)))
    (if (= revert FALSE) 
      (gimp-selection-translate img (* bw orientation 0.3) 0))
    (if (= rect FALSE) 
      (gimp-ellipse-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD TRUE FALSE 0))
    (if (= rect TRUE) 
      (gimp-rect-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD FALSE 0))
    (gimp-palette-set-background fill)
    (gimp-palette-set-foreground border) 
    (gimp-edit-fill drawable 0)
    (gimp-selection-shrink img lw)
    (gimp-edit-fill drawable 1)
    (if (= gauss TRUE) 
      (begin
        (gimp-selection-none img)
        (plug-in-gauss-rle2 1 img drawable 5.0 5.0)
        (plug-in-bump-map 1 img drawable drawable 135 14 4 0 0 74 182 1 0 1)
      )
    )
))

(define (round-think-balloon-3 img drawable bw bh lw rect np orientation revert fill border gauss)
  (let* ((x 0))
    (if (= np FALSE) 
      (begin
        (set! x (+ (* bw 0.5) (* bw -0.025) (* bw orientation 0.3)))
        (gimp-ellipse-select img x (* bh 0.85) (* bw 0.05) (* bh 0.05) REPLACE TRUE FALSE 0)
        (set! x (+ (* bw 0.5) (* bw -0.05) (* bw orientation 0.2)))
        (gimp-ellipse-select img x (* bh 0.75) (* bw 0.1) (* bh 0.1) ADD TRUE FALSE 0)))
    (if (= revert TRUE) 
      (gimp-selection-translate img (* orientation bw -0.3) 0))
    (if (= rect FALSE) 
      (gimp-ellipse-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.65) ADD TRUE FALSE 0))
    (if (= rect TRUE) 
      (gimp-rect-select img (* bw 0.1) (* bh 0.1) (* bw 0.8) (* bh 0.625) ADD FALSE 0))
    (gimp-palette-set-background fill)
    (gimp-palette-set-foreground border) 
    (gimp-edit-fill drawable 0)
    (gimp-selection-shrink img lw)
    (gimp-edit-fill drawable 1)
    (if (= gauss TRUE) 
      (begin
        (gimp-selection-none img)
        (plug-in-gauss-rle2 1 img drawable 5.0 5.0)
        (plug-in-bump-map 1 img drawable drawable 135 14 4 0 0 74 182 1 0 1)
      )
    )
))

(define (script-fu-balloon-3 bw bh lw rect np think right revert fill border gauss)
  (let* (
         (orientation 1)
         (side 1)
         (img (car (gimp-image-new bw bh RGB)))
         (balloon (car (gimp-layer-new img bw bh RGBA-IMAGE "Balloon3" 100 NORMAL))))
    (if (= right FALSE) (set! orientation -1))
    (gimp-image-add-layer img balloon 1)
    (gimp-display-new img)
    (gimp-edit-clear balloon)
    (if (= think FALSE) 
      (round-balloon-3 img balloon bw bh lw rect np orientation revert fill border gauss))
    (if (= think TRUE) 
      (round-think-balloon-3 img balloon bw bh lw rect np orientation revert fill border gauss))
    (gimp-selection-none img)
    (gimp-displays-flush)))

(script-fu-register "script-fu-balloon-3"
     "Balloon3..."
     "Creates a balloon like used in comics."
     "Michael Spunt"
     "Copyright 2000, Michael Spunt"
     "May 20, 2000"
     ""
     SF-ADJUSTMENT _"Image width"  '(240 10 2000 1 10 0 1)
     SF-ADJUSTMENT _"Image height" '(160 10 1000 1 10 0 1)
     SF-ADJUSTMENT "Line width"	   '(2 0 10 1 10 0 1)
     SF-TOGGLE "四角形"            FALSE
     SF-TOGGLE "吹き出しなし"	   FALSE
     SF-TOGGLE "妄想"              FALSE
     SF-TOGGLE "クチの向き(右)"  FALSE
     SF-TOGGLE "位置の反転"        FALSE
     SF-COLOR  "Fill"	            '(255 255 255)
     SF-COLOR  "Border"	            '(22 22 22)
     SF-TOGGLE "ぼかしあり"        FALSE)

(script-fu-menu-register "script-fu-balloon-3"
     "<Toolbox>/Xtns/Script-Fu/Text"
)


▼ ぼかし効果は枠線がぼやけてうっすら影が付いたようになって以下のようになります

( このバルーンはかなり大きいので目立たないですが、小さいと、もわっとした吹き出しになります )


GIMP : 漫画の吹き出しを作成するスクリプトを利用する


タグ:GIMP Script-Fu
posted by lightbox at 2014-12-22 20:22 | GIMP | このブログの読者になる | 更新情報をチェックする

GIMP : 超簡単にロゴ作成


GIMP : ロゴ作成用単色グラーデーションと「光沢」による簡単ロゴ作成
そもそも、GIMP には元々ロゴを作成する為のスクリプトがたくさん用意されているのですが、いろいろ作ってもそうそういいものはできません。いろいろやった結果、ずっとこれです。( ここのロゴも GIMP【光沢】です。 ) 特殊な燃えているロゴ凍っているロゴとかもスクリプトをダウンロードしてコピーすれば作れますが、あまり実用的では無いですね。 ▼ 最初はびっくりするんですが、使う場所無いです Gimp_logo4 Reflex Logo はちょっとかっこいいかもしれません ▼ reflex-logo.scm ( UTF-8Nで保存 )
;; Script-Fu Reflex

(define (apply-reflex-logo image drawable gradient displace merge)
 
	(let* (
		(old-bg (car (gimp-context-get-background)))
		(old-fg (car (gimp-context-get-foreground)))
		(old-gradient (car (gimp-context-get-gradient)))

		(image-width (car (gimp-drawable-width drawable)))
		(image-height (car (gimp-drawable-height drawable)))
		(area (+ image-width image-height))

		(c-x (car (gimp-drawable-offsets drawable)))
		(c-y (cadr (gimp-drawable-offsets drawable)))

		(white-layer (car (gimp-layer-new image image-width image-height RGBA-IMAGE "Blur" 100 NORMAL-MODE)))
		(text-layer (car (gimp-layer-new-from-drawable drawable image)))
		(fond-layer (car (gimp-layer-new image image-width image-height RGBA-IMAGE (string-append gradient) 100 NORMAL-MODE)))
		(horizon-layer (car (gimp-layer-new-from-drawable fond-layer image)))
		(bump-layer (car (gimp-layer-new image image-width image-height RGBA-IMAGE "Edge" 100 OVERLAY-MODE)))
		(blur-layer 0)
		(layer 0)
		(adjust 0) )


	(gimp-image-add-layer image white-layer -1)
	(gimp-image-add-layer image text-layer -1)
	(gimp-image-add-layer image fond-layer -1)
	(gimp-image-add-layer image horizon-layer -1)
	(gimp-image-add-layer image bump-layer -1)

	(gimp-edit-clear fond-layer) 
	(gimp-edit-clear horizon-layer)

	(gimp-layer-set-offsets white-layer c-x c-y)
	(gimp-layer-set-offsets text-layer c-x c-y)
	(gimp-layer-set-offsets fond-layer c-x c-y)
	(gimp-layer-set-offsets horizon-layer c-x c-y)
	(gimp-layer-set-offsets bump-layer c-x c-y)

(gimp-context-set-background '(255 255 255))
(gimp-edit-fill white-layer 1)
(set! blur-layer (car (gimp-image-merge-down image text-layer 0)))
(plug-in-gauss-rle2 1 image blur-layer (/ area 70) (/ area 70))

(gimp-context-set-gradient gradient)
(gimp-edit-blend fond-layer 3 0 0 100 0 0 FALSE FALSE 0 0 FALSE 0 0 0 (+ image-height displace))
(gimp-drawable-set-visible fond-layer FALSE)
(gimp-edit-blend horizon-layer 3 0 0 100 0 0 FALSE FALSE 0 0 FALSE 0 0 0 image-height)
(gimp-drawable-set-name horizon-layer "Reflex")
(set! adjust (* displace 2))
(plug-in-displace 1 image horizon-layer (/ area (- 70 adjust)) (/ area (- 70 adjust)) TRUE TRUE blur-layer blur-layer 1)

(gimp-context-set-foreground '(152 152 152))
(gimp-edit-fill bump-layer 0)
(plug-in-bump-map 1 image bump-layer blur-layer 135 27 7 0 0 0 0 TRUE TRUE 2)
(plug-in-gauss-rle2 1 image bump-layer 1 1)
(gimp-image-remove-layer image blur-layer)
(gimp-context-set-gradient "Three bars sin")
(plug-in-gradmap 1 image bump-layer)

(gimp-selection-layer-alpha drawable)
(if (> area 200)
    (gimp-selection-grow image (/ area 160))
    (gimp-selection-grow image 1))
(gimp-selection-invert image)
(gimp-edit-clear horizon-layer)
(gimp-edit-clear bump-layer)
(gimp-selection-none image)

(if (= merge TRUE)
	(begin
		(gimp-image-remove-layer image fond-layer)
		(gimp-image-merge-down image horizon-layer 0)
		(set! layer (car (gimp-image-merge-down image bump-layer 0)))
		(gimp-drawable-set-name layer "Script-fu reflex")
	)
)

(gimp-context-set-background old-bg)
(gimp-context-set-foreground old-fg)
(gimp-context-set-gradient old-gradient)

	)
)



;; ------------------------
;; script pour <image> 
;; ------------------------

(define (script-fu-reflex-logo-alpha image drawable gradient displace merge)

	(let* (
		(drawable (car (gimp-image-get-active-drawable image)))
		(var-select 0)
		(canal 0)
		(old-fg 0) )

  		(gimp-image-undo-group-start image)
    		
		(set! var-select (car (gimp-selection-is-empty image)))
		(if (= var-select TRUE) 
			(begin 
			)
			(begin 
				(set! canal (car (gimp-selection-save image)))
			)
		)
		(gimp-selection-none image)

		(set! old-fg (car (gimp-context-get-foreground)))
		(gimp-context-set-foreground '(0 0 0))

		(set! drawable (car (gimp-layer-copy drawable TRUE)))
		(gimp-layer-set-mode drawable NORMAL-MODE)
		(gimp-image-add-layer image drawable -1)
		(gimp-layer-set-preserve-trans drawable TRUE)
		(gimp-edit-fill drawable FOREGROUND-FILL)
		(gimp-layer-set-preserve-trans drawable FALSE)

		(apply-reflex-logo image drawable gradient displace merge)
    		
		(if (= var-select TRUE) 
			(begin 
			)
			(begin 
				(gimp-selection-load canal)
				(gimp-image-remove-channel image canal)
			)
		)

		(if (= merge TRUE)
			(gimp-image-merge-down image (car (gimp-image-get-active-drawable image)) 0)
			(gimp-image-remove-layer image drawable))

        (gimp-context-set-foreground old-fg)
		(gimp-image-undo-group-end image)
		(gimp-displays-flush)
  )
)

(script-fu-register "script-fu-reflex-logo-alpha"
       _"反射..."
        "反射"
        "Expression"
        "Free"
        "2006"
        "RGBA"
        SF-IMAGE      "Image"        0
        SF-DRAWABLE   "Drawable"     0
        SF-GRADIENT   "Gradient"     "Horizon 2"
        SF-ADJUSTMENT "ずらし量"     '(10 1 20 1 10 0 0)
        SF-TOGGLE     "レイヤー統合" TRUE
)

(script-fu-menu-register "script-fu-reflex-logo-alpha"
		_"<Image>/Filters/Alpha to Logo"
)



;; ------------------------
;; script pour <toolbox> 
;; ------------------------

(define (script-fu-reflex-logo text size font gradient displace merge)

  (let* (
	(image (car (gimp-image-new 256 256 RGB)))
	(bg-layer (car (gimp-layer-new image 256 256 RGBA-IMAGE "Background" 100 NORMAL-MODE)))
	(text-layer (car (gimp-text-fontname image -1 0 0 text 10 TRUE size PIXELS font))))

	(gimp-image-undo-disable image)

    (gimp-drawable-set-name text-layer "Text")
	(gimp-image-resize image (car (gimp-drawable-width text-layer)) (car (gimp-drawable-height text-layer)) 0 0)    	
	(apply-reflex-logo image text-layer gradient displace merge)

	(if (= merge FALSE)
		(begin 
	      (gimp-edit-fill text-layer WHITE-FILL)
	      (gimp-drawable-set-name text-layer "Background")
		)
	)

	(gimp-image-undo-enable image)
	(gimp-display-new image)
  )
)

(script-fu-register "script-fu-reflex-logo"
       _"反射..."
        "反射ロゴ"
        "Expression"
        "Free"
        "2006"
        ""
        SF-STRING     _"Text"               "Reflex"
        SF-ADJUSTMENT _"Font size (pixels)" '(200 2 1000 1 10 0 1)
        SF-FONT       _"Font"               "Cooper Heavy"
        SF-GRADIENT    "Gradient"           "Horizon 2"
        SF-ADJUSTMENT  "ずらし量"           '(10 1 20 1 10 0 0)
        SF-TOGGLE      "レイヤー統合"        FALSE
)

(script-fu-menu-register "script-fu-reflex-logo"
		_"<Image>/File/Create/Logos/追加ロゴ"
)
参考

WEB アーカイブ


タグ:GIMP
posted by lightbox at 2014-12-22 15:40 | GIMP | このブログの読者になる | 更新情報をチェックする

2012年12月15日


GIMP ポータブルの起動できなくなるトラブル『Another instance of GIMP Portable is currently closing. Please wait for it to finish before launching it again.』

以下のようなダイアログが出て、起動できなくなります。



インストールディレクトリの Data フォルダの 以下のようなファイルを削除します。
( このファイルは、通常起動状態で存在し、終了すると削除されるはずのものです )


( PortableApps.comLauncherRuntimeData-GIMPPortable.ini )

情報ソース( PortableApps.com )


タグ:トラブル GIMP
posted by lightbox at 2012-12-15 22:32 | GIMP | このブログの読者になる | 更新情報をチェックする

2012年04月14日


GIMP Portable 2.6.11 Rev 3 のバグに伴う、旧バージョン(2.6.8)のインストールと、インストール時の注意事項

Windows7 で使おうと思ったら結局 2.6.8 を使う事になりました

2.6.12 も 2.7(ベータ)もメニューが反転しない



Windows7 では『クラシック』を使っているのでこうなってしまいました。エアロを利用している場合は問題は出ないはずです。しかし、クラシックを含む『ベーシック』ではこのようになるものもあるのでこれも GIMP Portable のバグです。

対応としては、Windows 側で選択色を変更します







しかし、GIMP のためだけに Windows の見え方をすべて変更する事になるので、2.6.8 を使えばいいとは思います。


WindowsXP でのバグのお話

ずっと、2.6.6 を使っていて、ある操作手順を書こうと思って最新版を入れると、クリップボードから貼り付けた時に画像がずれるという現象が発生しました。



この状態で、Windows のペイントで貼り付けると正しく貼りつきます。こんなバグだとどこかで説明されているかと思いましたが、見つける事ができず、仕方無いので旧バージョンをインストールしようと思い、そのリンクを探したのですがうまく見つける事ができなかったので、最新版のダウンロード URL から親ディレクトリに移動して、そこからたどってみつけました。

PortableApps.com: Portable Software/USB - Browse /GIMP Portable at SourceForge.net



どれがいいか全部試せばいいのですが、日付からして安定しているのは 2.6.8 である可能性が高かったのでそれを使いましたが、気になる人は試してみて下さい。ポータブルは、インストールしてもフォルダができるだけで、削除すればすぐなくなります。

そこで注意事項ですが。

★ 日本語を含むフォルダに入れない。
★ 空白を含むフォルダに入れない

というのは基本条件ですが、あとあとスクリプトの追加等などをする場合、他のフォルダ内に入れてしまうと階層が深くなりすぎますし、権限の問題も出る可能性があるのでC ドライブのルートに入れるのが良い方法です。( 削除もすぐ選択できます )

ただ、この状態のままだとフォルダが無いと言われるので、C: を付加します。





どうしても、2.6.11 の機能が必要な場合( 具体的な事は解りませんが )は、ポータブルでは無い GIMP for Windows を使う必要があります



タグ:トラブル
posted by lightbox at 2012-04-14 10:22 | GIMP | このブログの読者になる | 更新情報をチェックする

2011年06月18日


GIMP : フリーフォントの「ステンドグラス化」

GIMP : 「ステンドグラスロゴ」スクリプトの基本改造

上記リンクにある GIMP 用のスクリプトを使って、フリーフォントの「ステンドグラス化」をしてみたのですが、これが思いの他美しかったので、ご紹介です。

まず、これがフォントのオリジナルですが、デザインフォントでこれは A です。当然他にもありますが、それはご自分で試して下さい。このフォントのダウンロードはこちら。( 現在作者さんのサイトは見つける事ができません )

海外にはとてもたくさんのデザインフォントがありますが、ビットマップ系とベクター系と二種類あって、これはビットマップ系だと思います。こちらができたので、できないフォントはたぶん無いと思います



で、下が完成品。数秒でできます。フォントのサイズによって、ステンドグラスの大きさやできあがり具合が変わります。小さい画像で使う場合は、小さいサイズで作らないと、ステンドグラスの良い味が出無くなります。でもあまり小さくしずきると、輪郭がうまく表現されないので、いろいろやって縮小するといいと思います

フォントサイズ : 600



フォントサイズ : 400




posted by lightbox at 2011-06-18 10:53 | GIMP | このブログの読者になる | 更新情報をチェックする

2009年12月16日


GIMP : フォント作成とキャラクタデザインとScript-fuのロゴ

2009/12/16 更新
ttfedit の使い方のノウハウをまとめました。
リンクを追加しています


フォントを作成して GIMP のScript-fu でステンドグラスなキャラクタ画像を作成する


Sgb_lightbox Sgb_lightbox_a Sgb_lightbox_a2
GIMP2( 高機能グラフィックソフト ) の Script-fu を利用すると、通常のフォントを
使っていろいろなロゴを一瞬で作成できますが、そもそも、フォントを自作すると、
このような事が可能になります


関連する記事
ttfedit の使い方の、とても重要な部分


posted by lightbox at 2009-12-16 21:21 | GIMP | このブログの読者になる | 更新情報をチェックする

2009年11月12日


GIMP : 画像の角を丸くする

Maru10
GIMP : 画像の角を丸くする
画像の角を丸くする事は結局見た目を良くしたいという目的なのでただ丸くすれば良いというものではありません。IE6 がまだ多い現在では、背景を透過させるには 256 色まで落とす必要がありますし、そもそも通常カラーで使わないと見た目が粗くなるので背景色と WEB 上のページ色を一致させる必要がありますし、それにともなってリンク先以外の知識も必要になってきます。 でも、始めないと始まらないし、GIMP はちょっとクセがありますしこの数年のバージョンアップで GUI とか細かいところがころころ変わってますし。 とりあえず現在の 2.6 でやっと日本語対応が完璧になったので覚え時だとは思います。
タグ:画像加工 GIMP
posted by lightbox at 2009-11-12 12:08 | GIMP | このブログの読者になる | 更新情報をチェックする

GIMP : 赤いBOXで強調する

▼ こういう画像にしたいわけですが・・・・
Box03

GIMP の場合、直感的では無い処理なので知らないと全く解りません。

まず、ツールボックスの矩形選択で赤いBOX にしたい範囲を選択します。次に( 後でもいいのですが ) メインの前景色を赤に変更します。( ツールボックスのその部分をダブルクリックするとこのダイアログ )
Box01

▼ これがその処理です( この後先頭の画像になります )
Box02

上記メニューを選択後、線の太さを選択しますがだいたい2ぐらいでいいと思います( ペンの種類も変更できます )



タグ:GIMP 画像加工
posted by lightbox at 2009-11-12 10:58 | GIMP | このブログの読者になる | 更新情報をチェックする

GIMP : 画像を切り取って使う


GIMP(2.6)で、WEB 画像を切り取り
単純なウインドウの画像は、ALT+PrintScreen でクリップボードにコピーされますが、 メニューを開いている状態が欲しい場合や、画像の中の一部分である場合や、 いびつな形状である場合にぴったり必要な部分だけ取得します リンク先ではその基本的な手順を示していますが、そもそも、 PrintScreen でデスクトップ全体を取る場合には、背景が単色でないと 後から困るので メモ帳を使います。 メモ帳を最大化して、背景を真っ白にした上で欲しいウインドウをその手前に表示して、 メニューを開いてデスクトップ全体をコピーしてから加工します。 ▼ こんな感じです Desktop
タグ:GIMP 画像加工
posted by lightbox at 2009-11-12 10:28 | GIMP | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり