ブログ始めて２ヶ月目に入り、ようやくTwitterを始めて、
いろんな方のブログを見るようになりました。
(絶対遅いですよねー。ブログ開設１ヶ月目にやることですよねー😭)
そこでふと思ったのが、
ゆきしろ他の人より私のブログデザインシンプルすぎる！！
ということで、いろいろ調べながら自分のブログをアップグレードすることを決意。
ヘッダーとは？
ブログタイトルの背景に画像を入れたいと思いましたが、
どこで設定を変えたらいいか分からず・・・・。
調べてみると私が変えたいところはヘッダーという部分らしいです。
この赤い枠の部分がヘッダー部分で、
ここに画像を入れると寂しいデザインのブログが一気に変わります！
ヘッダー画像を変えてみよう！
ヘッダー画像の選定
まず最初にどんな画像にするのか決めておきます。
将来はヘッダー画像のデザインを外注して
自分だけのオリジナル画像を作れたら素敵だなと思いますが、
とりあえず私はフリー素材のサイトから自分の気に入ったものを選びました。
ヘッダー画像の設定方法
まずワードプレスの管理者画面から
Cocoon設定クリックし、ヘッダーを選びます。
そしたらそのまま下へスクロールすると
ヘッダー背景画像というところがあります。
そこの選択をクリックして、先ほど自分で選んだ画像をアップロードします。
無事にファイルのアップロードが完了するとこんな感じになります⇩
最後に必ず一番下までスクロールし、
変更をまとめて保存というボタンをクリックします。
そして自分のブログを見てみると・・・
殺風景だったブログデザインが一気におしゃれに変わっています！
しかし何となくヘッダー画像の縦の幅が狭いような気がするので、
幅もさっきのヘッダー設定のページで変えていきます！
ヘッダー画像の高さの設定方法
Cocoon設定⇒ヘッダー設定ページに戻ると
高さと書いてあるところがあります。
赤い四角はPC用の設定で
緑の四角はモバイル用の設定です。
画像の高さは好みがあると思うので
自分の気に入る高さを探していきます。
最初はPCでの最大数800px、モバイルでの最大数600pxを試しに設定し、
そこから微調整していくのがおすすめです！
ヘッダーメニューの色設定
ヘッダー下部分にあるメニュー(赤枠部分)が
白くて物足りないという方は色の設定ができます。
Cocoon設定⇒ヘッダーをクリック
下へスクロールし、グローバルナビメニュー色のところで好きな色に変えられます。
色を選択を押すと下の画像のように
様々な色が出てくるので、好きな色をクリックして色を選びます。
もう少し詳細に色を見たい方は
グローバルメニュー色の隣にある黄色の三角形のマークに
カーソルを合わせると色見本が出てくるので、細かな色設定ができます。
＃から始まるHTML COLORをコピーして
色を選択とクリアボタンの間にある空白(赤い枠部分)に貼り付ければOKです。
【番外編】ヘッダー画像の謎の線を消す
お気付きの方もいると思いますが、
ブログタイトルの上下に青い線があります。
ゆきしろなんじゃこりぁああああ！！！！！
スキンの設定に問題があるのか！？
色々試してみましたが消えません。
ふと思い出したのは私が唯一入れたコードのことです。
見出しをカスタマイズした際、
タイトルのデザインがシンプルすぎたのでH1の設定もしていたのです。
外観⇒テーマファイルエディター⇒スタイルシート
ここにH1の設定を入れていたので、
それが反映されていたようです。
H1の設定を消すと綺麗に線が消えました！！
自分の入れた設定は覚えておかないといけませんね(´・ω・`)
これに気付くのに時間が掛かったので
番外編として記載しておきます。
コメント