higoneco

function script($style){
    if(is_singular()){ 
    wp_enqueue_style( 'single', get_template_directory_uri() . '/css/single.css', array(),'1.0.0' );
    wp_enqueue_script( 'tategaki', get_template_directory_uri().'/js/tategaki.js' , array(),date('U'),true);
    }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 
}
add_action( 'wp_enqueue_scripts', 'script' );

higoneco

//オーバーフロー分のスペースをpaddingbottomで獲得する処理
function adjustSize(){   
                    const style = window.getComputedStyle(tategaki);
                    const fullHeight = tategaki.scrollHeight;
                    const defaultHeight = Number(style.height.replace('px', ''));
                    tategaki.style.paddingBottom = `${fullHeight - defaultHeight}px`;
                     }

//読み込み完了後に処理を実行
window.onload = function(){ adjustSize(); };

higoneco

function script($style){
    if(is_singular()){ 
    wp_enqueue_style( 'single', get_template_directory_uri() . '/css/single.css', array(),'1.0.0' );
    }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 
}
add_action( 'wp_enqueue_scripts', 'script' );

higoneco

#tategaki{
    box-sizing: content-box;  //※必ずcontent-box(初期値)にする
    writing-mode: vertical-rl; //右寄せの縦書きにする
    text-align: left; //文字を上につめる
    height: 15em; //要素の高さを指定※必ず指定
    columns: 15em; //1カラムの高さを指定※必ず指定
    column-gap: 50px; //カラム間の隙間
    column-rule: 1px dashed grey; //カラム間にボーダーを引く
}