wordpressで画像の配置や反映されていない箇所がある

Question

●前提・実現したいこと
wordpressnに自作模写コーディング通りに画像を反映させたい。
3つ解決したい内容があります。

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

★1つ目
表示させたい画像（お手本サイト)

現在の状況

※MESSAGEの上に画像がくるように表示させたい

●該当のソースコード

★index.php

<?php get_header(); ?> <div class="wrapper"> <div class="sidebar"> <div class="side-contents"> <img class="side-logo" src="logo.png"> <ul class="side-menu"> <li><a href="#"><i class="fas fa-chevron-right"></i>TOP</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>MESSAGE</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>GALARY</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>BRAND</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>PROJECT</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>COMPANY</a></li> </ul>

 <div class="side-icons">
   <a href="#"><i class="fab fa-facebook-square"></i></a>
   <a href="#"><i class="fab fa-twitter-square"></i></a>
   <a href="#"><i class="fab fa-instagram-square"></i></a>
   <a href="#"><i class="fab fa-youtube-square"></i></a>
 </div>
 </div>

</div> <div class="contents"> <img class="top-image" src="mainImg.jpg"> <div class="message-wrapper"> <h1 class="heading">MESSAGE</h1> <div class="textarea"> <p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社。ホームページサンプル株式会社では最新技術と自然との調和を目な技術で世の中を動かす企業を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を動かす企業を目指します。</p> </div> </div>

●該当の画像ファイル

fashion→imgの中のlogo.pngとmainImg.jpgという画像です。

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

★2つ目
表示させたい画像(お手本サイト)

現在の状況

※TOPの上に画像がくるように表示させたい

●該当のソースコード

★header.php

<?php get_header(); ?> <div class="wrapper"> <div class="sidebar"> <div class="side-contents"> <img class="side-logo" src="logo.png"> <ul class="side-menu"> <li><a href="#"><i class="fas fa-chevron-right"></i>TOP</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>MESSAGE</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>GALARY</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>BRAND</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>PROJECT</a></li> <li><a href="#"><i class="fas fa-chevron-right"></i>COMPANY</a></li> </ul>

 <div class="side-icons">
   <a href="#"><i class="fab fa-facebook-square"></i></a>
   <a href="#"><i class="fab fa-twitter-square"></i></a>
   <a href="#"><i class="fab fa-instagram-square"></i></a>
   <a href="#"><i class="fab fa-youtube-square"></i></a>
 </div>
 </div>

</div>

★single.php

<?php get_header(); ?> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <div class="wrapper"> <div class="sidebar"> <div class="side-contents"> <img class="side-logo" src="logo.png"> <ul class="side-menu"> <li><a href="#">TOP</a></li> <li><a href="#">MESSAGE</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">BRAND</a></li> <li><a href="#">PROJECT</a></li> <li><a href="#">COMPANY</a></li> </ul>

 <div class="side-icons">
   <a href="#"><i class="fab fa-facebook-square"></i></a>
   <a href="#"><i class="fab fa-twitter-square"></i></a>
   <a href="#"><i class="fab fa-instagram-square"></i></a>
   <a href="#"><i class="fab fa-youtube-square"></i></a>
 </div>
 <p><?php the_content(); ?></p>
 </div>

</div> <?php endwhile; else: ?> <p>記事はありません</p> <?php endif; ?>

●該当の画像ファイル

fashion→imgの中のlogo.pngという画像です。

★3つ目
画像配置を直したい（お手本サイト)

現在の状況

※お手本のように配置としては

photo01.jpg photo02.jpg photo03.jpg
photo04.jpg photo05.jpg photo06.jpg
ジェントルマンなおじさんの画像(photo07.jpg)
photo08.jpg photo09.jpg photo10.jpg
photo11.jpg photo12.jpg photo13.jpg

のように空白なく画像を配置したいです。

●該当のソースコード

★index.php

<div class="photo-wrapper"> <img src="<?php echo get_template_directory_uri(); ?>/img/photo01.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo02.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo03.jpg" width="230" height="237"> <img src="<?php echo get_template_directory_uri(); ?>/img/photo04.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo05.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo06.jpg" width="230" height="237">

<span><img src="<?php echo get_template_directory_uri(); ?>/img/photo07.jpg" width="711" height="457"></span>

<img src="<?php echo get_template_directory_uri(); ?>/img/photo08.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo09.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo10.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo11.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo12.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo13.jpg" width="230" height="237">

</div> </div>

●該当の画像ファイル

fashion→imgの中のphoto01.jpg～photo13.jpgという画像です。

お手数ですが解決策や対応策があれば教えてください。
ご検討宜しくお願い致します。

Answer 1

★1つ目
表示させたい画像（お手本サイト)
※MESSAGEの上に画像がくるように表示させたい

以下のように修正すれば、表示できると思いますー。
index.php

//誤
<img class="top-image" src="mainImg.jpg">
//正
<img class= "top-image" src=" <?php echo get_template_directory_uri() ?>/img/mainImg.jpg">

★2つ目
表示させたい画像(お手本サイト)
※TOPの上に画像がくるように表示させたい

index.php

//誤
<img class="side-logo" src="logo.png">
//正
<img class="side-logo" src=" <?php echo get_template_directory_uri() ?>/img/logo.png">

3つ目は、

https://gray-code.com/html_css/delete-blank-space-for-image-element/

上記、サイトにあるように、記載しているところの改行が隙間になっていると思います。
改行をしなように書かれている箇所もありますが、一部改行があり、それが隙間になっていると思いますー。

ご確認よろしくお願いしますー。

Comments

[nori]

分かりやすく丁寧なアドバイス本当にありがとうございます！
★1つ目と★2つ目は無事に解決しました！

★3つ目に関しては隙間というより上記のお手本のようにジェントルマンなおじさんの画像を
photo01.jpg photo02.jpg photo03.jpg
photo04.jpg photo05.jpg photo06.jpg
ジェントルマンなおじさんの画像(photo07.jpg)
photo08.jpg photo09.jpg photo10.jpg
photo11.jpg photo12.jpg photo13.jpg

のように画像を配置したいです。

style.cssのコードを変更すべきでしょうか？

●該当箇所

★index.php
<div class="photo-wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo01.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo02.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo03.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo04.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo05.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo06.jpg" width="230" height="237">
<span><img src="<?php echo get_template_directory_uri(); ?>/img/photo07.jpg"></span>
<img src="<?php echo get_template_directory_uri(); ?>/img/photo08.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo09.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo10.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo11.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo12.jpg" width="230" height="237"><img src="<?php echo get_template_directory_uri(); ?>/img/photo13.jpg" width="230" height="237">
</div>
</div>

★style.css
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#fff;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#fff;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #fff;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

body {
text-size-adjust: 100%;
overflow-x: hidden;
color: #fff;
font: 300 14px / 1.9 "Noto Sans JP", Arial, Verdana, 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
background: rgb(0, 0, 0);
}

a{
text-decoration: none;
}

li{
list-style: none;
}

img{
vertical-align: bottom;
background-color: #fff;
}

header{
text-align: center;
height:60px;
width:100%;
position: fixed;
}

.header-cover{
text-align: center;
height:60px;
width:100%;
position: fixed;
z-index: 1000;
}

header img{
height: 25px;
width: 100px;
padding-top: 15px;
}

header .fa-bars{
float: right;
padding-top: 22px;
padding-right: 20px;
}

.header-nav{
background-color: black;
text-align: left;
transform: translateY(-110%);
transition: 0.5s;
z-index: 10;
}

.header-menu li{
padding: 18px 0px;
border-bottom: 1px solid white;
}

.header-menu li a{
font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
font-size: 14px;
color:white;
}

.header-menu li a:hover{
text-decoration: underline;
}

.header-menu .fas{
padding: 0 10px;
}

.header-icons .fab{
padding: 12px 10px;
color:white;
}

.header-icons{
border-bottom: 1px solid white;
}

.drawer-btn:checked ~ .header-nav{
transform: translateY(10%);
}

.drawer-btn{
position: absolute;
right:20px;
top:20px;
transform: scale(1.5);
opacity: 0;
z-index: 2000;
}

.sidebar{
width:20%;
position:fixed;
right:0;
height:100%;
}

.side-logo{
height:22.42px;
width:87px;
padding:25px 0 40px 0;
}

.side-contents{
padding-left: 16%;
}

.side-menu li a{
color:#fff;
font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
font-size: 14px;
}

.side-menu li a:hover{
text-decoration: underline;
}

.side-menu li{
padding-bottom: 25px;
}

.side-icons .fab{
color:#fff;
padding:45px 10px 0 0;
}

.side-icons .fab:hover{
opacity: 0.8;
}

.contents{
width:80%;
}

.top-image{
width:100%;
}

.message-wrapper{
width:70%;
margin:0 auto;
text-align: center;
}

.heading{
font-family: 'Modern Antiqua', 'Noto Sans JP',serif;
font-size: 22px;
padding: 80px 0 20px 0;
margin-bottom: 50px;
border-bottom: 3px solid white;
display: inline-block;
}

.textarea{
width:85%;
margin: 0 auto;
text-align: left;
padding-bottom: 80px;
}

.photo-wrapper img{
width:33.333333333%;
}

span .big-photo{
width:100%;
}

.brand-wrapper{
width:80%;
text-align: center;
}

.brand-contents{
display:flex;
padding-bottom: 50px;
border-bottom: 1px solid white;
}

.contents-item{
width:25%;
padding:0 25px;
text-align: left;
}

.contents-item img{
width:100%;
padding-bottom: 10px;
}

.contents-item p{
width:90%;
}

.project-wrapper{
width:80%;
text-align: center;
padding-bottom: 120px;
border-bottom: 1px solid white;
}

.project-item{
padding-bottom: 70px;
}

.project-item img{
width:375px;
height: 225px;
padding-right: 20px;
float: left;
}

.project-item p{
text-align: left;
}

.company-wrapper{
width:80%;
text-align: center;
}

.company-contents{
display: flex;
padding-top: 30px;
padding-bottom: 200px;
}

.address{
text-align: left;
margin-right: 12%;
}

.ggmap{
width:60%;
position: relative;
padding-bottom: 25%;
}

iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

footer{
width: 80%;
text-align: center;
}

footer p{
padding-bottom: 60px;
font-size: 12px;
}

footer a{
color: blue;
}

[退会済みユーザー]

例えば、必要な場所に、</br>を入れれば、できると思いますー。

photo01.jpg photo02.jpg photo03.jpg </br>
photo04.jpg photo05.jpg photo06.jpg </br>
ジェントルマンなおじさんの画像(photo07.jpg) </br>
photo08.jpg photo09.jpg photo10.jpg </br>
photo11.jpg photo12.jpg photo13.jpg

お試しくださー。

[nori]

ありがとうございます！修正できました！
ジェントルマンのおじさんを横長にピッタリ設置するにはstyle.cssでどのように変えれば良いですか？

●該当箇所
★style.css

.photo-wrapper img{
width:33.333333333%;
}

span .big-photo{
width:100%;
}

[退会済みユーザー]

遅くなりましたー。

以下のようにすることで、ジェントルマンのおじさんの画像が横長ピッタリになると思います。

1)cssファイルの読み込み

header.phpの<head>と</head>の間に以下を追加

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />

2)ジェントルマンの画像にclassを追加(jentol-man)
<span><img class="jentol-man" src="<?php echo get_template_directory_uri(); ?>/img/photo07.jpg" width="711" height="457"></span></br>
他の部分をdivで分離。

cssファイルに該当の設定を追加
.jentol-man{
width:100%;
}

やり方は、いろいろとあるので、参考になれば、幸いですー。

index.phpだけ添付します。

<?php get_header(); ?>
<div class="photo-wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo01.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo02.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo03.jpg" width="230" height="237"></br>
<img src="<?php echo get_template_directory_uri(); ?>/img/photo04.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo05.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo06.jpg" width="230" height="237"></br>
</div>
<span><img class="jentol-man" src="<?php echo get_template_directory_uri(); ?>/img/photo07.jpg" width="711" height="457"></span></br>

<div class="photo-wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo08.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo09.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo10.jpg" width="230" height="237"></br>
<img src="<?php echo get_template_directory_uri(); ?>/img/photo11.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo12.jpg" width="230" height="237">
<img src="<?php echo get_template_directory_uri(); ?>/img/photo13.jpg" width="230" height="237"></br>
</div>

[nori]

細かく丁寧で分かりやすいアドバイス本当にありがとうございました！
無事に解決しました！また分からないことがあったらよろしくお願いいたします。

[退会済みユーザー]

よかったですー。