縦書き用のテーマを探しています

とりあえず自分のサブサイト

http://meta-scheme.jp/s1/

にraindropsをインストールして、style.cssの末尾に以下のCSSを書いてみました。

.entry-title, .entry-content {
    font-family:"@ＭＳ Ｐ明朝", "@MS PMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", serif;
    float:right;
    writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -webkit-transform-origin: left top;
    -o-writing-mode: vertical-rl;
    -o-transform-origin: left top;
    direction:ltr;
    overflow:hidden;
}
.entry-content:after{
    content:' ';
    display:table;
}
p{
    margin-right:2em;
    font-size:118%;
    letter-spacing: .3em;
}

今後、上手いCSSが思いついたらまたここに書きに来ます。

ありがとうございます。さっそく上記の設定に切り替えて見ました。良い感じです。縦書き用のMS P明朝が、やや読みづらかったので、先頭に＠Meiryoを追加してみました。

http://meta-scheme.jp/s1/6744

いろいろと実験してくださったようでありがとうございます。ぱっと見、アップデート部分の取り込み方はすぐにはわからなかったのですが、使われているCSSを参照しながら順次取り込んでいこうかと思います。取り急ぎ取り込むべきなのは縦書きの中の埋め込みと画像のスタイルかなと思いました。今、私のサイトだと下記みたいになっちゃうんで（笑）。

http://meta-scheme.jp/s1/6756

で、この前、ルビ要素のスタイリングが要るかもという話をしましたが、今回ご呈示いただいたアップデート版の記事をみるかぎり、少なくともChromeだとブラウザのデフォルトで良い感じっぽいですね。

その後、私の方のサイトでは縦書き向けCSSは以下の内容になっています。

.category-tategaki .entry-title,
.category-tategaki .entry-content .tate{
    font-family: "@Meiryo", "@游明朝", "@YuMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", "Meiryo", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    float:right;
    writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -webkit-transform-origin: left top;
    -o-writing-mode: vertical-rl;
    -o-transform-origin: left top;
    direction:ltr;
}

.category-tategaki .entry-content .tate:after{
    content:' ';
    display:table;
}
.category-tategaki .tate p{
    margin-right:2em;
    font-size:118%;
    letter-spacing: .3em;
}
/* お勧め テーマのレイアウトを崩さないための処理 */
.category-tategaki .entry-content{
    margin-right:3em;
}
.category-tategaki .entry-content .tate{
    overflow-x: auto;
    overflow-y: hidden;
    width:100%;
    min-height: 20em;
    max-height: 40em;
}

俳句や短歌の短文の場合、スクロールバーが要らないことが多いのでoverflow-xをautoにしたのと、あと、iOSのChromeで見てたら、長文の縦がものすごく長くなったんでmax-heightを40emに限定して、逆に一行一行が短い文章ばかりだと縦がやや短すぎたんでmin-heightの指定もいれました。

そういえば、Windows版のSafariで見た時の、縦書きdivのwidth:100%の解釈が強烈で、「え、そんな解釈ありなん？」って絶句してしまいました（笑）。以下をWindowsのSafariで見ると大変なことにｗ。

http://meta-scheme.jp/s1/6746

あとは、最終的には、長文の時に、横スクロールじゃなくて、縦方向に段組して表示させたいところですが、これは、この間ご紹介した「長雨」っていうTumblrテーマで既に実現されているみたいなので、のちのちパクろうかと思ってます。（でもJavaScriptで処理してたらつらいなぁ。私、JavaScriptまったくわからないので）。

といった途中経過となっております。いろいろとありがとうございます。

とりあえず、ざっと以下の感じで取り込んでみました。safariの縦書きは諦めました（笑）。.yokoクラスのお陰でオーディオプレーヤーの埋め込みがなんとかなりました。

body:not(.safari) .category-tategaki .entry-title,
body:not(.safari) .category-tategaki .entry-content .tate{
    font-family: "@Meiryo", "@游明朝", "@YuMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", "Meiryo", "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    float:right;
    writing-mode: tb-rl;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -webkit-transform-origin: left top;
    -o-writing-mode: vertical-rl;
    -o-transform-origin: left top;
    direction:ltr;
}

body:not(.safari) .category-tategaki .entry-content .tate:after{
    content:' ';
    display:table;
}

body:not(.safari) .category-tategaki .tate p{
    margin-right:2em;
    font-size:118%;
    letter-spacing: .3em;
}
/* お勧め テーマのレイアウトを崩さないための処理 */
body:not(.safari) .category-tategaki .entry-content{
    margin-right:6em;
}
body:not(.safari) .category-tategaki .entry-content .tate{
    overflow-x: auto;
    overflow-y: hidden;
    width:100%;
    min-height: 20em;
    max-height: 80vh;
}

body:not(.safari) .category-tategaki .entry-content .tate img.alignmiddle{
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0.76923076923em;
}

body:not(.safari) .category-tategaki .entry-content .tate img.alignbottom{
    float: right;
    padding: 0.38461538461em 0  0.76923076923em;
    height:auto;
}

body:not(.safari) .category-tategaki .entry-content .tate img.alignbottom{
    float: right;
    padding: 0.38461538461em 0 0;
    height:auto;
}

body:not(.safari) .category-tategaki .entry-content .tate img.aligntop{
    float: left;
    padding:0 0 0.76923076923em ;
    height:auto;
}

body:not(.safari) .category-tategaki .entry-content .tate .oembed-container{
    width:100%;
    max-width:100%;
    margin:auto auto auto 2em;
}

body:not(.safari) .category-tategaki .entry-content .tate .oembed-tategaki-limmit-width {
    width:500px;
    margin-left:2em;
}

body:not(.safari) .category-tategaki .entry-content .tate .rd-table-wrapper{
    overflow:visible;
     margin-left:2em;
}

body:not(.safari) .category-tategaki .entry-content .tate .yoko,
body:not(.safari) .category-tategaki .entry-content .tate table{

    float:none;
    writing-mode: horizontal-tb;
    -ms-writing-mode: tb-rl;
    -moz-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -webkit-transform-origin: 50% 50% 0;
    -o-writing-mode: horizontal-tb;
    -o-transform-origin: 50% 50% 0;
    direction:ltr;

}

body:not(.safari) #writing-mode-vertical,
body:not(.safari) #writing-mode-horizontal{
    padding:1em;
    border:1px solid #ccc;
    background:#1abc9c;
    display:inline-block;
    color:#fff;
}

body:not(.safari) .category-tategaki .entry-content .tate a{
    border-left:2px dotted blue;
}

body:not(.safari) .category-tategaki .entry-content .yoko a{
    border-bottom:2px dotted blue;
}

body:not(.safari) .category-tategaki .entry-content .tate mark:hover{
    cursor:pointer;
}

追記
おっと、Safariだけ諦めたつもりが、iOSのChromeも道連れになってしまいました。難しい〜。

ますは、以下のページがサファリでオーバーフローしないことを確認しました。

http://tenman.info/labo/css/?p=1797

1920×1080pxのフルスクリーンと、最大限横幅狭めた画面で確認しましたが、いずれもスクロールバーは画面横幅の範囲内。Windows10 home x64 ベース システム用 Windows 10 バージョン 1511。Safariは5.17(7534.57.2)。

今夜は年末進行でアルコールと焼き肉で脳みそと胃袋がトリップ状態なので、明日、素面の時に、期待を込めて自サイトに取り込みたいと思います。