Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › エントリーカードのカスタマイズ
- このトピックには9件の返信、2人の参加者があり、最後にHidekichiにより7年、 1ヶ月前に更新されました。
-
投稿者投稿
-
-
hashiribitoゲスト
simplicity2の提供ありがとうございます。
初めてワードプレスを利用したのですが色々とカスタマイズができこのテーマを選んで本当に良かったと思っています。質問させてください。
エントリーカードについてタイトルのみを表示するようカスタマイズしております。それに合わせて下記のように体裁を整えたいのですが方法が分からず困っています。子テーマをどう修正すれば良いかお教え頂けますでしょうか?サイトはhttp://kakekko.training-matome.comになります。
・エントリーカードの高さを低く調節したい
・上記に合わせてサムネイル画像の大きさを調節したい
・タイトルをエントリーカードの上下中央揃えで表示したい(現在は上揃えになっています)以上、よろしくお願いします。
-
わいひらキーマスター
「エントリーカードの高さを低くする」と言っても、具体的にどのくらいでししょうか?
エントリーカードの高さ、画像の縦横幅など、ピクセル数で、詳細を書いていただけると助かります。
あと、記事を読むボタンが出ていると、タイトルを上下中央ぞろえにすると、タイトルと記事を読むボタンがかぶるかもしれませんが、それでも良いのでしょうか? -
hashiribitoゲスト
返信ありがとうございます。ピクセル数について調べており返信遅れました。以下、回答です。
・エントリーカードの高さ、画像の縦横幅など、ピクセル数で、詳細を書いていただけると助かります。
➡エントリーカードは縦が160ピクセル、円の大きさは直径120ピクセルにしたいです。あと、記事を読むボタンが出ていると、タイトルを上下中央ぞろえにすると、タイトルと記事を読むボタンがかぶるかもしれませんが、それでも良いのでしょうか?
→要件伝え損ねていましたが、mobileのみでお願いしている事項を実現したいです。その上で、mobile端末では続きを読むボタンを表示しない想定なので問題ありません。お手数ですがよろしくお願いします。
-
わいひらキーマスター
現在モバイル(横幅320px端末)では、縦が115px、画像の縦横幅が100pxとなっているのですが、双方ともサイズを大きくするということでしょうか?
ちょっと、完成度のイメージが湧かないので、完成したイメージ図を作成して、以下のアップローダーにアップして、画像のURLを貼り付けていただいてよろしいでしょうか。
https://wp-simplicity.com/suport/topic/uploaders/ -
わいひらキーマスター
あ、画像の縦横幅は、現在100pxの間違いでした。
-
hashiribitoゲスト
度々返信遅れ失礼いたします。
pxについて勉強してやりたいことを整理しました。
実現可能か含めてご相談させてください。やりたい内容は下記ページに写真つきで記載しております。
http://kakekko.training-matome.com/page-42/どうぞよろしくお願いします。
-
Hidekichiゲスト
画像が小さすぎて内容が読めないと思うのでアルファベットなりを振って説明するか、初めての方は必ずお読みくださいに書いてある説明画像用のアップローダーツールを利用してください。
-
わいひらキーマスター
確かに、ちょっと画像が小さいので、もう少し大きな画像を見れるようにしていただけると助かります。
http://kakekko.training-matome.com/wp-content/uploads/2017/01/%E7%94%BB%E9%9D%A2%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E2%91%A1-300×211.png
http://kakekko.training-matome.com/wp-content/uploads/2017/01/%E7%94%BB%E9%9D%A2%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E2%91%A0-300×260.png -
hashiribitoゲスト
http://netakiri.net/uploader/src/up0240.png
http://netakiri.net/uploader/src/up0239.png
アップローダー使って登録しましたのでご確認頂けますでしょうか。できれば上の案を実現したいです。
-
Hidekichiゲスト
サンプル: 1枚めの仕様に則ったサンプル | codepen
※ フルページビューPCなどある程度幅があるデバイスの場合は、仕様どおりに表示されますが、スマホサイズになると中身をかなり小さくしないとデザインが破綻する場合があります。
なぜそうなるかは.entryに高さがあるからです。ここを狭くしたいという要望でもありますが、基本的に中に入る要素の文字数であったり高さが可変である以上、一定の値を超えた時にはみ出すのは当たり前です。
はみ出したものを非表示にすることはできますが、中途半端なデザインとなります。はみ出したものを非表示にすればデザイン的な破綻は起きません。サムネイル部分の左端より任意の%離すというのは、サンプルでも仕様どおりやってますが、#mainに左右paddingがある限りムリです。
#mainのpaddingを無くすことは可能ですが、その場合#mainの中身全てにwidthとそのmarginを設定しないといけません。#listはmargin:0にして#mainの幅いっぱい使えるようにした上で、他の要素にwidthとmarginの設置が必要になります。更に、デバイスが小さくなればおのずと画面幅も小さくなりますが、モバイルデバイスの場合、回転して横向きになると幅があるのに高さが低いということもあり、画面の高さを基準にすることは基本デザインが破綻します。
各々のデバイスに合わせて回転した時のスタイルも書いておけば良いですが、基準が変われば基本見た目も変わりますので、画面がどう変わろうと変わらない基準を作る必要があります。ということで、サンプルを色々なデバイス・方向で確認して再度仕様を練ってください。
-
-
投稿者投稿