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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

Q&A

解決済

1回答

1732閲覧

WordPressで画像が枠からはみ出る

seakai

総合スコア24

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/05/04 13:35

編集2021/05/05 01:33

前提・実現したいこと

画像を枠内におさめたい。
画像の左上にカテゴリーが配置されていて、右にはタイトルなどの文字が配置される形にしたい。

今はこんな感じです。

![イメージ説明]

コードが見にくかったら申し訳ありません。

該当のソースコード

html

1<section class="blog"> 2  <h3 class="blog_title">ブログ</h3> 3   <div class="blog_articles"> 4   <article id="post-1241" class="blog_article post-1241 post type-post status-publish format-standard sticky hentry category-53 tag-template tag-sticky"> 5   <figure class="blog_article-img-box"> 6         <img src="http://engress.local/template-sticky/"> 7   <img src="http://engress.local/wp-content/themes/heighter/img/sample01.svg"> 8 <small class="blog_category">カテゴリー</small> 9 </figure> 10 <div class="blog_article-text-box"> 11   <p class="blog_article-title"><a href="http://engress.local/template-sticky/">テンプレート: 先頭固定表示</a></p> 12 <time class="blog_article-date" datetime="2012-01-07">2012-01-07</time> 13 </div> 14 </article> 15 </div> 16</section>

css

1 2html { 3 font-size: 62.5%; 4 /* -> 10px; */ 5} 6 7body { 8 font-family: "游ゴシック体", "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 9} 10 11.is-fixed { 12 height: 100%; 13 overflow: hidden; 14} 15 16h1 { 17 font-size: 4rem; 18 font-weight: bold; 19 line-height: 1.3; 20 color: #1B224C; 21} 22 23@media screen and (min-width: 1280px) { 24 h1 { 25 font-size: 4.8rem; 26 line-height: 1.4; 27 } 28} 29 30h2 { 31 font-weight: bold; 32 line-height: 1.4; 33 font-size: 2.1rem; 34 color: #1B224C; 35} 36 37@media screen and (min-width: 1280px) { 38 h2 { 39 font-size: 3.6rem; 40 } 41} 42 43h3 { 44 font-size: 2rem; 45 font-weight: bold; 46 line-height: 1.7; 47 color: #1B224C; 48} 49 50@media screen and (min-width: 1280px) { 51 h3 { 52 font-size: 3.2rem; 53 } 54} 55 56h4 { 57 font-weight: bold; 58 line-height: 1.5; 59 font-size: 1.8rem; 60 color: #1B224C; 61} 62 63@media screen and (min-width: 1280px) { 64 h4 { 65 font-size: 2.6rem; 66 } 67} 68 69h5 { 70 font-size: 1.8rem; 71 font-weight: 200; 72 line-height: 1.5; 73 color: #1B224C; 74} 75 76@media screen and (min-width: 1280px) { 77 h5 { 78 line-height: 1.7; 79 } 80} 81 82p, 83.p { 84 font-size: 1.5rem; 85 font-weight: 200; 86 line-height: 1.5; 87 color: #1B224C; 88} 89 90@media screen and (min-width: 1280px) { 91 p, 92 .p { 93 line-height: 1.7; 94 font-size: 1.6rem; 95 } 96} 97 98small { 99 font-size: 1.2rem; 100 font-weight: 200; 101 line-height: 1.7; 102 color: #1B224C; 103} 104 105a { 106 text-decoration: none; 107} 108 109a:hover { 110 opacity: .8; 111} 112 113ul { 114 list-style: none; 115} 116 117.smallDone { 118 display: block; 119} 120 121@media screen and (min-width: 1280px) { 122 .smallDone { 123 display: none; 124 } 125} 126 127.smallNone { 128 display: none; 129} 130 131@media screen and (min-width: 1280px) { 132 .smallNone { 133 display: block; 134 } 135} 136 137.container { 138 margin: 0 auto; 139 max-width: 1600px; 140 width: 90%; 141} 142 143@media screen and (min-width: 768px) { 144 .container { 145 width: 70.3125vw; 146 } 147} 148 149.blog-news { 150 padding: 13.43284vh 0 17.76119vh; 151} 152 153@media screen and (min-width: 1280px) { 154 .blog-news-container { 155 display: -webkit-box; 156 display: -ms-flexbox; 157 display: flex; 158 } 159} 160 161@media screen and (min-width: 1280px) { 162 .blog { 163 width: 33.59375vw; 164 } 165} 166 167.blog_article { 168 display: -webkit-box; 169 display: -ms-flexbox; 170 display: flex; 171 padding-top: 4.47761vh; 172} 173 174.blog_article-img-box { 175 position: relative; 176} 177 178.blog_article-img-box img { 179 width: 10rem; 180 height: 11rem; 181 position: absolute; 182 top: 0; 183 left: 0; 184 -o-object-fit: cover; 185 object-fit: cover; 186 position: relative; 187} 188 189@media screen and (min-width: 1000px) { 190 .blog_article-img-box img { 191 width: 11.71875vw; 192 } 193} 194 195.blog_category { 196 position: absolute; 197 top: 0; 198 left: 0; 199 line-height: 1; 200 background-color: #1B224C; 201 color: #FFFFFF; 202 border: 1px solid #707070; 203 font-size: 1.2rem; 204 padding: .4rem .7rem; 205} 206 207.blog_article-text-box { 208 display: -webkit-box; 209 display: -ms-flexbox; 210 display: flex; 211 -webkit-box-orient: vertical; 212 -webkit-box-direction: normal; 213 -ms-flex-direction: column; 214 flex-direction: column; 215 margin-left: 2rem; 216} 217 218.blog_article-title { 219 -webkit-box-flex: 1; 220 -ms-flex-positive: 1; 221 flex-grow: 1; 222 font-weight: bold; 223} 224 225.blog_article-date { 226 font-size: 1.2rem; 227 font-weight: 200; 228 line-height: 1.7; 229} 230/*# sourceMappingURL=blog.css.map */

試したこと

scss

1.blog_article-img-box { 2 position: relative; 3 4 img { 5 width: 10rem; 6 height: 11rem; 7 position: absolute; 8 top: 0; 9 left: 0; 10 object-fit: cover; 11 position: relative; 12 13 @media screen and (min-width: 1000px) { 14 width: vw(1280, 150); 15 } 16 } 17}

上のscssを一つずつコメントアウトしたりしました。

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

リセットcss(http://html5doctor.com/html-5-reset-stylesheet/)とscssを使っています。

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

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

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

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

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

gpsoft

2021/05/05 01:15

> 今はこんな感じです。 上記のphpとscssを元に、テキトーにhtmlとcssを作って動かしてみましたが、再現しませんね〜。 (期待通り、画像の左上に「カテゴリー」というテキストが表示されました) できれば、サーバ側で処理する前のコード(phpやscss)ではなく、 処理後のコード(htmlやcss)を掲載していただいた方が、(第三者による)再現性は高くなりますよ。 あと、リセットcssにもいろいろあるので、お使いのリセットcssの入手元を書いていただけるとベターです。
seakai

2021/05/05 01:35

コメントありがとうございます。 htmlとcssとリセットcssを追加したのですが、検証ツールからコピペしたので合っていますでしょうか?
gpsoft

2021/05/05 09:51

img要素が2つあるんですね。すみません、見落としてました。 しかし、そうなると、どうしたいのかが分からなくなってきました。 「画像を枠内におさめたい。」とのことですが、ひょっとして、1つ目のimg要素((http://engress.local/template-sticky/))には「枠(のような絵)」が描かれており、そこへ2つ目のimg要素(sample01.svg)をピッタリ重ねたい、ということですか? もしそうだとすると、1つ目のimg要素は(隠れるので)不要な気がします。どうしたいのか、もう少し詳しく説明していただけると幸いです。 あと、htmlの中に全角スペースが沢山混じってるので、レイアウトに影響する可能性があります。スクショを見る限り影響は出てないみたいので、php側の問題ではない、ってことかなぁ……。手編集でhtmlのインデント調整とかしました?
seakai

2021/05/05 10:28

gpsoft様の仰る通り、2つ入っているimgの1つ目を削除するとうまく表示されました! teratailにコードを載せる際、見た目が崩れていたのでスペースで整えてしまったことが全角スペースが混じっている原因かもしれません。 お手数おかけしました。 ありがとうございました。
gpsoft

2021/05/05 10:31

お疲れさまです。 原因や解決策を回答欄に書いてクローズしていただけると幸いです。
guest

回答1

0

自己解決

2つ入っているimgの1つ目を削除するとうまく表示されました。
ありがとうございました。

投稿2021/05/05 10:29

seakai

総合スコア24

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問