質問: 現在Wordpressでのウェブサイト構築を独学で始めた初心者です。 初歩的な質問となってしまいますが、ヘッダー部に画像を追加するにはどうしたら良いでしょうか? テーマは「cocoon」を使用しております。 ■構成イメージ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/43bc0a323986f6b44ef9bb93b9f6d885.png) 私なりに考えた対処法は以下の通りです。 1.Wordpressの管理画面であるダッシュボードの「cocoonの設定」では、 追加する項目が見当たらなかったので、ヘッダー部のHTMLに追加する必要がある。 2.ヘッダー部の記述がされているファイルにHTMLで画像を出力して、CSSで整形。 質問の内容としましては、そもそもこの対処法が正しいのか。という点と、 正しかった場合どこのファイルに記述すれば良いのかという2点になります。 拙い文章で申し訳ありませんが、以上宜しくお願い致します。 ●動作環境 Wordpress:5.4.2(最新) テーマ:[親]2.2.0.5 [子]1.1.2(どちらも最新) サーバー:さくらサーバ
回答: その方法でも問題はないですが、テーマの改修ということになりますので、それなりのスキルが必要です。 Wordpressは、PHPでHTMLを出力してますので、HTMLの知識だけではなく、PHPのスキルも必要になり、Wordpressの構成ファイル、特有のコマンドの理解も必要になります。 下手に弄ると壊してしまい、サイトが表示されなくなる危険性もあります。 自分がするなら、画像はCSSの疑似要素で表示させる方向で検討するかな。 CSSは追加CSSに記述するればいいでしょう。 これだと間違っても最低限レイアウトが崩れるだけですし、追加したCSSを削除すれば元に戻ります。 Cocoon のヘッダー部分のHTMLはデベロッパーツールで確認すると下記のような構成になっています。 ``` キャッチフレーズ サイトタイトル ``` taglineクラスとlogoクラスにそれぞれ::after疑似要素で画像を追加すればいいでしょう。 あとは、CSSでお好みにレイアウトします。下記は CSS FlexBox で横並びにする例です。 ``` .header-in .tagline, .header-in .logo { display: flex; justify-content: space-between; align-items:center; } .header-in .tagline::after { content: url(https://placehold.jp/150x50.png); height: 50px; width: 150px; } .header-in .logo::after { content: url(https://placehold.jp/150x50.png); height: 50px; width: 150px; } ``` テーマの設定によってはHTMLが変わるかもしれませんので、自身のサイトでHTMLを確認してそれに合わせてください。