ブログコンテンツをセンタリングするインラインスタイルシートの記述方法.png

みなさん、こんにちは。
ブログ管理人のk.144です。

無料ブログでは、
設定画面や管理画面のなかに「HTML」と「CSS」のコードが記述されているところがありますよね。
この部分って素人にはとてもむずかしい内容だと思います。

でも、ここをいじってやるとブログのデザインを変えられることが少しわかってきました。

しかし、ここを変更するのはWEBデザイン素人の私にとってはハードルが高く、容易にできることではありません。

そこで今回は、

  • 記事の投稿画面からでも気軽に指定できる。
    インラインスタイルシートでデザインを変更してみよう!

という試みです。
 
まず、「インラインスタイルシート」ってなに?
を解決するために、
簡単にまとめた記事がありますので参照してみて下さい。
>>ブログ記事の入力画面で記述するインラインスタイルシートの書き方


コンテンツをセンタリングする方法


ブログ記事を投稿するなかで、画像や動画などを記事スペースの中央に寄せて表示させたい場合ってありますよね。
こんなとき私は、今回紹介する方法で記事を投稿しています。

  • 画像をセンタリングする
lion_a13.png
サンプル画像のライオンのイラストは、
「イラストポップ」さんからダウンロードしたものを掲載させていただいています。
>>ライオンの無料素材-イラストポップ


  • Youtubeの動画をセンタリングする



marginプロパティとwidthプロパティ


「margin」プロパティは、コンテンツの外側の余白を指定します。
 ・margin:一括指定する
 ・margin-top:上マージンを指定する
 ・margin-bottom:下マージンを指定する
 ・margin-left:左マージンを指定する
 ・margin-right:右マージンを指定する

width」プロパティは、コンテンツの横幅を指定します。
marginの図.png
指定方法は、
margin」プロパティで左右のマージンの値に「auto」を指定し、「width」プロパティでセンタリングするコンテンツの横幅を指定します。
これで記事スペース幅とコンテンツ幅から左右のマージンが算出され、センタリングされた位置にコンテンツが表示されます。


  • 使用例1:左右をそれぞれ指定する
<div style="margin-left:auto;margin-right:auto;width:400px;">
コンテンツ
</div>
width:コンテンツの幅が400pxの例
コンテンツ幅のみ指定し、左右のマージンは自動調節


  • 使用例2:上下左右を一括指定する
<div style="margin:10px auto 10px auto;width:400px;">
コンテンツ
</div>
センタリングに加え上下にマージン指定した例
marginプロパティの値は上・右・下・左の順に指定(上から時計回り)


  • 使用例3
使用例2は、marginプロパティの値を2つに省略して、次のように記述することもできます。
<div style="margin:10px auto;width:400px;">
コンテンツ
</div>
marginプロパティの値は上下・右左の順に指定


コンテンツを上下方向にセンタリングする方法


下の絵のように、上下方向にもセンタリングすることができます。

その方法を少し調べてみたところ、どうやら横方向センタリングのような単純な方法ではできないようです。

記事が長くなってしまったので、また次の機会に投稿してみたいと思います。

lion_a13.png


参考にさせていただいたサイト


marginプロパティについて詳しく解説されています。
http://www.htmq.com/style/margin.shtml右向き三角1margin-スタイルシートリファレンス


縦(垂直)方向の中央寄せについて詳しく解説されています。
http://c-brains.jp/blog/wsg/11/10/13-200523.php右向き三角1cssで縦方向中央に配置する方法(5つのケース+1) | バシャログ。


HTML Tips【preタグの使用方法】


上記の記事のなかで、HTMLコードの標記欄に使用してみました。

http://www.htmq.com/html/pre.shtml右向き三角1<PRE>-HTMLタグリファレンス






スポンサード・リンク