【WordPress Cocoonヘッダーサイズとdpi】私のブログのヘッダー

ワードプレス コクーンのヘッダーを作ってみました❕このブログのものです。🌱
記録をかねて情報をシェアさせていただきますね( ⸝⸝•ᴗ•⸝⸝ )੭⁾⁾

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もあり、他にもたくさん選べて保存も出来ます。

こちらのブログに詳しく書いています🪴✨

アラフォーふんわりマグママのブロ...
iPad【プロクリエイト】エアドロップでMacへバックアップ方法とファイル保存形式のメモ Procreate(iPad用の1220円買い切りのお絵かきソフト)を使っています。データのバックアップやファイル形式をどうしようか迷ったので調べながら決めましたので、記録もか...

別のサイトやアプリを使えばpngのままでも圧縮できると思います。

コクーンで変更した設定

作ったヘッダーを入れる場所

ダッシュボード<cocoon設定<ヘッダー<ヘッダーのロゴ

この時ヘッダーロゴの下のヘッダーロゴサイズを入力しないで空欄のままにします。
ヘッダーロゴサイズを指定すると1600までしか入りません。

ヘッダーの上の文字を消す

キャッチフレーズの配置<ヘッダートップ(デフォルト)→ 表示しないへ変更

以上です♪
素敵なヘッダーを作って楽しいブログライフが送れますように🌱

私もサービスとしてヘッダーを作れるようになれるようにがんばります(*´˘`)

コメント

コメントする

CAPTCHA


目次