![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
画像の下にタイトルと文章を表示しているリストで、
リストの一番上だけ、画像の横に文章を表示したいのですが、どうすれば良いのでしょうか?
Wordpressで、luxeritasテーマを使用して、FEEDZY RSS Feeds プラグインを使っています。自分のブログからRSSのフィードを取得して、新着記事を表示させたいと思っています。
その際に、一番上の記事のみ「画像の右」に文章を表示して、それ以降の記事は「画像の下」に文章を表示したいのですが、どうしてもやり方が分かりません。
一通り、思いつく限りのことはやってみたのですが、詰まってしまいました。CSSに詳しい方がいましたら、ご指南いただけないでしょうか?
<div class="feedzy-rss">
<ul>
<li class="rss_item">
<div class="rss_image">
<span class="fetched" style="background-image: url('記事の画像.jpg');"></span>
<span class="default" style="background-image: url('記事の画像がないときの画像.jpg');"></span>
</div>
<span class="title">タイトル名</span>
<div class="rss_content"><p>文章</p></div>
</li>
.
.
</ul>
</div>
■■■ CSS ■■■
.feedzy-rss li:first-child { /* 最初のli要素をデザイン */
display: block;
width:300px !important;
}
.feedzy-rss li:first-child .rss_image { /* 最初のli要素をデザイン */
display: block !important;
width:300px !important;
height:300px !important;
}
.feedzy-rss li:first-child .fetched,.default { /* 最初のli要素をデザイン */
width:300px !important;
height:300px !important;
float: left !important;
}
.feedzy-rss .title a { /* タイトル */
display:block;
}
.feedzy-rss .rss_item .rss_image { /* 画像 */
width:100% !important;
float: none;
display: block;
}
.feedzy-rss li { /* 高さを揃える */
display: inline-block;
vertical-align: top;
}
※ 不要と思われる記述は、省略しています。
![「HTMLで、リストの一番上だけ、画像の横」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/f/542632360_59eccc6c77a65/M.jpg)
No.1ベストアンサー
- 回答日時:
こんにちは
発想を変えてしまってますが、こんな感じではいかがでしょうか?
・LI要素はinline-blockで横並びにしておいて、最初の要素だけwidth:100%にすることで1段分を使うようにしています
・画像はどちらか一つが表示されるものと仮定してposition:absoluteで固定位置に表示し、文章の位置はli要素のpaddingで指定しています
(ご提示の画像では、最初の画像だけ少し大きいようなので、適当に設定しています)
.feedzy-rss ul {
list-style-type:none;
}
.feedzy-rss li {
margin:0; width:300px;
display:inline-block;
vertical-align:top;
padding-top:300px;
position:relative;
}
.feedzy-rss .rss_image span {
width:300px; height:300px;
position:absolute;
top:0; left:0;
}
.feedzy-rss li:first-child{
width:100%; height:400px;
padding:0 0 0 400px;
}
.feedzy-rss li:first-child .rss_image span{
width:400px; height:400px;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
imgの下に点線が入るのを消したい
-
定義リストに下線をつけたいと...
-
リンクの下線と文字の間隔を開...
-
CSSで文法エラーが出ました
-
iframe 内の画像を自動縮小させ...
-
【HTML&CSS】フッター下部の余...
-
ヘッダーの高さが合わない
-
インラインフレーム内の表示位...
-
背景が下まで表示されないんです。
-
table周辺の隙間をなくしたい。
-
form input テキストを上下中央...
-
CSSがなぜかfont-sizeだけ効か...
-
CSSで指定した背景画像にリンク...
-
html5 2段組で行頭を揃える方法
-
W3Cのソースコードの検証サービ...
-
footer を横幅いっぱいに広げる...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報