wordpress default theme ヘッダの画像を変更 その2
2009 年 2 月 3 日wordpressテーマのヘッダー？上部の画像のデザインを変更しやすくしてみた。
デフォルトの画像を加工、編集
img/kubrickheader.jpg を編集して外枠を残し中の色？のところを削除しホワイトでペイント。
このファイルの表示は、style.css の#headerでファイルを指定してる
#header {
background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
}
style.cssの編集
style.cssの#headerの下の#headerimgにbackground-imageを追加、add.jpgというファイルを表示させるようにする。
#headerimg {
background-image: url('images/add.jpg') ;
background-repeat: no-repeat;
background-position: 50% 20px;
margin: 7px 9px 0;
height: 192px;
width: 740px;
}
ではadd.jpgをどうやって作るか？
ImageMagickを利用して画像ファイルを加工してみた。
まず、大きさを convert -geometryを使って変える
$ convert -geometry 680×170 $1 add2.jpg
このコマンドは最大で横が680pixel、縦が170pixelになる。
例えば横が905pixel,縦が425pixelの画像ファイルの場合、362×170になる。680×319にはならない。
縦か横か、どちらかの最大が680か170になり680×170の枠の中に収まる。
（縦長の画像の時は、縦がきっちり収まり、横が足らないことになり
横長の画像の時は、横がきっちり収まり、縦が足らないことになる）
画像のコーナーを丸くする
長方形の画像だと、硬い？イメージなので、角を丸く柔らかいイメージに加工する。デフォルトの画像がそうであったように。
＄xyは画像の大きさ「362×170」とかである。$xは横の長さ「362」$yは縦の長さ「170」が入る。
$ convert -size $xy xc:none -fill white -draw “roundRectangle 0,0 $x,$y 8,8″ add2.jpg -compose SrcIn -composite add.png
pngは透過性がでる処理をされているが、ファイル容量が大きくなるのでjpgに変換、透過のところはホワイトに。
$ convert add.png -background white -flatten add.jpg
スクリプトにして以下のようになる。引数は加工する画像ファイル名
#!/bin/sh convert -geometry 680x170 $1 add2.jpg var=$(identify add2.jpg |cut -d ' ' -f 3 ) x=$(echo $var |cut -d 'x' -f 1 ) y=$(echo $var |cut -d 'x' -f 2 ) convert -size $xy xc:none -fill white -draw "roundRectangle 0,0 $x,$y 8,8" add2.jpg -compose SrcIn -composite add.png convert add.png -background white -flatten add.jpg
画像ファイルをアップロードしてコマンドでヘッダーの画像を変えることができるようなった。