文字が中央寄せで
左揃えってどうやるの？

ブログ運営について

当ブログでは
よくお越しいただくお客様も
許可を取った上で稀に登場いたします
（仮名：Aさん/Bさん/お客様として）

宜しくお願いいたします

こんにちわー

Bさん
Bさん
Rito
Rito

あら？今日はお1人？

いらっしゃーい♪

Aさんも誘ったのだけど
今日は用事があるみたいで；

Bさん
Bさん
Rito
Rito

なるほどねー
ゆっくりして行ってー

相方
相方

あらいらっしゃい♪

飲み物はお茶にする？
コーヒーにする？

それとも・・・
わ・た・し？♡

Rito
Rito

やめろ気色悪い・・・

じゃあ・・・
相方さん一つで~

Bさん
Bさん
相方
相方

まいどっ♪
相方一丁はいりまーす♪

ついていけん・・・

Rito
Rito

今回お邪魔した
理由なのですが
ちょっと
聞きたいことがあって

Bさん
Bさん
相方
相方

私のスリーサイズ？

Rito
Rito

そんなわけあるかっ！！

地味に知りたいかも・・・

Bさん
Bさん
相方
相方

えーっとね・・・
上から~・・・

Rito
Rito

他でやってくれ！！

冗談はさておき
この間ショートコードの
記事あったじゃないですか？

Bさん
Bさん

冗談だったんか・・・

相方
相方
Rito
Rito

・・・。

うんうん。
この間の記事ね。

その記事見てから
自分のブログを
色々いじろうとして
パンダさんの記事を
見てたのですが・・・

Bさん
Bさん
Rito
Rito

ほうほう・・・

（なんかパンダってあだ名で定着してるな・・・）

文字を中央寄せにして
且つ左揃えにする方法が
わからなくて・・・

Bさん
Bさん
相方
相方

なるほどね♪
それなら
まずは私とハグをして
頭撫でてくれたら
教えてあｇ・・・

Rito
Rito

頼むからあっちに
行っててくれ・・・

中央揃えで文字を左揃えにする方法

Rito
Rito

僕はプログラマーではないから
わかる範囲で教えるねー

承知いたしましたー

Bさん
Bさん

使うコード

  1. <style>
  2.   .wrapper {
  3.     max-width: 300px;
  4.     margin: 0 auto;
  5.     text-align: center;
  6.     background: #ffffff00;
  7.   }
  8.   .txt {
  9.     display: inline-block;
  10.     text-align: left;
  11.   }
  12. </style>
  13. <div class="wrapper">
  14.   <p class="txt"><b>
  15. ・文字<br>
  16. ・文字2
  17.   </b></p>
  18. </div>
Rito
Rito

ブロックエディタを
使っているなら
カスタムHTMLで
上記のコードを入れるだけ
です

ほうほう・・・
他になにか設定は
するんですか？

Bさん
Bさん
Rito
Rito

いや、これだけです

カスタムHTMLに
それ入れるだけで
良いんですか？♪

Bさん
Bさん
Rito
Rito

そうだよー

ちなみに

  1. <style>
  2.   .wrapper {
  3.     max-width: 300px;
  4.     margin: 0 auto;
  5.     text-align: center;
  6.     background: #ffffff00;
  7.   }
  8.   .txt {
  9.     display: inline-block;
  10.     text-align: left;
  11.   }
  12. </style>
  13. <div class="wrapper">
  14.   <p class="txt"><b>
  15. ・あいうえお<br>
  16. ・かきくけこ
  17.   </b></p>
  18. </div>

上記のように入れた場合は

このようになります

・あいうえお
・かきくけこ

これは上下ともに
同じ文字数だから
揃ってますけど
文字数が違った場合って
どうなりますか？

Bさん
Bさん
Rito
Rito

例えば

通常の中央揃えだと

通常

・あいうえお
・かきくけこさしすせそ
・たちつてと

上記のようになってしまうのですが

先ほどのコードを使うと

・あいうえお
・かきくけこさしすせそ
・たちつてと

Rito
Rito

このようになります

おー理想形だ♪

Bさん
Bさん

ちなみに

このコードは
inline-blockを利用して
中央寄せしているので
このようなコードを使用しています

コード内の「#ffffff00」の
カラーコードを変えることで
色付きの枠で囲う事もできます

  1. <style>
  2.   .wrapper {
  3.     max-width: 300px;
  4.     margin: 0 auto;
  5.     text-align: center;
  6.     background: #e6e6fa;
  7.   }
  8.   .txt {
  9.     display: inline-block;
  10.     text-align: left;
  11.   }
  12. </style>
  13. <div class="wrapper">
  14.   <p class="txt"><b>
  15. ・あいうえお<br>
  16. ・かきくけこさしすせそ<br>
  17. ・たちつてと
  18.   </b></p>
  19. </div>
Rito
Rito

上記のように
カラーコードを
変えた場合は

文字が中央寄せで左揃えってどうやるの
Rito
Rito

このように
色付きの枠も
つけることができます

おぉー♪

Bさん
Bさん
Rito
Rito

#ffffff00は
色を付けない為に
透明にしているだけです

カラーコードに関しては
Google検索などで
「HTML カラーコード」
などで検索すると出てきます

おわりに

Rito
Rito

こんな感じで
宜しいでしょうか？

ありがとうございます♪

早速、家に帰ったらやってみます

Bさん
Bさん

・・・・

相方
相方
Rito
Rito

どうしたよ・・

最近さー・・・
わたし出番無くね？

相方
相方
Rito
Rito

変な女性キャラとして
出番があるじゃない♪

変な・・・？

変なのか？
私は変なのか？

相方
相方
Rito
Rito

・・・・
（段々とキャラが
崩壊してるがな）

あ・・・あと
記事内で移動？
する方法も知りたいのですが；

Bさん
Bさん
Rito
Rito

記事内のリンクかな？
それでは、次の記事で
説明します♪

はーい♪

Bさん
Bさん

記事内リンクの方法の記事

Ritopan ブログ
「WordPress」記事内で移動させるのってどうやるの？ HTML
https://rtjpn.com/list/wordpress/wordpress-html-blog-link-inthearticle
記事内で移動させるのってどうやるの？前回に続き宜しくお願いします前回のブログはこちらはーい♪記事内で指定した場所に飛ばす方法だったよね？（記事内リンク）そうです♪承知しましたー記事内で指定場所に飛ばすとは？例えば「詳細はこちらをクリック」と書いてある場所をクリックするとその記事内にある下部の方に画面が移動するページってありますよね？上記の方法です (adsbygoogle = window.adsbygoogle || ).push({});方法まずはWordpressの場合はクリックしてもらいたい場所に下記のコードを「カスタムHTML」で入力します...