質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2087閲覧

HTML/CSSでマークアップした画像が「WordPress化」した後に上手く表示されない状態。

KK__2020

総合スコア6

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/14 04:19

前提・実現したいこと

前提(背景):

とある会社のWebサイト制作に取り組んでおり
現在HTML/CSSのマークアップ後の「WordPress化」の対応しております。

実現したいこと:

<img>タグで設定した写真を
WordPress上で表示させること。

発生している問題・エラーメッセージ

その中で、HTMLの<img>タグで設定した画像が上手く読み込まない現象が起きています。

イメージ説明

状況としては、上記の小さな写真の図が表示されている状態です。

該当のソースコード(HMTL)

<section class="margin"> <h2 class="my-2" id="merit">メリット</h2> <div class="row"> <img class="col-md-6 order-md-2 mt-5" src="img/merit.jpg width="100%" height="100%"> <div class="col-md-6 order-md-1 mt-5"> <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </section>

また、画像のパスは下記となります。
イメージ説明

試したこと

①ファイル名の確認
②タグの入力ミス確認
③画像ファイルの破損確認
④画像のアップロード確認
⑤回線の混雑時以外でも更新し確認
⑥画像パスの記載方法に誤りがないか確認
⑦拡張子が「jpg.jpg」のように重複していないか確認

補足情報(FW/ツールのバージョンなど)

WordPressのローカル環境は「Local By FlyWheel」を使用しております。

ご確認後、対応方法についてご教示頂ければ幸いでございます。
何卒宜しくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

azuapricot

2020/01/14 04:28

src="img/merit.jpg width="100%" ← ダブルクォーテーション1つ足りませんが直しても表示されないままですか?
KK__2020

2020/01/14 05:01

>>Azuapricotさん ご連絡頂きましてありがとうございます。 上記HTML貼り付けの際に なぜか削除しておりました。。 src="img/merit.jpg" width="100%" height="100%"> 又、srcの箇所のダブルクォーテーションを記載しても 現状、WordPress上では画像が表示されない状態となります。
m.ts10806

2020/01/14 05:11

>⑥画像パスの記載方法に誤りがないか これ、どうやって「正しい」と確認したのでしょうか。
KK__2020

2020/01/14 05:24

>>m.ts10806さん ご連絡頂きありがとうございます。 ⑥についてですが、wordpress化のファイル内のindex.phpにて画像設定をsrcで記載しており、添付写真の格納状態を見て「src="img/merit.jpg"」が画像パスの設定上正しいのではないかと思い、記載致しました。(もし認識や記載方法に誤りや修正点などありましたらご教示頂けますと幸いです。) 尚、先ほどの②のタグ入力ミス(ダブルクォーテーションの追記)については対応済みとなります。 宜しくお願いいたします。
m.ts10806

2020/01/14 05:28

>⑥画像パスの記載方法に誤りがないか 私がイメージした確認方法は「ブラウザで画像の直URLを打って表示確認」です。 そしたら間違いないので。 ただ、日本語名称のディレクトリに入ってるのはよろしくないかなとは思ってます。 今一度「テーマ内での画像のパスのとりかた」を調べた方が良いと思いました。
KK__2020

2020/01/16 05:43

>>m.ts10806さん ご連絡いただきありがとうございます。 日本語名称のディレクトリは今後使用しない方向性で対応いたします。 わかりやすいようにご指導頂き、ありがとうございます。
guest

回答2

0

WordpressはページのURLは自動生成しますので、ページによってURLの親パスは異なります。
ですので画像などのパスは基本的には絶対パスで指定するようにすべきです。

あと画像ファイルの置く場所もテーマのフォルダーに置くのではなくメディアライブラリにアップロードして使用するのが通常の使い方です。

管理画面/メディア/ライブラリ - WordPress Codex 日本語版

追記

⑥についてですが、wordpress化のファイル内のindex.phpにて画像設定をsrcで記載しており、添付写真の格納状態を見て「src="img/merit.jpg"」が画像パスの設定上正しいのではないかと思い、記載致しました。(もし認識や記載方法に誤りや修正点などありましたらご教示頂けますと幸いです。)

wordpressのブログのページにアクセスしたときのURLは、「wordpress化」フォルダのパスでないことはブラウザのアドレス欄ですぐに確認できますよね。
ページにアクセスしたときに 「wordpress化」フォルダ内の index.php を参照してHTMLファイルを生成して返しているだけなので、index.phpのある場所を基準にするという考え方は間違ってます。

上でも書いたようにブログで使う画像はメディアライブラリーにアップロードして、そこで絶対パスが取得できますので、その絶対パスで指定しましょう。

投稿2020/01/14 06:32

編集2020/01/14 07:42
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KK__2020

2020/01/16 05:47

>>hatena19さん ご連絡頂きましてありがとございます。 Wordpress化の全体フローの把握が弱く、誤った認識のままコーティングを進めてしまうところでした。ご指導頂きまして誠にありがとうございます。 今後はメディアライブラリーにアップロードし、絶対パスを取得した上で対応できればと思います。
guest

0

ベストアンサー

個人的にはですが、

<?php echo get_template_directory_uri(); ?>

を使用しています。
例の場合は、

<img class="col-md-6 order-md-2 mt-5" src="<?php echo get_template_directory_uri(); ?>/img/merit.jpg width="100%" height="100%">

とソースコードに記載すれば動作すると思いますが、未検証です!

投稿2020/01/14 09:49

TJMYK

総合スコア82

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TJMYK

2020/01/14 09:51

ちなみに、テンプレートに埋め込む画像の場合には使ってもいいと思います。 もしも、記事などで使うのであれば、メディアライブラリを使用するのがおすすめです
KK__2020

2020/01/16 05:45

>>TJMYKさん ありがとうございます!最後のjpgの後ろに「”」をつけた結果、無事表示させることができました。 また、今後記事などで使用する場合にはメディアライブラリを使用していければと思います。丁寧に解説して頂き誠にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問