【初心者】ヘッダー作成/サイズやデザインまとめ

PC
この記事は約3分で読めます。
悪魔ちゃん
悪魔ちゃん

パソコンの知識は学校の授業までしかないです。 それも必要最低限のです。

WordとExcel、PowerPointをちょっと習ったぐらい。 プログラミングやIT業界の方たち尊敬です。簡単なことは「いじっちゃえ!」でできますがググらないと私一人ではできないです( ;∀;)

ヘッダー操作画面に入る

ワードプレスにログイン → ダッシュボード → 外観 → ヘッダー

上記の順で入ればヘッダー画像追加し編集できます

悪魔ちゃんのこのブログでは、子テーマ『コクーン』使用しているのでヘッダーの編集方法の入り方が異なります。


コクーンの場合

ワードプレスにログイン → ダッシュボード → cocoon設定 → ヘッダー

トップページ(ホーム)の構成

ページレイアウト

シンプルですが味気ない感じもします。

メニューの位置も変更できるので自分の好みの場所に配置しましょう。

ヘッダー色グローバルナビ色を変更するだけでも印象が明るくなります。

「ヘッダーなんてどんなんでもいい!」「時間がない」、「まずは内容でしょ!」っていうかたも色だけでも初期設定から変更するだけでいいと思います。

姉さん
姉さん

お前センスのかけらもないな!色合いやばいやんけ!

悪魔[裏]ちゃん

試しにやってみてるだけやし。はい、無視しとこ。

オリジナルヘッダー画像にする場合

ヘッダーロゴ

選択 → メディアライブラリー または ドロップorフォルダ内画像アップロード
無料画像やフリーで使用可の画像、自分の取った写真、自分が作ったオリジナル画像を選択すればOK!※著作権や肖像権などに注意 オリジナルではない場合は商用利用可!と記載があるものを使用しましょう。
950×250で作成してみました。

ヘッダー画像の推奨サイズは950×250ピクセル

ヘッダーにしてみたらこんな感じになりました。モバイルでは問題なさそうです!

パソコンよりもブログはほぼスマホで読ませることが多いのでサイズ困ったらモバイルの配置で調整した方がいいです。

ヘッダー背景画像/簡単

背景色によってはブログ名の文字色を変更しないとですが、1番簡単でオリジナリティーを表現できます。

↑私の好きなセブチのグループカラーをヘッダー背景画像にするとこんな感じになりました。

スマホ内にある写真の一部をトリミングしてヘッダーにするのもありです!

オリジナルロゴを作るサイト

①「フリーフォントで簡単ロゴ作成」オリジナリティーあふれるロゴ文字が無料で作成できます。

フリーフォントで簡単ロゴ作成 | キーボード画像作成 | アイコン・はんこ画像作成
フリーフォントを使ったロゴ作成やいろいろな素材の作成が可能なツール。フリーフォントを使ったキーボード画像の作成。フリーフォントを使ったアイコン画像の作成。フリーフォントを使ったはんこ画像の作成。ほとんどのフォントで書いた文章をPDFとしても出力できるWEBサービス。

②「canva」グーグルで登録するだけ無料画像+文字も入れれます

無料背景画像をアップロードして文字を入れるだけでも活用できるので重用しています。

 https://www.canva.com/

①「ぱたくそ」https://www.pakutaso.com/

②「pixabay」

Attention Required! | Cloudflare

③「unsplash」

Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

④「ピくタス」

登録することが煩わしいサイトもありますが、無料なので仕方ないです。

blog名、キャッチフレーズの変更方法

設定 → 一般 → ブログ名 → キャッチフレーズ

コクーン設定 → タイトルからも編集できます。

おすすめはヘッダー背景画像にすることです。スマホやPC以外の端末で見たとしてもヘッダーのサイズがおかしいということはないみたいです。

悪魔[裏]ちゃん

記事よりも先にブログデザインに凝ってしまっています。またヘッダー編集できるように自分への健忘録としても記事にしてみました。

blog初心者さんの参考になれば嬉しいです。

コメント

タイトルとURLをコピーしました