ヘッダーに画像をペタペタ貼った感じにする

以下のようにヘッダー部分に画像を散りばめたような感じにする方法についての覚書です。

sgsfgsfs

WordPress.com には、「外観」→「ヘッダー」より

sfgsgdsf

ヘッダー画像を差し替えることができるテーマが数多くあります。

szdgfdgdf

私の場合、ヘッダー画像を編集するときは、「Inkscape 」を使うことが多いです。

fdgsdfgsf

例えば、Skitch などで適当な画像を画面から切り取り、一旦、パソコンに保存し、

gsfgsdfgs

「ファイル」→「インポート」より

X11

その画像を選択すると、

sgsfdgdf

以下のような感じで Inkscape の編集画面に画像を貼り付けることができます。この後、マウスを使って、それぞれの画像の位置や大きさを調節したり、回転させたりします。

sgsdfgsfd

Inkscape から編集した画像をパソコンに保存するとき、その大きさを指定する方法はいくつかありますが、私の場合、ページの大きさを指定することが多いです。

ページの大きさは、「ファイル」→「ドキュメントの設定」のところの

sfgsfgfsd

「カスタムサイズ」というところの数値で調整します。

sfhgsfgsfd

入力する数値は、WordPress.com の方で推奨されている値を入力しておくと無駄がありません。例えば、テーマ「Twenty Eleven 」の場合は、幅 1000px、高さ 288px が推奨値です。なお、あとからトリミング機能でサイズ調整できるので、推奨値がよくわからないときは、大きめにしておけば OK かと思います。

sdgdsfgfds

Inkscape で編集した画像を「ファイル」→「ビットマップにエクスポート」よりパソコンに保存します。保存形式は png となります。なお、編集したファイルは svg 形式で保存しておけば、あとからまた再利用することができます。

sdfgsfgsf

保存する画像の大きさがページの大きさになるように「ページ」ボタンをクリックしておきます。

gfsfgsdf

ファイル名を適宜、入力し、

agsdfgsd

「エクスポート」ボタンを押すと、Inkscape で編集したものがページの大きさで保存されます。ページからはみ出ている部分はカットされます。

dgsdfgdf

パソコンに保存した画像を「外観」→ 「ヘッダー」の以下の場所にドラッグ&ドロップし、

fgsdgdf

「アップロード」ボタンを押し、

dfgdfgd

適宜、切り取り範囲を指定して左のボタンを押すか、そのまま右のボタンを押せば、Inkscape で編集した画像がヘッダー画像として適用されます。

dfadafda

例えば、以下のような感じでヘッダー画像が表示されるようになります。

sgsfgsfs

Inkscape でヘッダー画像を作成しておくと、画像の背景が透明の状態でできあがるので、あとあと、背景色を変更したり、

adfafadf

例えば、「Ultimate CSS Gradient Generator 」を使って、グラデーションをかけたりすることができます。

gfsdfsadsa

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

%d人のブロガーが「いいね」をつけました。