インスタ埋め込みの中央揃え

  • V

    いつもお世話になっております。
    「インスタ埋め込みの中央揃えが出来ません」

    ・テキスト画面で中央揃えのHTML入力しても無効。
    ・とあるブログで見つけたこちらのコードをCSSに入力してもエラーが起きます。
    .instagram-media {
    margin: 0 auto !important;
    }
    その他検索で得られるCSSも無効。

    何か方法はございませんでしょうか？
    よろしくお願いします。

    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン : 最新
    ご利用のサーバー名 : Xサーバー
    PHPのバージョン :
    OS : Windows
    ご利用のブラウザ : Googleクローム
    該当サイトのURL : https://toyama-best.com/hoshino-sukidon/

    0 1 件の返信

  • @vitamaru さん
    こんにちは。
    インスタで張り付ける時、
    style="" というのがあるので　そこに　margin-left:１em;
    （emは好きな数字）で、動かすことはできます。
    自分もインスタの張り付けをサイトでやっていた時があり、これだと、スマホでずれるはずだったので、
    max-width:540px;　を　max-width:797px;　辺りにして対応していました。
    min-width:326px;もありますが、こちらはスマホで採用されています。
    変えればもっと小さいスマホでも対応できます。

    お試しください。

    0
  • V

    margin-leftでは動かせませんでした。
    調べたところ現在は、埋め込みのmargin-leftでは動かせなくなってるそうです。

    できればサイズを変えずに中央寄せにしたいのですが、他に何かやり方はあるでしょうか？(TT)

    1 2 件の返信

  • @vitamaru さん。
    単純に　divでくくって　そのdivを　真ん中に持ってくるという方法になるかと思います。
    基本的には　正常な使い方なので、（こちらでサイトでやって確かめてませんが）動くかと思います。
    <div style="margin-left:ほにゃららpx"> インスタ</div>
    のインラインで行けるかともいます。
    使用度が高い（スマホで分岐させる）なら、ショートコードを作る方がいいと思います。

    1
    V
     2 件の返信
  • administrators

    @vitamaru さん

    こんにちは！
    現状では記事幅いっぱいに表示されているかと思います。

    これをサイズを小さくして中央寄せにしたいということでしょうか？？

    0
    V
     2 件の返信
  • V

    この投稿が削除されました！
    0
  • V

    この投稿が削除されました！
    0
  • V

    @benkbook
    なるほどです。
    この方法でPCでは中央寄せできましたが、スマホでは右側半分ほどがアウトしてしまいます。
    max-widhをいじると当然サイズアップするので、やはり大サイズで我慢するしかないのでしょうか。

    0 1 件の返信
  • V

    @Ryota
    こんにちは！
    そういうことです！

    <div style="margin-left:100px"> インスタ埋め込みコード</div>
    上記HTMLでＰＣ画面では中央に来ますが、元々センターに来ているスマホ画面では、その分右へずれてインスタ埋め込み半分が画面アウトしてしまいます。
    PC画面・スマホ画面共に、サイズをアップせずに中央に持っていきたいです。
    何か方法があればご教授頂けると幸いです。

    0

  • @vitamaru さん
    こんばんわ。
    functions.phpに以下をいれる。
    function jin_funcion( $atts, $content = null ) {
    extract( shortcode_atts( array(
    'id'=>'no-id',
    'class' => 'no-class',
    ), $atts ) );
    return '<div id="' . esc_attr($id) . '" class="' . esc_attr($class) . '">' . $content . '</div>';
    }
    add_shortcode('idsp', 'jin_funcion');

    カスタムCSSに

    @media (max-width: 767px) {
    div#sp {margin-left: 0em;}
    }

    @media (min-width: 835px) and (max-width: 1199px) {
    .sp{margin-left:12em;}}

    @media (min-width: 1200px) {
    .sp{margin-left:12em;} }
    ///////////////////////////////////////////////////////////////////////////////
    ショートコード
    [idsp id="sp" class="sp"] 　　インスタ　　[/idsp]

    でスマホとPCを別々に動かせますよ。
    スマホは真ん中に出るはずです。PCは12emを　動かしてください。
    大判のIPADは　styleの真ん中で動かせると思います。
    よろしくお願いいたします。

    0
  • V

    なるほどです！
    ありがとうございます！

    1