2024年1月24日
こんにちわ
デクの坊、シニアすて吉っつぁんです
ホームページでの話です
ワードプレスで
川柳を縦書きにしようとやってみました
コピペでいけるサイトをググりました
できそうでしたが、文字が重なったりして
根本的に何かおかしいと直感
色々やって、思い当たるところは
テーマCocoonのフォント設定を
明朝にしているせいかなと思っていました
案の定、デフォルトのフォントにすると
うまくいきました
でも他の所は明朝にしたかったのでCSSのブロックだけを
縦書きにしようと、AIにコードを教えて貰って次の様にしました
ワードプレスで
＜外観＞ → ＜追加CSS＞で コードを以下の様に入力
.tategaki {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
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;
}
注）
text-orientation: upright;
→ これはAIにコードを教えて貰いました
そして縦書きにしたいページに於いて、
縦書きにしたいブロックを選択後、右側の
＜ブロック＞ → ＜高度な設定＞に
このクラスの tategaki を宣言すれば
それなりに縦書きになりました
ワードプレスの外観→カスタマイズ で
スマホ画面、タブレット画面を確認できますが
たまに縦書きがクリアされ横書き表示となっていました
→ 自分のスマホではちゃんと表示されていたので
これ以上の深追いをやめました
参考にしたページは以下の所です note投稿の人です
嬉しくてコメントを長々と書きました
以下は私が縦書きにしたホームページです
↓ ↓ 遊びに来てください
でわまた
