Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › サムネイル表示時のテキスト縦配置をミドルにする方法
- このトピックには6件の返信、2人の参加者があり、最後に
JOINにより10年、 2ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年7月29日 10:47 AM #43980
JOIN
ゲストいつも拝見しています。
ありがとうございます。サイドバーウィジェット-新着記事で、
サムネイル表示時のテキスト縦配置をミドルにする方法を知りたいです。CSSのどのあたりをどのように設定すればいいかをお教えください。
よろしくお願いします。
-
2016年7月29日 3:09 PM #43986
Hidekichi
ゲストつまり、サムネイルと文字を縦中揃えにしたいということですか?
-
2016年7月29日 5:06 PM #43990
JOIN
ゲストはい、そうです。
お手数を掛けます。 -
2016年7月29日 6:14 PM #43997
わいひらキーマスター「サムネイルと文字を縦中揃え」ということは、「表示タイプ 」は「タイトルを重ねた大きなサムネイル」選択時ということですか?
できれば、サイトのURLを貼り付けていただければ、設定状態がわかるので助かります。 -
2016年7月29日 8:07 PM #43999
Hidekichi
ゲストサンプル: 新着ウィジェットのサムネイルとそのタイトルを縦中央 | codepen
こんな感じでしょうか。
cssはscssで書いてあるので、css欄の∨ボタンより、view compiled cssからcssに変換したものを子テーマstyle.cssへ追記します。flexを利用していますが、基本的にflexでレイアウトというよりは、align-items: centerが使いたいだけでflexを利用しています。flexを使っているのでfloatは必要ありませんし、高さも出ますからレイアウトはしやすくなるだろうと思います。
デフォルトの新着ウィジェットのline-heightは150%ですが、タイトルが長くなった場合に広がり過ぎな感じがしたので1.3(130%)にしてあります。タイトルが短い場合(サムネイルの高さに納まる時)は、タイトルがサムネイルの中央へ、逆にタイトルが長い場合はサムネイルが中央へとなりますが、基本的にはどちらに対しても縦中央寄せ(align-items: cneter)が効いているので自動的に真ん中で揃います。
文字サイズを変更する場合は、liに任意のfont-sizeを入れて、aにfont-size: inherit;を入れて下さい。
aに直接スタイルしても良いですが、順番的には、liにスタイルしたものをaに継承するのが通常です。この場合にイレギュラーなスタイルをaに入れる場合(liのスタイル指定でできない場合や、aに指定したほうが良いと判断した場合)のみaにスタイルして下さい。これらはa自体に何かしらのスタイルがない場合はliから自動的に継承されます。
aは、ブラウザ側で独自にcolor(リンクカラー)を持っています。そのため、colorやtext-decorationのunderlineはaで解除する必要がありますが、それ以外は通常親要素から継承されます。
li { color: #333; line-height: 1.3; } li a { color: inherit; }こうすると、aの色はliの#333が継承され、行間は1.3となります。aにスタイルしてしまうとliでスタイルできなくなってしまうため場合によっては、liにもaにもスタイルをしないといけない場合が出てくるので、考え方としては、まずliで共通のスタイル(font-sizeや基本的な文字色、また行間等)をした上で、aにもそれに加えて何かしらスタイルをする場合のみaにスタイルをすると言う方がベターかと思います。
-
2016年7月29日 8:09 PM #44000
Hidekichi
ゲストわいひらさんが言うように、表示している内容(タイプ)によって変更する必要が出てくるので、デフォルトで利用しているか、何かしらサムネイルの表示を変えているかが必要ですね。
デフォルトでなら先レスみたいなサンプルでいけます。
-
2016年8月1日 8:31 AM #44014
JOIN
ゲストデフォルト表示(このページの新着記事と同様)です。
テキストの上寄りを中央表示にできたらと思っています。
サムネイルの設定は、そこまで考えが及ばない私のスキルレベルです。サンプルありがとうございます。
恐縮です。チャレンジしてみます。
-
-
投稿者投稿
- フォーラム「テーマファイルのカスタマイズに関する質問など」には新規投稿および返信を追加できません。