simplicityの進化は日進月歩
simplicityは優れたテーマで更新機会がかなり頻繁にある。
その度にブラッシュアップされてより使いやすくなっている。稚拙な表現だが凄いとしか言いようがない。
更新が多い分、以前はできなかったことがダッシュボードでできるようになっていることがある。その一つがヘッダーに画面いっぱいに大きな画像を入れるということだ。
ヘッダーに大きな画像を入れる
自分のブログをカスタマイズするために他の方のブログを見ることがあるだろう。私も見ているとヘッダー（サイト表示の一番上の部分）に横幅いっぱい、それに縦も大きな画像を入れているブログを散見する。オシャレだな―と思う。自分もやってみたいなーと思う。
以前は、自身でCSSをいじってやるより仕方がなかったが、今ではダッシュボードでコードを書かずにできるという。そのやり方を簡潔にまとめてみた。
1.好きな画像を探す
まずはヘッダーに入れるための画像を探そう。著作権ルールがあるので自分で撮影した写真か、無料の著作権フリーのサイトでということになる。
そこで思いつきがちなのが、「写真AC」というサイト。点数は多いし日本語サイトなので利便性も申し分ないが、いかんせんフォトジェニックというかセンスのある写真を探すのに一苦労する。
そこでおすすめなのが、「Gratisography」と「IM FREE」というサイトだ。ググってもらってサイトを見れば一目瞭然だが、センスの良い写真が多数ある。そこから一枚、気に入った写真を拾ってくる。
2.写真の大きさを変更する
拾ってきたら写真をヘッダーに収まるちょうどよい大きさに加工しよう。画像加工ソフトがなければ、Windows付属の「ペイント」で加工する。加工といってもシンプルなものだ。手順は以下。
ペイントを立ち上げる
↓
デスクトップにでも保存した画像をドラック＆ドロップでペイントに貼り付ける
↓
左上の「サイズ変更」をクリック
↓
「単位（B）：●パーセント ○ピクセル」の欄のピクセルをクリック
↓
「水平方向（H）：」の欄に1280px前後の数値を入力して「OK」をクリック
↓
左上の「ファイル」から「名前をつけて保存」で適当に名前をつけて保存
これで完成。
3.ヘッダーに画像を入れる
画像が完成したら次はワードプレスにログインして、ヘッダーに画像を入れる。手順は以下。
ワードプレスにログインする
↓
「管理メニュー」→「カスタマイズ」→上の方にある「ヘッダー」をクリック。
↓
「ヘッダー」の欄に「ヘッダー外側背景画像」があるので、その下の「画像を選択」をクリック
↓
「ファイルをアップロード」を選択し、デスクトップなどにある先ほど大きさを調整した画像をドラック&ドロップor「ファイルを選択」から進んでアップロードをする。
↓
アップロードしたら、「画像を選択」でその画像を指定。
これでヘッダーに画像が入る。しかし、デフォルトでは縦幅が100pxとなっているので、小さくなっているだろう。これを変更する。
同じヘッダー内にある「ヘッダーの高さpx（デフォルト：100）」の下にある数値を300や400など自分の好みの大きさに変える。
↓
これで良かったら一番上の「保存して公開」をクリック。
これでヘッダーに大きな画像が入ったはずだ。しかし、縦のピクセルが300pxや400pxだと上下が切れてしまっていることがあるだろう。その場合は、再度ペイントで大きさを調整してほしい。手順は以下だ。
先程の画像（加工前の元の画像の方が調整が利きやすいかもしれない）を再度ペイントにドラッグ&ドロップ。
↓
「サイズ変更」→「ピクセル」→1400px辺りに設定する。（ヘッダー画像の横のピクセルが1280px程だからだ）
↓
ヘッダーに入れたい部分を切り取る。1280px前後、縦は640pxに近しくなるように。切り取りのやりかたは、上の欄の「選択」をクリックし、画像にマウスを持っていき、クリックしたまま指を話さずにマウスの動きで範囲を指定。切り取り線のような形がでてくるはずだ。そのマウスを動かしているときに、下の数値が変動している。これがピクセル数（px）だ。それを丁度、1280px前後、縦は640pxになるように調整。
↓
うまい具合に切り取り線を引けたら、切り取り線内部で右クリックして、「切り取り」を選択。そうしたら、白く抜ける。次は、「サイズ変更」をクリックして「水平方向（H）：」欄に「1」と入力。すると画像がめちゃくちゃ小さくなるから、今度はキーボードの「CTRL」と「V」を同時押しして、先程切り抜いた画像を貼り付ける。そうしたら画像が出てくる。それを左上の「ファイル」をクリックして「名前をつけて保存」で保存する。
↓
先程と同じ点順で、「ヘッダー外側背景画像」の下の「画像を選択」で、今しがた大きさを調整した画像をアップして「画像の選択」をクリック。
これで画像がはまっているはずだ。
サイトタイトルを中央寄せにする
ここからは根気の勝負になるが、見せたい画像の範囲が気に入らなかったら、「ヘッダーの高さ」とペイントでの画像の大きさ調整のバランスを取っていくことになるだろう。
さらに言えば、画像によっては画像の背景色のせいでタイトルやその説明文が目立たなくなってしまうこともある。
その場合はタイトルを中央寄せしてみてはどうだろうか。やり方は下記。
ワードプレスにログイン
↓
「管理メニュー」→「テーマの編集」をクリック。すると、
@charset “UTF-8”;
/*!
Theme Name: Simplicity2 child
Template: simplicity2
Version: 20161002
*//* Simplicity子テーマ用のスタイルを書く */
といった文字が出てくるだろう。その「/* Simplicity子テーマ用のスタイルを書く */」の下に以下をコピペ。これはSimplicityの開発者の方が公開してくれているコードだ。
#header .alignleft {
text-align: center;
max-width: none;
width: calc(100% - 60px);
}
#h-top #site-title a{
margin-right: 0 !important;
}
#site-description{
margin-right: 0;
}
#header .alignright {
display: none;
}
これで「ファイル更新」をクリックするとサイトタイトルが中央になっている。「ファイル更新」を押しても、中央寄せにならないという人は、プライベートウィンドウで自分のサイトを見てみると良いだろう。きちんと変わっていることがある。
まとめ
それでも気に食わないという人は、画像を変更したりサイトタイトルをロゴにして目立たせるという手もある。
一度カスタマイズにはまると時間を忘れてのめり込んでしまうはずだ。つまりサイトのコーティングが趣味になる可能性もあるということだ。しかもコーティングスキルがつくというおまけつき。ただ、ハマりすぎるとカスタマイズばかりに執心してしまって肝心のブログ更新に興味がいかなくなることもあるので要注意。悪いことでもないと思うが。
コメント