第17回目 スティンガー5カスタマイズ トップページと固定ページでfloatを使用して画像を横並びにする方法

今回はstinger5のカスタマイズ17回目、「float」を使用して、固定ページや単一記事内で画像を横並びにする方法を紹介します。スマフォでの表示も確認して特に問題ない方法です。

スマフォでの表示は下記の記事の方法で確認しました。
WEB製作には必須です パソコンからスマフォサイトの表示結果を、確認する方法

画像横並び「float」を使用

画像を横並びにするには「float」を使用します。

スティンガー5カスタマイズ トップページと固定ページでfloatを使用して画像を横並びにする方法

例としてトップページで上記のように、画像を横並びにしてみます。

トップページを例に

それではトップページに画像を横並びに配置したのを例に解説します。

home.phpを開く

スティンガー5画像を横並びにする方法
ワードプレスのダッシュボードから「外観」→「エディター」→「home.php」を開きます。
上記画像部分が画像を横並びに表示させるコードです。
下記で簡単に説明します。

home.php全コード

<?php get_header(); ?>
<div id="content" class="clearfix">
  <div id="contentInner">
    <main>

      <article>
        <section>
<?php echo do_shortcode( '' ); ?>


<h2>リサイクルショップ宝島からのお知らせ</h2>
<?php query_posts('cat=9&posts_per_page=3&paged='.$paged); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 
<div class="post">
<div class="post_date"><?php echo get_the_date('Y.m.d'); ?></div>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div> 
<?php endwhile; ?>
<?php else : ?> 
<p>記事が見つかりません</p>
 
<?php endif; ?>

<h2>お客様の不要品を是非お売り下さい!!</h2>
<a href="http://takarajima-re.com/kaitori-annnai#syuttyou"><img src="http://takarajima-re.com/wp-content/uploads/2014/11/syuttyou.jpg" alt="リサイクルショップ宝島の不用品の買い取り" width="50%" height="250" class="alignnone size-full wp-image-283"  style="float:right;" /></a>

<a href="http://takarajima-re.com/kaitori-annnai#tenntou"><img src="http://takarajima-re.com/wp-content/uploads/2014/11/tenntou.jpg" alt="リサイクルショップ宝島の不用品の店頭買い取り" width="50%" height="250" class="alignnone size-full wp-image-284" style="float:left;" /></a>

<div style="clear:both;">





<a href="http://takarajima-re.com/otoiawae"><img src="http://takarajima-re.com/wp-content/uploads/2014/11/kaitori10.jpg" alt="リサイクルショップ宝島への買取相談はこちらから" width="670" height="172" class="alignnone size-full wp-image-275" /></a>




<h2>買い取り強化商品</h2>
・液晶テレビ<br />
・インパクトドライバ<br />




      
        </section>
        <!-- /section --> 
<?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?> 
        <!-- ページナビ -->
   <!--     <?php if (function_exists("pagination")) {
pagination($wp_query->max_num_pages);
} ?> 
-->

      </article>

    </main>
  </div>
  <!-- /#contentInner -->
  <?php get_sidebar(); ?>
</div>
<!-- /#content -->
<?php get_footer(); ?>

上記が全コードです。
25行目から30行目が画像を横並びにしている部分です。
26行目の最後の部分にfloatを挿入して、画像を横並びにしています。
30行目にclear:bothを入れる事によってfloatを解除しています。
画像の幅を(width=”50%”)%で指定する事により、スマフォやタブレットでみても、レイアウトが崩れないようにしました。

最後に

今回は画像を横並びに表示させる方法を解説しましたが、方法はこのほかにもたくさんあると思います。
みなさんも試してみてください。

スティンガー5のカスタマイズまとめ記事はこちら

ワードプレスのテーマ「stinger5」をカスタマイズして、企業のホームページとして2015年1月から運用します

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク