vertical-align:画像(絵文字とか)を文字の位置と合わせるスタイルシート


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:656 | Leave a comment

先日、過去記事を編集してて、

文字と文字の間に画像を入れた時に、画像を綺麗におさめるために書いたCSS。

もしかしたら、需要があるかと思い書き残しとこうと思います。

画像と文字の位置を揃えるには

例えばこんな時

サンプル:ホームシェアリングできなくてアレコレやってみてもダメなときは・・・
CSSで設定なし

”どうしても”と”ホームシェアリング”の間にホームシェアリングボタンを入れたかったんだけど、
なにも設定しないとへんてこりんです(ほらね)。

それを、ちゃんとおさまる様にしたいわけです。
(下図参照)

CSSでmiddleに設定

スタイルシートで調整

プロパテイ:vertical-align

まずは初期値。指定しないとこの初期値が適用されます。

baseline

画像の下端とホームシェアリングボタン親要素のベースラインと揃える

top

画像の上端とホームシェアリングボタン行の上端を揃える

 

middle

画像の中心とホームシェアリングボタン親要素の文字の中心を揃える

 

bottom

画像の下端とホームシェアリングボタン行の下端を揃える

 

text-top

画像の上端とホームシェアリングボタン親要素のフォントの上端を揃える

 

text-bottom

画像の下端とホームシェアリングボタン親要素のフォントの下端を揃える

ねこもりやの場合

投稿の中の画像には、上下に”margin”を設定しているので(下図参照)、vertical-aliginを使うならmiddleが最適です。

もしくは、設定されている”margin”を打ち消す「margin:0;」を設定するかですね。

画像にmarginpaddingなどを設定していない場合は、なにもしなくてもいいでしょうけど、通常は、画像にぴったり文字がくっつくのはよろしくないので設定してあることの方が多いんじゃないかなと。

上下にmarginを設定しているので

画像にスタイルを設定する方法

投稿画面で画像にスタイルを指定するには、
指定したい画像をクリックすると出てくる”画像を編集アイコン”をクリックします。
(下図参照)
画像を編集アイコンをクリック
すると下図のようなウインドウが開きます。

ふたつ、方法があります。

詳細タブの詳細画像設定でスタイルを設定

設定されているクラスを削除

上の詳細タブをクリックし”CSSクラス”の部分で設定されているスタイルを削除します。

ここの場合は、「alignnone」に”margin”が設定されているので「alignnone」を削除します。
”更新”をクリックで閉じます。

スタイルを直接指定

上の”詳細タブ”をクリックし、”詳細画像設定”の”スタイル”の部分でスタイルを設定して、”更新”をクリックで閉じます。
例:vertical-aligin:middle; margin:0;など。

これで、画像に個別にスタイルを設定できます。

スタイルシートの適用順位

参考:スタイルの優先順位-CSSの基本

より、タグ(HTML)に近い方が優先されます。
1.タグに指定

2.HTML内

3.外部スタイルシート

注:wordpressの場合、「2.HTML内」をhead内に書くと全ての投稿でそのスタイルを読み込むのですべてに適用されます。
投稿画面内に書くとその投稿内だけに適用になるはず。

画像へのスタイルの設定については、投稿画像全てのスタイルを変更する方法も解説されていますが、全ての画像の”margin”や”padding”を解除するとまずい場合もあるかと思います。

もし、すべての画像に余白なしを設定しても大丈夫なら、余白を取り消すCSSを上書きすればいいと思います。

例えば、ここの場合は投稿内の画像(画像位置指定なしの場合)には、”margin”が上下に10px指定してあります。

コレを、打ち消すなら、投稿内に

を入れればいいですよね。

もちろん、投稿すべてで適用するなら、投稿内ではなく、スタイルシートを書き換えて。

投稿内に簡単にCSSを入力

特定の投稿だけにスタイルを適用したいなら、プラグインAddQuicktag を使うと楽ちんかも。

これを、 AddQuicktag の設定画面で”開始タグ”に全部入れて”終了タグ”なしで。(分けても問題ないけど)

AddQuickTagに追加

で、スタイルの上書きが必要な時に、
投稿画面の最後で、これをクリックすればOK!

AddQuickTagでクリック

 

ビジュアルエディタでは、なにも表示されないけどテキストエディタで見てみると入力されてるのがわかるはずです。

後記

ネット上には、この他にも画像周りのCSSについては沢山の解説があります。

ご自分の環境に合わせて色々試して見ることがいちばんですよね、勉強のためにも。

今回、調べてみただけでも本当に何十とありましたが、「う~~ん、、、」となる??なモノもあったので、やはり身を持って体験して他のページに影響があったりとか、なにかマズイ状態を体験すると身に付くんじゃないかって気がするのです。

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , | 閲覧数:656 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

  • 薄墨

Leave a Reply

Required fields are marked *


CAPTCHA