背景にグラデーションを入れる

背景にグラデーションを入れる方法についての覚書です。

gradation54

まず、グラデーションの入った画像を作成します。グラデーションの入った画像を作成するにあたっては、以下のウェブサイトを利用します。「Inkscape」などのフリーソフトを使っても構いません。

gradation39
Gradient generator – GRADCOLOR

「SIZE」のところで、グラデーションの長さを適当に調整します。

gradation40

「COLORS」のところでグラデーションの色を調整します。

gradation41

「GENERATE」をクリック。

gradation42

以下のような表示になります。

gradation43

プレビュー画像の下にある「Save as:×××.png」をクリック。

gradation44

パソコンにグラデーション画像を保存します。

gradation45

保存した画像はこんな感じのひょろ長いものになります。

Jghr2K

WordPress.comの方へ移り、「外観」→「背景」をクリック。

gradation46

さきほどダウンロードした画像を

gradation47

WordPress.comの方へアップロードします。

gradation48

すると以下のような画面になります。

gradation49

「繰り返し」のところで「水平方向に繰り返し」にチェックを入れます。

gradation50

「色」のところで背景色を「#ffffff」(白色)に調整します。

gradation52

「変更を保存」をクリック。

gradation53

以上の操作で背景にグラデーションが入ります。

gradation54

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中