質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

321閲覧

WordPressスマホとPCの表示出し分け(CSS)

Naokoro

総合スコア19

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2019/01/23 04:28

PC・スマホ両デバイスにおけるブログカードのレイアウト調整

CSS初心者のなおころと申します。

運営しているブログの
ブログカードに表示される
「あわせて読みたい」周りのレイアウトを修正したいです。

●現在の状態
スマホ版:適切に表示されている
イメージ説明

PC版:文字列の後半部分「たい」がボックスからはみ出している
イメージ説明

●試したこと: .blog-card-hl-box内の調整
PC版の文字列がすべてボックス内に収まるように
ボックスの横幅を大きくすると
スマホ版では必要以上にボックスの横幅が広くなってしまいます。

PCで見てもスマホで見ても
ボックスの幅が文字幅を少し超える程度に
調整するにはCSSにどのような変更を加えればよろしいでしょうか?
ご回答いだけますと幸いです。  

.blog-card-hl-box {
font-size: 12px;
font-weight: 500;
padding: 7px 10px;
top: -15px;
left: 20px;
width: 132px;
} 

運営ブログ:https://availability89.com/kochi-living/recommendation-spot/
使用テーマ:JIN

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.blog-card-hl-boxのwidthの指定を削除
.blog-card .blog-card-hl::afterのposition:absolute;指定を削除

投稿2019/01/23 05:50

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Naokoro

2019/01/23 10:32 編集

以下の記述を追加してみたところ PC版でのボックス幅に変化が現れませんでした。 ミスなどありましたら ご指摘いただけますと幸甚です。 大変申し訳ありませんが お手すきの際にお返事いただけますと嬉しいです。 .blog-card-hl-box{ white-space: nowrap;  width: auto; } .blog-card .blog-card-hl::after{ position: static; }
KazuhiroHatano

2019/01/23 10:42

ブラウザのコンソールでどっちの指定が生きてるのか確認 CSSの指定を上書きしたいならより強いセレクタでCSSを指定
Naokoro

2019/01/23 11:17

スタイルシートに直に書くことで無事に解決しました! ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問