ワードプレス・・川柳を縦書きに‥・追加CSS

2024年1月24日
こんにちわ
デクの坊、シニアすて吉っつぁんです

ホームページでの話です
ワードプレスで
川柳を縦書きにしようとやってみました

コピペでいけるサイトをググりました

できそうでしたが、文字が重なったりして
根本的に何かおかしいと直感

色々やって、思い当たるところは
テーマCocoonのフォント設定を
明朝にしているせいかなと思っていました

案の定、デフォルトのフォントにすると
うまくいきました

でも他の所は明朝にしたかったのでCSSのブロックだけを
縦書きにしようと、AIにコードを教えて貰って次の様にしました

---

ワードプレスで
＜外観＞　→　＜追加CSS＞で　コードを以下の様に入力

.tategaki {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
 font-family: 'メイリオ', sans-serif;
 text-orientation: upright;
  width: 100%;
  height: 70%;
  overflow-y: scroll;
  border: 2px solid #434343;
  padding: 20px;
  columns: 15em;
  column-gap: 20px;
  column-rule: 1px dashed #434343;
}

---

注） font-family: 'メイリオ', sans-serif;
　　 text-orientation: upright;

　→　これはAIにコードを教えて貰いました

---

そして縦書きにしたいページに於いて、
縦書きにしたいブロックを選択後、右側の
＜ブロック＞　→　＜高度な設定＞に
このクラスの　tategaki　を宣言すれば
それなりに縦書きになりました

ワードプレスの外観→カスタマイズ　で
スマホ画面、タブレット画面を確認できますが
たまに縦書きがクリアされ横書き表示となっていました

→　自分のスマホではちゃんと表示されていたので
　　これ以上の深追いをやめました

参考にしたページは以下の所です   note投稿の人です

嬉しくてコメントを長々と書きました

以下は私が縦書きにしたホームページです
    ↓　　　↓　　　遊びに来てください

川柳モドキ 2024年 | 言葉の館川柳モドキ　2024年

でわまた