Simplicityでヘッダー画像を自分の好きな写真に変える方法(複数枚を並べるテク)

https://farm6.static.flickr.com/5762/20919637280_707214c8c3.jpg

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております!

たけPに先日作ってもらった、ヘッダー画像ですが、色々と微調整が必要になりました

部長ナビのページ

この記事ですが、ちゃぼPが、トップページの表示を変えているのを見て、「俺もgori.me風にしてみたい!」と思ったんですけど、gori.me見れば分かりますが、ヘッダーがスゲースッキリしているんですよね

んで、「ウチのヘッダーもちょっとスッキリさせるか」ということで、たけPに聞いてみたら、「Photo Gridで出来るよ」と言われたので、え?と思ってやってみることにしました

ヘッダー画像の変更

スポンサーリンク

Photo Grid使ったら、マジで簡単にできた

↑これね。コレ使ったらすぐ出来た

使い方その1 写真を選ぶ

まずは、写真を選びましょう。ウチはMAXの9枚選びました

使い方その2 縦並びを横並びに変える

横並びにします。まあ、当然だ。

使い方その3 縦横比を決める

ウチは、3:4かな?適当です。適当

使い方その4 効果を付ける

セピア調になるように効果を付けます

使い方その5 終わり

ハイ、終了。コレで終わり。

その後、Photoshopで、大きさを「縦200」に変えましょう

縦200にすると、何かと都合が良いので、縦200にします。コレで終了

WordPressの管理画面で「ヘッダー画像」をアップロードする

アップロードして、縦幅を変更します。ウチは、175かな?なんかよくわからないんだけど、200じゃないんだよね。ええ。よくわかりません。iPadで見ても大丈夫なので、大丈夫なのでしょう

ロゴも変えちゃおう!

良く聞かれる「ロゴ」ですけど、これ、Photoshopで簡単にできます。フォント選んで、後は字を書いて、キャンパスサイズ決めて、背景のレイヤー取って、PNGで保存するだけです。簡単ですので、やってみてくださいね。

ヘッダー画像を縦幅狭くしたので、ロゴも1行にしてみました。今、ロゴについては色々と動きがありますが、とりあえずコレで様子見です。

で、モバイルも変えてみた

ロゴを1行にすることで、モバイルの表示が崩れたので、モバイルのヘッダー画像も変更しました。チョチョイのチョイですな。Photo Gridスゲえ!あっという間に出来るぜ!

モバイルも、WordPressの管理画面のヘッダー画像変更からいけます。写真の枚数を調整すると、色々と違った表示になるので、何回かやってみると良いと思います

まだ、微調整するけど、やり方はわかった

今は、PC版は、「nabi1080.com」に、私の顔がかぶっているので、写真の順番は変えないとイケませんね。それは今後、調整していきたいと思いますが、今週末まではコレで様子見ながらチョコチョコ変えていきます。

Simplicityだと、素敵にヘッダー画像が変更できますので、Photo Gridとあわせて、ナイスなオリジナルヘッダー画像を作ってみて下さいね!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

この記事の関連カテゴリ

サイト内検索