サポート » テーマ » 縦書き用のテーマを探しています

  • 縦書き用のWordPressテーマを探しています。ページ全体が縦書きになる必要はなくて、記事タイトルと記事本文だけ縦書きになればいい、って感じです。おすすめのテーマがあったら紹介お願いします。

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • こんにちは、

    私の作っているテーマで、縦書きやってみましたが、難しいですね。

    (禁 firefox)
    http://www.tenman.info/wp3/manualraindrops/archives/2222

    人柱になっていただけるなら、もう少しうまい事行くような方法教えてください。

    CSSは最後のページを見てください。

    https://wordpress.org/themes/raindrops/

    トピック投稿者 tg29359

    (@tg29359)

    ありがとうございます。上記のraindropsというテーマをベースに、CSS等をカスタマイズするといけるかも、ということですね。私の方で、何かうまいCSS設定とか思いついたら続報を書きに来ます。

    ざっと見、思ったのは

    • ルビ要素のスタイリングが要るかも(Chromeで「吾輩わがはい」の部分を見ててそう思いました
    • フォントの設定をさらに縦書き向けに練り込む必要があるかも(ひろく使えるインストール済みフォントで、縦書きが綺麗にでるやつなかなかなくて難しそうですが)

    ですが、「では具体的にどうすれば?」の案は私にもないです。

    参考情報を以下に書きます。

    TumblrテーマでそこそこいけてるものがGitHubにあります。

    https://gist.github.com/metasta/5986308

    WebKit系向けだけでIEとかむけのスタイリングはしていないみたいですが、それいれたらそこそこ実用でも使えそうな感じでした(フォントは旧字体豊富な独特のウェブフォント使っているみたいですが、そこは多分、一般ユーザーは必要としてないと思います)。

    私自身がTumblrテーマで挑んで玉砕したのが以下にあります。

    テーマのダウンロード元
    https://www.tumblr.com/theme/39763

    GitHub
    https://github.com/meta-scheme/tate-gaki

    デモサイト
    http://tate-gaki.tumblr.com/

    こちらは、使ってみた皆さんから「くそ」と絶否された大失敗作ですが(笑)。

    トピック投稿者 tg29359

    (@tg29359)

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

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

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

    .entry-title, .entry-content {
        font-family:"@MS P明朝", "@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が思いついたらまたここに書きに来ます。

    テーマでCSSのテストをする場合のおすすめ、

    現在の状態だと、テーマのレイアウトがすべて崩れるので、特定の環境だけで縦書きになるように、調整のためのスタイルを書いたほうがいいと思います。

    1 カテゴリ 縦書き slugは、tategaki
    2 投稿本文で縦書きする時には、<div class="tate"> でラップして記述する。

    style.cssのスタイルを、以下のように変更

    .category-tategaki .entry-title,
    .category-tategaki .entry-content .tate{
        font-family:"@MS P明朝", "@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;
    
    }
    .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:scroll;
        overflow-y: hidden;
        width:100%;
    }

    これで、レイアウトはあまり崩れなくなると思いますし、スタイル指定がテーマ由来か、自分の指定の問題か、切り分けしやすくなると思います。

    縦書き投稿を書くときには、カテゴリを 縦書きにセットし、<div class="tate">...</div>という風に囲んでから書きましょう。

    トピック投稿者 tg29359

    (@tg29359)

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

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

    http://tenman.info/labo/css/

    縦書き、アップデートしました。お暇な時にでも、、、

    トピック投稿者 tg29359

    (@tg29359)

    いろいろと実験してくださったようでありがとうございます。ぱっと見、アップデート部分の取り込み方はすぐにはわからなかったのですが、使われている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で見ると大変なことにw。

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

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

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

    以下をWindowsのSafariで見ると大変なことにw。

    ブラウザによって、表示が乱れたりすることは残念ですね。

    このような場合の次善の策として、このテーマの場合は、body要素に、ブラウザ毎のクラスを設定してあります。

    サファリだと、safariというクラスが付くようになっています。

    PHPからの、クラス付与も、設定できますが、デフォルトでは、javascriptよりクラスをbodyに追加しています。

    ( なのでhtmlソースだと見えないので、bodyのクラスは、右クリック「要素の検証」で確認してください )

    主な理由は、キャッシュプラグインを使ったような場合に、別なブラウザで閲覧したタイミングで、キャッシュが行われると、chromeで閲覧していても、ie8みたいなクラスがきゃしゅに残って、ぐしゃぐしゃになるのを防ぐためです。

    このテーマでは、ブラウザ毎の調整は、このあたりのクラスを使って、工夫をしていただくしかないだろうと思います。

    よろしくお願いします。

    トピック投稿者 tg29359

    (@tg29359)

    とりあえず、ざっと以下の感じで取り込んでみました。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

    で、サファリがオーバーフローしなくなるようなら、

    raindrops.jsに 以下を追加してみてください

    var safari_width = $('.safari .category-6332 .entry-content').width();
            $('.safari .category-6332 .entry-content .tate').css('width', safari_width + 'px');
    
            $( window ).resize(function() {
                var safari_width = $('.safari .category-6332 .entry-content').width();
                $('.safari .category-6332 .entry-content .tate').css('width', safari_width + 'px');
            });

    .category-6332 は、.category-tategaki に変更

    $は、jQueryに変更

    トピック投稿者 tg29359

    (@tg29359)

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

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

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

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

    トピック投稿者 tg29359

    (@tg29359)

    ご呈示いただいた内容をraindrops.jsの末尾に追加して、 .category-6332 を .category-tategak に、$を、jQueryに変更してみましたが、挙動は変わらなかったです。サンプルのページはオーバーフローせずちゃんと見れているので、何か書き間違えてる気がします。いま調査中です。

    ぶっちゃけ、raidrops.js、下記になってますが、もしかして、私、修正方法の意味を取り違えてます?。

    http://meta-scheme.jp/s1/wp-content/themes/raindrops/raindrops.js

    不親切ですみません。

    以下のようにしてみてください。

    (function() {
        jQuery(function() {
            var safari_width = jQuery('.safari .category-tategaki .entry-content').width();
            jQuery('.safari .category-tategaki .entry-content .tate').css('width', safari_width + 'px');
    
            jQuery( window ).resize(function() {
                var safari_width = jQuery('.safari .category-tategaki .entry-content').width();
                jQuery('.safari .category-tategaki .entry-content .tate').css('width', safari_width + 'px');
            });
        });
    })(jQuery);

    トピック投稿者 tg29359

    (@tg29359)

    ありがとうございました。ばっちりです。以下の環境で縦書きできてます。

    • Windows
    • Edge
    • Google Chrome
    • Firefox
    • Safari
    • Opera
    • iOS(iPad Air)
    • Google Chrome
    • Safari
    • Android携帯電話(Digno)
    • Google Chrome

    Firefoxがいつのまにか縦書き対応してて驚きました。writing-mode(ちゅうかCSS3?)正式規格化した、ってことなんでしょうか。

    となると、後は論理マージンの正式対応が待たれるばかりですね(もう対応してたりして?。あとでググってみよう。。。)

    ほとんどお話が終わられているようなのに横からすみませんが,こういうページがあります。お役に立つかどうかわかりませんが,一度ご覧ください。
    http://jump-up.info/jquery/wordpress_homepage_customize_tategaki.html

    WordPress上ではありませんが,私自身が縦書きでnehanを使用してまして,その関連記事にコメントをいただいた方のページです。
    nehanやtategakiの使い方について説明があります。

    nehanやtategakiとも,今も開発が続いているjsですので,もしかしたらSafariにも対応しているかもしれません。私はSafariを全く使わないので,未確認です。

    追記:
    すみません。Safariの件,解決したみたいですね(汗)。

15件の返信を表示中 - 1 - 15件目 (全19件中)
  • トピック「縦書き用のテーマを探しています」には新たに返信することはできません。