みなさんこんにちは、ぱるです。みなさんはワードプレスを使っていますか？その時にうまく画像が記事に配置できないことありませんか？
今日はそんな画像についてのお悩みを解決できればと思います ^ ^
- 💡こんな方のための解決💡
◎ワードプレスで画像が中央揃えにならない
パソコンに慣れてないとHTMLとかCSSって難しく感じる。。
今日は簡単に画像を中央にする方法を教えるんだも！
中央揃えのボタンを押しても中央揃えにならない？
操作がしやすいワードプレス。ですがたまにあれ？なんかおかしい？と思う時があります。コードを貼っても反映されない。太文字ボタンを教えてもうんともすんとも言わない。など。。
困りますよね ^ ^ ; 私も何度もトライ&エラーでやってきました！
一般的な中央揃えの操作方法
たとえばこの記事のブログの画像であれば、最初は画像を追加するとみんな左揃えでアップロードされますよね。
こんな感じです。それを画像のプロパティツールから中央揃えにする方法で中央揃えにしますよね？大抵の画像は中央に揃ってくれますがたまに中央揃えにしても、ならないものが存在します！
ここのところからこんな感じでやるのが一般的ですよね。でもプレビューを見ると・・・
あれ〜。なんでか左揃えになってます ; v ;
こんなことがよく起きるんですよね。。
解決方法 その１ 画像の寸法を50%に縮小する！
画像の寸法を50%の縮小すると、大きすぎる画像を縦横比を変えずに小さくしてくれます。それから画像のつまみをドラッグして適切な大きさに変えていきます。
ただし、これだと何度も大きさを調整していきプレビューを確認しながら画像が中央にくるまで下書きとプレビューを行ったり来たりする必要があります。
少し面倒だね。。
解決方法 その２ コードに直接aligncenterを入力する
次が簡単な方法です！コード入力がひつようですが、画像のhtmlにこのaligncenterという中央揃えの効果を持つコードを入れていきましょう ^ ^
この３つのドットからHTMLとして編集を選択します。すると以下のように画像がhtml化されました。
コードを見てみると中央揃えしているように、aligncenterのコードがここありますよね。ってことは中央揃えになるんじゃないの？って感じですよね。
一応コードはこれはfigure classの中に入っているのですがfigureというのが画像のまとまりに使われる要素です。
中央揃えになっているけどもしかして場所が間違っている？
これを移動してみましょう。これを以下の画像のように場所を変えて見ました。
imgタグの中のclass=”aligncenter wp・・・と続くように、wpの前にストンと入れると・・・
なったぞ〜〜 ^ ^
やったー！画像が中央揃えになってる！
この方法で中央揃えにすることができました！なのでみなさんも画像サイズなど設定が面倒な時で中央揃えにならないときはこの方法をお勧めします！
○aligncenterの位置をimgタグ内のwpの前へ
○中央揃えにしてからだと元あるaligncenterの削除とwpの前に半角スペースを忘れずに！
まとめ
これで画像を中央にするのも怖くないぞ ^ ^ みなさんも試して見てくださいね！
ここまで見ていただきありがとうございます！
- 💡画像が中央揃えにならない対処法まとめ💡
◎解決策1 画像を50%に縮小し手作業で修正していく
◎解決策2 aligncenterの位置を変える！(お勧め)
コメント