WordPressの「Cocoon」ヘッダー画像、ロゴサイズなどの設定方法。
WordPressで人気テーマCocoonのヘッダー画像サイズと設定方法説明したいと思います。
自分のメモとして残してもいいと思って記事書いてみました。さぁ、頑張ってサイトをかっこよくにしましょう。
1. まずはCocoon設定=>Cocoon設定を選択する
2.ヘッダーを選択する。
更新する前はこんな感じです。
ここで大事なこと忘れてしまい。ヘッダー画像とロゴ画像の用意が必要です。
まず商用利用可能な写真画像サイトこちらの記事でいくつか紹介していますのでぜひ使ってみてください。私一番おすすめのフリー素材サイトはpixabayです。
画像を決めたら、photoshopで画像サイズを調整しましよう。どんな拡大されても画質悪くならない一番ベストのヘッダー幅は1240pxです。PhotoShopで幅1240pxの画像作りましょう。
こちらのヘッダー背景画像作ってみました。
早速設定していきましょう。
3.ここに上の富士山画像を設定して、変更をまとめて保存を選択する。
そうするとこうなりました。かっこよくになったね。
4.真ん中のapp1st.comがかっこ悪すぎるのでロゴ画像作成しにいきましょう。
今回ロゴ画像の作成は紹介しないですが別の記事に書きます。作成したロゴはこちらになります。
5. ロゴ画像設定します。
設定して保存するとさらにかっこよくなりましたね。
以上はヘッダー画像とログ画像の設定メモでした。国内最大級の写真素材販売サイト【PIXTA】
WordPressおすすめ本ランキング
最新WordPress 5.xに対応！ 独自テーマ作成からカスタマイズ、プラグイン活用、効率的なサイト運用まで、WordPressを使って本格的なWebサイトを構築するためのスキルが身につきます。クライアントワークで必要とされるノウハウも満載。ぜひ手元に置いておきたい1冊です。
知識ゼロから体系的に学べる!HTMLとCSSの基本。最新の技術に対応!レスポンシブ、Flexbox、CSSグリッド。手を動かしながら学べる!プロの現場で役立つテクニック。コードの知識からデザインのことまで1冊ですべて学べる!
新エディタグーテンベルクがきちんと機能するテーマを作る。Webページのデザインを「グーテンベルグ」でプレビューできるテーマを作成。モバイルファーストでレスポンジブなサイトの構築。1カラムのレイアウトを最初に、次に大きな画面の2段組みレイアウトを作成。カスタマイズに必要な基礎知識を解説。WordPressのテンプレートタグ、HTMLやスタイルシートのポイントも解説。基礎が身に付くと評判の定番書が最新バージョンに対応!
ループの意味がわかる!フックも使いこなせる!Gutenbergの仕組みもわかる!WordPress5.x対応!!
WordPressによるWebサイト制作のための、究極のレシピ集。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。
