ウィジットのイラストを中央に｡

  • 解決済 WP_manabu

    (@wp_manabu)


    5年、 7ヶ月前

    ウィジットに貼ったイラストのレイアウトを変えたいと思いまして｡以下のスタイルシートを記述しました｡

    img.image.wp-image-12480.attachment-full.size-full {
    margin-bottom: -10px;
    text-align:center 
}

    で､イラスト下部のマージンは有効になったのですが､
    ウィジットの中央にレイアウトする（つもり）のプロパティは､うまく反映されないのです｡
    テーマはtwenty seventeenです｡

    お気づきの点がありましたら､どうぞ､ご指摘くださいませ｡

    （要ヘルプへのリンクのウェッブサイトの､リスのイラストです）

    ヘルプの必要なページ: [リンクを見るにはログイン]

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • DRILL LANCER

    (@rickaddison7634)

    5年、 7ヶ月前

    ↓ウィジェットの記述↓

    
<div class="align-center">
    <img src="略" alt="ry">
</div>

    ↓CSSの記述↓

    
.align-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

    としてみてはいかがでしょうか？

    ishitaka

    (@ishitaka)

    5年、 7ヶ月前

    画像 CSS クラス（画像詳細画面より、[上級者向け設定]－[画像 CSS クラス]）に、「aligncenter」を追加するのもいいかもです。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    アドバイス､ありがとうございまーす!

    RICKさんへ

    やってみました｡がしかし｡つたない当方の知識でやってみたところ､やはりダメでしたー｡で､ひとつ確認させてください｡「ウィジットへの記述」というのは､sidebar.phpへの記述で､よかったでしょうか｡

    ishitakaさんへ

    投稿ページ､固定ページを作成するさいに､なんどか（当該画像のクリック > 鉛筆マークをクリックにて）画像詳細を利用したことがあります｡しかし､ウィジットで利用したことが､なくって｡いろいろ探ってみたのですけれど､ウィジットでの画像詳細を見つけることができませんでした｡すみません､どこにあったりするのでしょうかー｡

    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    ishitakaさま

    ありました､ありました｡失礼しました｡で､できましたー｡

    ishitaka

    (@ishitaka)

    5年、 7ヶ月前

    対象の画像は、画像ウィジェットの画像と思われます。
    この画像ウィジェットの画像（または [画像を編集] ボタン）をクリックして表示される画面（画像詳細）の、[上級者向けの設定]－[画像 CSS クラス] 項目に aligncenter を入力してみてください。

    ishitaka

    (@ishitaka)

    5年、 7ヶ月前

    レスが行き違いになってしまいました。(^^;
    解決したということでいいのかしら・・・

    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    解決済みでーす｡RICKさま､ishitakaさま､いつも､ありがとうございまーす!

    ためしに「画像CSSクラス」に､text-align:centerを入れてみましたが反映しないのですね｡aligncenter､ですね｡後者は､Wordpressならではのものでしょうかね｡

    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    RICKさま

    ちがうファイルに記述したりしていたかもー｡お手数をおかけしています｡

    ishitaka

    (@ishitaka)

    5年、 7ヶ月前

    [画像 CSS クラス] は、スタイルではなくクラスを指定する項目です。
    aligncenter は、WordPress で一般的に使用されているもので、テーマの style.css などで定義されているものです。

    • この返信は5年、 7ヶ月前にishitakaが編集しました。
    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    あ､クラスでしたか｡

    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    解決済みとさせてくださーい!

    DRILL LANCER

    (@rickaddison7634)

    5年、 7ヶ月前

    解決したようで何よりですが、今後のことを考える意味で少々弁明させていただきます。

    ↓ウィジェットの記述↓

    <div class="align-center">
    <img src="略" alt="ry">
</div>

    ↓CSSの記述↓

    .align-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

    上記の記述はカスタムHTMLウィジェットやテキストウィジェットを想定したものです。

    text-align:center;
    ↑このクラスが付与されたタグの内部の文字や画像等のインライン要素を中央に配置

    margin-left:auto;
margin-right:auto;

    ↑このクラスが付与されたタグの内部のブロック要素を中央に配置

    インライン要素とブロック要素の違いは
    タグを閉じたあと表示上改行されるのがブロック要素で、
    タグを閉じたあとでも表示上改行が入らないのがインライン要素です。

    • この返信は5年、 7ヶ月前にDRILL LANCERが編集しました。
    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    RICKさま

    お手数をおかけしました｡

    ウィジットに関するHTMLの記述は､ウィジット > カスタムHTMLですね｡またひとつ知識が増えました｡ありがとうございます｡

    文字や画像を中央にレイアウトするばあい､インライン要素､ブロック要素両方のプロパティとプロパティー値を記述した方が良いのでしょうか｡

    text-align:center;
    と

    margin-left:auto;
margin-right:auto;

    片方ではなく､両方､併記した方がよいのでしょうか｡

    さらに､
    Wordpressで画像のレイアウトをセンターにしたいとき､aligncenteのクラスと､上記のプロパティとプロパティ値､どちらの方がスマートな利用になったりしますかー｡

    DRILL LANCER

    (@rickaddison7634)

    5年、 7ヶ月前

    align-centerクラスを文字や画像等のインライン要素のみを
    中央揃えするためのクラスにする場合は

    .align-center{
    text-align:center;
}

    のみで構いません。

    逆に、align-centerクラスをブロック要素を
    中央揃えするためのクラスにする場合は

    .align-center{
    margin-left:auto;
    margin-right:auto;
}

    とすればよいでしょう。

    align-centerクラスでインライン要素もブロック要素も
    中央揃えにするためのクラスにする場合は

    .align-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

    とすればよいでしょう。

    要はお好みでどうぞということです。

    • この返信は5年、 7ヶ月前にDRILL LANCERが編集しました。
    トピック投稿者 WP_manabu

    (@wp_manabu)

    5年、 7ヶ月前

    なんとなく､かんじは､わかりまーす｡ありがとうございます!!

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「ウィジットのイラストを中央に｡」には新たに返信することはできません。