FC2ブログのテンプレ「white_card_resp 」を使いたいと思っています。
レスポンシブ対応で、幅600PX以下で見た場合、
タイトルリストの表示が変化するようになっています。
600PX超 → 画像の右側にタイトル表示(横長)
600PX以下→ 画像の上にタイトル表示(正方形)
スマホ等で見た時に、画像が大きくなり過ぎるので
どのサイズから見てもパソコン表示のように、
横長で画像の右側にタイトルが表示するようにしたいのですが、
どうすれば良いでしょうか?
以下、レスポンシブ部分のCSSです。
(htmlも変更必要ですか?)
よろしくお願いします。
/*-----------------------------------------
レスポンシブ
-----------------------------------------*/
@media screen and (max-width: 600px) {
body {
min-width: initial;
min-width: auto;
width: auto;
}
.l_header,
.header_blog_name,
.header_introduction,
.l_container,
.l_footer_inner {
width: 100%;
}
.l_container {
margin-bottom: 0;
}
.l_left_area,
.l_right_area {
float: none;
width: 100%;
}
.l_right_area {
padding: 0 16px;
}
.l_left_area {
margin-top: 32px;
}
.l_footer {
margin: 10px 0 20px;
}
.l_footer_inner {
padding: 0 16px;
}
.l_footer_inner,
.l_footer_left {
display: block;
width: auto;
}
.l_footer_right {
display: none;
}
.blog_content .pager {
margin: 0 16px;
}
.header_blog_name {
padding: 16px 16px;
font-size: 24px;
}
.header_blog_name{
padding: 16px 20px 8px;
font-size: 22px;
}
.header_introduction {
font-size: 12px;
padding: 0 20px 24px;
}
.blog_content_list {
padding: 0 12px;
}
.blog_content_item {
width: 100%;
}
.blog_content_list .blog_content_item:first-child .blog_content_tmb {}
.blog_content_tmb_wrap {
position: relative;
width: 100%;
padding: 0;
}
.blog_content_tmb_wrap::before {
content: "";
display: block;
padding-top: 65%;
}
.blog_content .blog_content_list .blog_content_item .blog_content_tmb {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: auto;
}
.blog_content .blog_content_list .blog_content_item .blog_content_desc,
.blog_content .blog_content_list .blog_content_item .m_link_btn {
display: none;
}
.blog_content .blog_content_list .blog_content_item .blog_content_title,
.blog_content .blog_entry_title {
font-size: 20px;
margin: 0;
padding: 20px 20px 4px;
}
.blog_content .blog_content_list .blog_content_item .blog_content_sup {
margin: 0;
}
.blog_content_list .blog_content_item {
display: block;
}
.blog_content_list .blog_content_item .blog_content_text_inner {
margin: 0;
}
.blog_content_list .blog_content_item .blog_content_sup {
position: relative;
left: 0px;
bottom: 0px;
}
.blog_entry {
margin: 0 16px;
}
.comment_area {
margin: 32px 16px 24px;
}
.comment_form_text{
width: 100%;
height: 40px;
}
.relate_list_area,
.relate_list_title {
width: auto;
}
.relate_list_area {
margin: 0 16px 24px;
}
.relate_item {
width: 100%;
}
.relate_list_title {
width: auto;
margin: 0 16px 16px;
}
.titlelist_area,
.search_area {
margin: 0 16px 32px;
}
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ブログ記事をすべてダウンロー...
-
パソコンで日記を書く良い方法...
-
ブログで自作曲を貼り付けたい
-
青唐辛子の一升漬けに白カビが...
-
アメブロのアメンバー限定みた...
-
gooブログのURL
-
FC2ブログが突然消えました。。。
-
私の書いた文章やレビューを評...
-
ブログ記事はブログ記事の作者...
-
ブログ名で検索できない
-
gooブログ内を検索する方法
-
gooブログの使い勝手について
-
完全にプライベートな日記とし...
-
goo blog フォトからgoo blog ...
-
ブログ上の画像ダウンロード
-
HPでエッセイを公開したいけれ...
-
ブログの書籍化
-
プリクラで人物特定はできますか?
-
gooブログのIDのみの変更はでき...
-
アメブロで、候補に出てこない...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ブログ記事をすべてダウンロー...
-
パソコンで日記を書く良い方法...
-
完全にプライベートな日記とし...
-
gooブログ内を検索する方法
-
ブログ記事はブログ記事の作者...
-
アメブロで本文とは別に印刷用...
-
Amebaのブログを閉鎖しますが、...
-
gooブログからアメーバブログ ...
-
友達だけに公開できるブログ
-
マイページの出し方
-
先日海の岩場でオレンジ色の生...
-
過去に書いたブログが消えてる...
-
Windows10のOneNoteで日記帳を...
-
PDFをgooブログにリンクする方法
-
gooブログのIDのみの変更はでき...
-
ブログの書籍化
-
ジュゲムブログの検索エンジン...
-
アメブロ記事保存方法
-
青唐辛子の一升漬けに白カビが...
-
FC2ブログが突然消えました。。。
おすすめ情報


説明不足でした。
この質問はトップページのタイトルリストでの表示についてです。
トップページでは新しい投稿順に数件タイトルリストが表示されるのですが、
そのリストには、記事中に使用している画像が表示されます。
そして、その画像の右側に記事のタイトルが表示されるのがパソコン。
画像の上に記事のタイトルが表示されるのがスマホ。
という状態です。(多分ほとんどのレスポンシブはこの仕様だと思います)
それをスマホから見ても、画像の右側にタイトル、という状態にする方法が知りたいです。