![](https://harublog.site/wp-content/uploads/2019/11/F97C7AC4-3523-47E5-A688-81FC7D391954-150x150.jpeg)
どうもハルです。
僕はWordPressでブログを作っています。
テーマは「Cocoon」を使っています。
今回はヘッダーにイラストロゴを貼り付けるやり方を紹介します。
難しい事は一切ない簡単カスタマイズでおすすめです。
![](https://harublog.site/wp-content/uploads/2019/11/1header.png)
↑貼りつけたい画像はこれです。↑
画像形式はPNG形式、サイズは400×200pxです。
ipadにアップルペンシルで描きました。
アプリはAffinity Designerです。
![](https://harublog.site/wp-content/uploads/2019/11/images.jpg)
Affinity Designer
「イラレ」と「フォトショ」が一緒になったようなアプリで、慣れれば結構使えるのでおすすめです。
Cocoo設定でヘッダーのカスタマイズ
まずはWordPressのダッシュボードに入ります。
![](https://harublog.site/wp-content/uploads/2019/11/2header-1024x562.png)
左側の「Cocoon設定」→「Cocoon設定」をクリック
![](https://harublog.site/wp-content/uploads/2019/11/3header.png)
上の方にある「ヘッダー」タブをクリック
![](https://harublog.site/wp-content/uploads/2019/11/4header-1024x560.png)
少し下の方に行くとヘッダーロゴがあるので「編集」をクリック
![](https://harublog.site/wp-content/uploads/2019/11/5header.png)
画像選択画面が出るので左上の「ファイルをアップロード」をクリック
![](https://harublog.site/wp-content/uploads/2019/11/6header-1024x541.png)
「ファイル選択」をクリック
(またはPCだとここに直接ファイルをドロップできます。)
そのあとアップロードしたい画像を選択します。
![](https://harublog.site/wp-content/uploads/2019/11/7header-1024x544.png)
ファイルを選択したら画像がアップロードされるので、チェックをいれて「画像を選択」をクリック
![](https://harublog.site/wp-content/uploads/2019/11/8header-1024x544.png)
画像が表示されます
![](https://harublog.site/wp-content/uploads/2019/11/9header-1024x560.png)
上の方にある「変更をまとめて保存」をクリック
![](https://harublog.site/wp-content/uploads/2019/11/10header.png)
プレビュー画面に画像が表示されます
![](https://harublog.site/wp-content/uploads/2019/11/11header-1024x563.png)
![](https://harublog.site/wp-content/uploads/2019/11/F97C7AC4-3523-47E5-A688-81FC7D391954-150x150.jpeg)
以上です、すごい簡単でしょ?
それではサイトをみてみましょう!
ちゃんと表示されてますね。
![](https://harublog.site/wp-content/uploads/2019/11/12header-1024x564.png)
それぞれの記事にも反映されてますし、カーソルをあわせればTOP画面の飛ぶこともできます。
携帯画面だとこのように表示されます。
![](https://harublog.site/wp-content/uploads/2019/11/IMG_1977.jpg)
高さを200ピクセルしてますが。 画像を作る段階で調整すれば低くもできます。
以上になります。スタイルシート直接編集ではないのでトラブルも少ないです
初心者におすすめのやり方です。
ヘッダーはブログの顔になるので自分らしい素敵なロゴを置いてみてください
最後まで読んでいただきありがとうございます
コメント