文字が中央寄せで
左揃えってどうやるの？
本記事の概要
ブログ運営について
こんにちはー
いらっしゃーい♪
あら？
本日はおひとり？
Aさんも誘ったのだけど
今日は用事があるみたいで；
なるほどねー
ゆっくりして行ってねー
あらいらっしゃい♪
飲み物はお茶にする？
コーヒーにする？
それとも・・・
わ・た・し？♡
やめろ気色悪い・・・
じゃあ・・・
相方さん一つで~
まいどっ♪
相方一丁はいりまーす♪
ついていけん・・・
今回お邪魔した
理由なのですが…
ちょっと
聞きたいことがあって
私のスリーサイズ？
そんなわけあるかっ！！
地味に知りたいかも・・・
えーっとね・・・
上から~・・・
他でやってくれ！！
冗談はさておき
この間ショートコードの
記事あったじゃないですか？
冗談だったんか・・・
・・・。
うんうん。
この間の記事ね。
その記事見てから
自分のブログを
色々いじろうとして
パンダさんの記事を
見てたのですが・・・
ほうほう・・・
（パンダってあだ名で定着してるな…）
文字を中央寄せにして
且つ左揃えにする方法が
わからなくて・・・
なるほどね♪
それなら
まずは私とハグをして
頭撫でてくれたら
教えてあｇ・・・
頼むからあっちに
行っててくれ・・・
中央揃えで文字を左揃えにする方法
僕はプログラマーではないから
わかる範囲で教えるねー
使うコード
- <style>
- .wrapper {
- max-width: 300px;
- margin: 0 auto;
- text-align: center;
- background: #ffffff00;
- }
- .txt {
- display: inline-block;
- text-align: left;
- }
- </style>
- <div class="wrapper">
- <p class="txt"><b>
- ・文字<br>
- ・文字2
- </b></p>
- </div>
ブロックエディタを
使っているなら
カスタムHTMLで
上記のコードを入れるだけ
です
ほうほう・・・
他になにか設定は
するんですか？
いや、これだけです♪
カスタムHTMLに
それ入れるだけで
良いんですか？♪
そうですー
ちなみに
- <style>
- .wrapper {
- max-width: 300px;
- margin: 0 auto;
- text-align: center;
- background: #ffffff00;
- }
- .txt {
- display: inline-block;
- text-align: left;
- }
- </style>
- <div class="wrapper">
- <p class="txt"><b>
- ・あいうえお<br>
- ・かきくけこ
- </b></p>
- </div>
上記のように入れた場合は
・あいうえお
・かきくけこ
これは上下ともに
同じ文字数だから
揃ってますけど
文字数が違った場合って
どうなりますか？
例えば
通常の中央揃えだと
・あいうえお
・かきくけこさしすせそ
・たちつてと
上記のようになってしまうのですが
・あいうえお
・かきくけこさしすせそ
・たちつてと
このようになります
おー理想形だ♪
ちなみに
このコードは
inline-blockを利用して
中央寄せしているので
このようなコードを使用しています
コード内の「#ffffff00」の
カラーコードを変えることで
色付きの枠で囲う事もできます
- <style>
- .wrapper {
- max-width: 300px;
- margin: 0 auto;
- text-align: center;
- background: #e6e6fa;
- }
- .txt {
- display: inline-block;
- text-align: left;
- }
- </style>
- <div class="wrapper">
- <p class="txt"><b>
- ・あいうえお<br>
- ・かきくけこさしすせそ<br>
- ・たちつてと
- </b></p>
- </div>
上記のように
カラーコードを
変えた場合は
このように
色付きの枠も
つけることができます
おぉー♪
#ffffff00は
色を付けない為に
透明にしているだけです
カラーコードに関しては
Google検索などで
「HTML カラーコード」
などで検索すると出てきます
おわりに
こんな感じで
宜しいでしょうか？
ありがとうございます♪
早速、家に帰ったらやってみます
・・・・
どうしたよ・・・
最近さー・・・
わたし出番無くね？
変な女性キャラとして
出番があるじゃない♪
変な・・・？
変なのか？
私は変なのか？
・・・・
（段々とキャラが崩壊してるがな）
あ・・・あと
記事内で移動？
する方法も知りたいのですが；
記事内のリンクかな？
それでは、次の記事で
説明します♪
はーい♪