エントリーカードのカスタマイズ

このトピックには9件の返信が含まれ、2人の参加者がいます。3 ヶ月、 2 週間前 Hidekichi さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #49286 返信

    hashiribito

    simplicity2の提供ありがとうございます。
    初めてワードプレスを利用したのですが色々とカスタマイズができこのテーマを選んで本当に良かったと思っています。

    質問させてください。

    エントリーカードについてタイトルのみを表示するようカスタマイズしております。それに合わせて下記のように体裁を整えたいのですが方法が分からず困っています。子テーマをどう修正すれば良いかお教え頂けますでしょうか?サイトはhttp://kakekko.training-matome.comになります。
    ・エントリーカードの高さを低く調節したい
    ・上記に合わせてサムネイル画像の大きさを調節したい
    ・タイトルをエントリーカードの上下中央揃えで表示したい(現在は上揃えになっています)

    以上、よろしくお願いします。

  • #49303 返信
    わいひら
    わいひら
    キーマスター

    「エントリーカードの高さを低くする」と言っても、具体的にどのくらいでししょうか?
    エントリーカードの高さ、画像の縦横幅など、ピクセル数で、詳細を書いていただけると助かります。
    あと、記事を読むボタンが出ていると、タイトルを上下中央ぞろえにすると、タイトルと記事を読むボタンがかぶるかもしれませんが、それでも良いのでしょうか?

  • #49399 返信

    hashiribito

    返信ありがとうございます。ピクセル数について調べており返信遅れました。以下、回答です。

    ・エントリーカードの高さ、画像の縦横幅など、ピクセル数で、詳細を書いていただけると助かります。
    ➡エントリーカードは縦が160ピクセル、円の大きさは直径120ピクセルにしたいです。

    あと、記事を読むボタンが出ていると、タイトルを上下中央ぞろえにすると、タイトルと記事を読むボタンがかぶるかもしれませんが、それでも良いのでしょうか?
    →要件伝え損ねていましたが、mobileのみでお願いしている事項を実現したいです。その上で、mobile端末では続きを読むボタンを表示しない想定なので問題ありません。

    お手数ですがよろしくお願いします。

  • #49409 返信
    わいひら
    わいひら
    キーマスター

    現在モバイル(横幅320px端末)では、縦が115px、画像の縦横幅が100pxとなっているのですが、双方ともサイズを大きくするということでしょうか?

    ちょっと、完成度のイメージが湧かないので、完成したイメージ図を作成して、以下のアップローダーにアップして、画像のURLを貼り付けていただいてよろしいでしょうか。
    https://wp-simplicity.com/suport/topic/uploaders/

  • #49425 返信
    わいひら
    わいひら
    キーマスター

    あ、画像の縦横幅は、現在100pxの間違いでした。

  • #50139 返信

    hashiribito

    度々返信遅れ失礼いたします。
    pxについて勉強してやりたいことを整理しました。
    実現可能か含めてご相談させてください。

    やりたい内容は下記ページに写真つきで記載しております。
    http://kakekko.training-matome.com/page-42/

    どうぞよろしくお願いします。

  • #50145 返信

    Hidekichi

    画像が小さすぎて内容が読めないと思うのでアルファベットなりを振って説明するか、初めての方は必ずお読みくださいに書いてある説明画像用のアップローダーツールを利用してください。

  • #50163 返信
    わいひら
    わいひら
    キーマスター
  • #50212 返信

    hashiribito

    http://netakiri.net/uploader/src/up0240.png

    http://netakiri.net/uploader/src/up0239.png

    アップローダー使って登録しましたのでご確認頂けますでしょうか。できれば上の案を実現したいです。

  • #50214 返信

    Hidekichi

    サンプル: 1枚めの仕様に則ったサンプル | codepen
    フルページビュー

    PCなどある程度幅があるデバイスの場合は、仕様どおりに表示されますが、スマホサイズになると中身をかなり小さくしないとデザインが破綻する場合があります。
    なぜそうなるかは.entryに高さがあるからです。

    ここを狭くしたいという要望でもありますが、基本的に中に入る要素の文字数であったり高さが可変である以上、一定の値を超えた時にはみ出すのは当たり前です。
    はみ出したものを非表示にすることはできますが、中途半端なデザインとなります。はみ出したものを非表示にすればデザイン的な破綻は起きません。

    サムネイル部分の左端より任意の%離すというのは、サンプルでも仕様どおりやってますが、#mainに左右paddingがある限りムリです。
    #mainのpaddingを無くすことは可能ですが、その場合#mainの中身全てにwidthとそのmarginを設定しないといけません。#listはmargin:0にして#mainの幅いっぱい使えるようにした上で、他の要素にwidthとmarginの設置が必要になります。

    更に、デバイスが小さくなればおのずと画面幅も小さくなりますが、モバイルデバイスの場合、回転して横向きになると幅があるのに高さが低いということもあり、画面の高さを基準にすることは基本デザインが破綻します。
    各々のデバイスに合わせて回転した時のスタイルも書いておけば良いですが、基準が変われば基本見た目も変わりますので、画面がどう変わろうと変わらない基準を作る必要があります。

    ということで、サンプルを色々なデバイス・方向で確認して再度仕様を練ってください。

返信先: エントリーカードのカスタマイズ
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)