ワードプレス コクーンのヘッダーを作ってみました❕このブログのものです。🌱
記録をかねて情報をシェアさせていただきますね( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾
2022年6月2日追記：夏仕様のヘッダーでもっとスッキリさせました🍋✨
2022年10月3日追記：現在はテーマをswell/スウェルに変えました。
ヘッダーサイズが変わったのでデザインも変えています。
cocoonのヘッダーの適切はサイズ・DPIはどれくらい？
最近は、ヘッダーの高さを短くしている人が多いですね。
スッキリ見えてスマートな印象だからでしょうか。目的の記事にもより早く辿り着けますものね。
その場合、ヘッダー全体背景色を決めて、ヘッダーロゴだけ設定しているのではないかなと思います。
好みもあると思いますので、一概にこのサイズが良いとは言いにくいと思うのですが、
このブログはデザイン専用のブログなので、高さをあえて大きめの600にしてみましたが、
ヘッダーが結構大きくなるので、通常は高さ300とか350 位が良いのかなと思います。
ヘッダーサイズ 横幅1900pixl × 縦幅 600pixl。300dpiです。
横幅はパソコン画面で見たときにcocoonの初期のテンプレートに合っている幅だと思いますので広めに取りました。
ヘッダーサイズは1240pxが拡大されても画質がわるくならないようではありますが、
個人的には横幅はパソコンで見た時にコクーンのテンプレートには短いように思います。
一度試してで作って入れて見たらイメージしやすいと思います。
画像を軽量化する
そのままだと重いので軽量化します。
方法は何でもいいと思いますが、私のやり方をメモをしておきますね。
フォトショップを使いました。
デジタル画（プロクリエイト）で作る＜フォトショップに移動して文字入れ＜psdで保存
＜完成品は jpeg で保存したらデータが軽くなった！
- サイズはそのままに一度72dpiにしてjpegで保存してみましたが、
なぜかすごく画像が粗くなってしまったので300dpiのままにしましたが、
それでもjpegの拡張子を選ぶととても軽くなりました。
113KBです。かなり圧縮されますね。画質も大丈夫でした。
（jpegは保存を繰り返すと劣化するのでご注意を。）
- ちなみに、フォトショップの拡張子、psdだと12.9 MB。
- pngの大きいファイルサイズ（最速保存）だと、1.1M。
中程度のファイルサイズ（中速保存）だと1M。
最小のファイルサイズ（最低速保存）でも1Mでした。（画質も大丈夫でした。）
別のブログにも書きましたが、
フォトショップで別名で保存をすると、拡張子が4個（2022年3月現在）しか選べない事がありますが、（多分透過してるレイヤーが入ってる場合）
その横のコピーを選択するとJpegもpngもあり、他にもたくさん選べて保存も出来ます。
こちらのブログに詳しく書いています🪴✨
別のサイトやアプリを使えばpngのままでも圧縮できると思います。
コクーンで変更した設定
作ったヘッダーを入れる場所
ダッシュボード＜cocoon設定＜ヘッダー＜ヘッダーのロゴ
この時ヘッダーロゴの下のヘッダーロゴサイズを入力しないで空欄のままにします。
ヘッダーロゴサイズを指定すると1600までしか入りません。
ヘッダーの上の文字を消す
キャッチフレーズの配置＜ヘッダートップ（デフォルト）→ 表示しないへ変更
以上です♪
素敵なヘッダーを作って楽しいブログライフが送れますように🌱
私も販売できるヘッダーを作れるようになりたいなと思います(*´˘`)
コメント