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

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

アラフォーふんわりマグママのブロ...
404 NOT FOUND | アラフォーふんわりマグママのブログ 暮らしが楽しくなるためにできること

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

コクーンで変更した設定

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

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

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

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

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

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

私も販売できるヘッダーを作れるようになりたいなと思います(*´˘`)

この記事を書いた人

ゆるかわいいイラストを描くブロガーฅʕ。•ᴗ•。ʔฅ
⚪︎LINEスタンプ・絵文字
꒰大人可愛いカフェシリーズ ꒱販売中♫
⚪︎シマエナガのスマホ無料壁紙 公開中♩
⚪︎子育て漫画 ꒰ ほのぼの大福猫まんが ꒱
⚪︎デザイナーを目指す中で得た情報を発信*。
swell運営・Xサーバー使用

当ブログ使用中《Xサーバー》PR

コメント

コメントする

CAPTCHA


目次