こんにちは。ぽこぱぱです。
今回はアイキャッチ画像を設定してみました。アイキャッチ画像の他にもヘッダーの背景やヘッダーのロゴを設定しました。
特にヘッダーは苦戦しました。いったいどのサイズで作ればいいのか…。何ピクセルだよ…と。
という事で、ぽこぱぱブログと一緒のサイズ感でよければブログ後半に載せいています。ご覧ください。
オリジナルイラストはいい！
ぽこぱぱブログのイラストは私の奥さんである「ぽこまま」にかいてもらっています。
ぽこままにオリジナルのイラストとロゴを描いてもらったので、当然ですが、ぐぐっとオリジナリティが増しました。
そりゃそうですよね。だって他にはどこにもないわけですから。オンリーワンのデザインです。
これで他のブログと差別化がはかれた気がします。私が書くブログの記事の内容は置いといて。。
見た目を変えるという点ではオリジナルイラストはおすすめです！
ぽこままがフォトショップでイラストを描き、私がそのイラスト素材をフォトショップで組み合わせてアイキャッチや背景を作りました。
設定は難しかった。。PC用とスマホ用どちらにも上手く表示されるようにイラストを配置しなければいけない。。
なかなか検索しても画像のサイズがでてこないので、一つ一つ手作業でやりました。トータルでトライアンドエラーを１０回は繰り返したか。。
色々検索するより自分で試行錯誤しながらやった方が早いこともありますね。。
ヘッダー背景画像&ヘッダーロゴの解像度
ということで、皆さんは困らないようにWordPressでcocoonを使っていた場合のヘッダー背景画像とヘッダーロゴの解像度のガイドをのっけます。これで作るべき画像の幅と高さがわかります。
私のブログと同じ感じでよければ下記画像を参考にしてください。
ヘッダー背景画像は幅１９００ピクセル×高さ２００ピクセル
ヘッダーロゴは幅３００ピクセル×高さ８０ピクセル
背景画像とヘッダーロゴは別々に作ってます。
どちらも拡張子はPNGです。特にヘッダーロゴは背景を透過させたかったのでPNGです。
これでPCでも、スマホでもいい感じで表示されるはずです！
大きすぎて見切れることも少なくなるのではないでしょうか？
上手くいかなければご自分で微調整してみてください！
皆さんのお役にたったら嬉しいです！よければ他の記事も見ていってください。
私もまだまだブログの初心者でありますが、つまづくことも多々あります。その度に試行錯誤を重ねて解決します。その答えを皆様に共有していこうと思っています。
ではまた。
コメント