WordPress初心者です。
html、cssはほぼ理解しています。
http://kira-kawa.comの中の、
http://kira-kawa.com#popular_post_contentここの部分が崩れてしまっています。
front-page.phpの中の、
'showposts'=
上記の数字を6以上にすると、
アイキャッチ画像がきちんと並びません。
お忙しいところすいませんが、どなたか分かられる方いらっしゃいましたら、よろしくお願い致しますm(__)m
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
html
1<!-- 85行目~93行目 --> 2 <div id="header-gnav-area"> 3 <nav id="gnav" role="navigation" itemscope="itemscope" itemtype="http://scheme.org/SiteNavigationElement"> 4 <div id="gnav-container" class="gnav-container"><ul id="gnav-ul" class="clearfix"><li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444 %e6%96%b0%e7%9d%80%e5%95%86%e5%93%81"><a href="http://kira-kawa.com/?page_id=443"><a href="index.html#recent_post_content">新着商品</a></a></li> 5<li id="menu-item-496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-496 %e4%ba%ba%e6%b0%97%e5%95%86%e5%93%81"><a href="http://kira-kawa.com/?page_id=495"><a href="index.html#popular_post_content">人気商品</a></a></li> 6<li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165 about"><a href="http://kira-kawa.com/?page_id=164"><a href="index.html#front-contents">キラ可愛アクセとは</a></a></li> 7<li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-412 "><a href="http://kira-kawa.com/?page_id=410"><a href="index.html#front-contact" style="background: trans">お問い合わせ</a></a></li> 8</ul></div> 9 </nav> 10 </div>
nav
内のa
がそれぞれ2重になってますので修正していただいた方がよろしいかと思います。
html
1<!-- 299行目 --> 2<h2><i class="fa fa-flag"></i> 人気商品 <span>popular</span></h2></h2> 3
こちらも</h2>
が2回ありますね。
まずこういった部分を直してみてください。
目についた部分だけなので、他にもあるかもしれません
追記
タグが2重になっている部分の原因はわかりませんが、レイアウト崩れの部分はどういう状態かなんとなく把握しました。
前提として、テーマの内容は以下のようになっています。
- もともと5つまでしか記事が出ないようになっている。
- 画面を狭めたとき(991px以下)3つまでに変わる。
- 3つまでに変わる際は4つ目と5つ目を
display:none;
で消している
そもそも2段になることを想定してませんので、タイトルやカテゴリーの長さに合わせて高さが変わり、2段目ができた場合に崩れて表示されます。
どうしても6記事以上表示させたい場合、高さを固定する、flexをうまいこと使うなどすれば対処できると思います。
6記事以上表示させる場合、画面幅が狭くなった時は3記事目の次が6記事目になります。
(人気商品を見るとわかりやすいです)
これは先ほど前提で書いたdisplay:none;
で4と5を消しているためで、親テーマのstyle.css 2377行目辺りを見ていただければわかると思います。
6記事目以降も見えないようにするのか、4・5記事を見えるように変更するかはご自身で決め、修正してみてください。
投稿2017/06/13 00:43
編集2017/06/13 07:41総合スコア3235
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/13 01:00
2017/06/13 01:04
2017/06/13 01:32
0
自己解決
たくさんのご回答ありがとうございました!
無事解決致しました。
タイトル部分が長かったようだったので、アイキャッチ画像下の、タイトルの部分のheightを高くしたら解決しました。
皆さんありがとうございました!!!
投稿2017/06/14 02:45
総合スコア13
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。