Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(54) 縦書き入力や縦書き表示は可能

2017年 08月 22日
殆どの人は記事を書くのは横書きだろうし、日本語を縦書きで書く人はとても少なくなっていると思います。 しかし、小説や文庫本の類は縦書きが主流です。 これは文化というか馴染みと言うか、縦書きを読みながら左へ左へとページをめくるのがしきたりで、余り変わる気配が有りません。

で、現代で小説を書こうという人は、原稿用紙にペンを使う硬派は別として、キーボードを叩いている人はどうしているのでしょうか? 私達のブログと同じ様に、横書きで入力して、印刷は縦書きにしているだけなのでしょうか。 少し興味がある所です。



ところで、文字を書き込む「textarea」は、最近は縦書き「上→下方向で右→左へ改行」や「横書き右→左方向で上→下へ改行」に出来る様になっているので、いわゆる「縦書き」入力のスタイルを試して見ました。

操作はとても簡単で、「textarea」に「縦書き」のモードを指定するだけです。 昔はIEだけの独自機能だった様ですが、最近はChromeも対応しています。

#_entryContent, #_moreEntryContent {
writing-mode: tb-rl; }

エキサイトのブログ編集画面では、上記の2種のセレクタが「通常編集」「More通常編集」の「textarea」になります。「HTML編集画面」にも縦書きは指定出来そうですが、余り気分の良い表示にはならないでしょうから、これは指定しません。 「HTML編集画面」は従来の通りの表示になります。

以下が縦書きを試した状態です。

a0349576_21135506.png


スクロールバーが下側に付き、左方向にスクロールする様になります。 簡単に縦書き仕様が実現出来ましたが、慣れていないのでとても扱いづらいです。 システム上では全く問題は無い様です。 また、これは表示上で縦書きにしているだけで、作成されるデータは横書きと同一です。

画像は左寄せが上付きになり、右寄せが下付きになります。 編集画面上の画像の大きさは、ある程度好みに調整可能です。 これは、以下を参照ください。

編集枠上の画像サイズは「幅400px上限」ですから、縦書きでは少し幅が大きい気がします。 ブログ誌面の表示を考える必要が有りますが、誌面も縦書きとするなら、挿絵程度の小型画像や縦長の画像が納まりが良さそうです。



次に、書き込んだデータのブログ誌面上での縦書き表示を試してみます。(縦書きで作成したデータである必要はなく、従来のデータも縦書き表示に出来ます。 但し、英数字などは横倒しになります。)

私のブログスキンの場合は、「.POST_BODY」というセレクタで、投稿本文を指定出来ます。(スキンによっては、セレクタ名が異なる場合もあります) この本文に対して、縦書き表示と横スクロールバーの表示指定をします。 横スクロールの指定をしないと、一般のスキンでは左の先が読めなくなります。

.POST_BODY {
height: 630px;
overflow-x: scroll; }

ブログの投稿本文に横スクロールバーを出すには、本文の「高さを適当な固定値」として、「横方向にあふれた分はスクロール」という指定の仕方です。(高さ630pxは、本文の縦幅になります)

以下が、この指定をしたページ表示の例で、左方向へスクロールして読み進みます。

a0349576_21565439.png

私のスキンを突貫で縦書きにしただけですが、右メニューは下方に伸びたままです。 本気で縦書き表示のブログスキンを追及するなら、メニューの配置を根本的に考え直す必要があります。 それにしても、ずいぶんとユニークなブログ画面です。




この記事はカテゴリ「スキン編集」にトラックバックしています。



[PR]
# by Ataron | 2017-08-22 22:20 | ブログスキンのアレンジ | Comments(0)