• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • おすすめテーマ
  • おすすめプラグイン
  • お問い合わせ
FOXWP / WordPress / カスタマイズ / WordPressで縦書きをする方法

WordPressで縦書きをする方法

2020年4月22日 2020年4月22日

WordPressで縦書きをする方法を解説します。

この記事で紹介する方法を使用すれば、次のような縦書きが可能となります。

縦書きの例
WordPress (ワードプレス) は、
ブログから高機能なサイトまで作ることができる
オープンソースのソフトウェアです。
注意
縦書きをすると、英語や数字を横向きになってしまいます。
目次 非表示
1 CSSを指定して縦書きする方法
1.1 右から左に文章を進めたい場合
1.2 左から右に文章を進めたい場合
2 ショートコードを利用して縦書きを行う方法
2.1 ショートコード
2.2 エディターでの記載方法

CSSを指定して縦書きする方法

縦書きをしたい文章にCSSプロパティを設定することで縦書きが可能となります。

縦書きにしたい文章にwriting-modeのvertical-rlまたはvertical-lrを指定しましょう。

右から左に文章を進めたい場合

vertical-rlを指定します。

<div style="writing-mode: vertical-rl;">縦書きしたい文章</div>
WordPress (ワードプレス) は、
ブログから高機能なサイトまで作ることができる
オープンソースのソフトウェアです。

左から右に文章を進めたい場合

vertical-lrを指定します。

<div style="writing-mode: vertical-lr;">縦書きしたい文章</div>
WordPress (ワードプレス) は、
ブログから高機能なサイトまで作ることができる
オープンソースのソフトウェアです。

ショートコードを利用して縦書きを行う方法

縦書き用にショートコードを自作すると、手軽に任意の文章を縦書きにすることができます。

ショートコード

/**
 * 縦書き
------------------------------------------------------------------------------------------------ */

add_shortcode('vertical', function ($atts, $content = null) {

  $atts = shortcode_atts(
    array(
      'mode' => 'rl'
    ),
    $atts,
    'vertical'
  );

  return sprintf(
    '<div style="writing-mode:vertical-%1$s">%2$s</div>',
    $atts['mode'],
	$content
  );
  
} );

エディターでの記載方法

modeでrlまたはlrを指定してください。

[vertical mode="rl"]右から左へ[/vertical]
[vertical mode="lr"]左から右へ[/vertical]
注意
modeにrlまたはlr以外を指定すると、横書きのままになります。
困った時は?
ココナラでWordPress関係の依頼・相談を行うことが可能です。個人やフリーランスに依頼できるので気軽かつお得にできます。デザインのカスタマイズから、トラブル対応までお気軽に相談してみてください。ココナラで相談してみる

カテゴリー:カスタマイズ

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル

おすすめプラグイン

『Advanced Custom Fields』の使い方と設定方法を解説

WordPressプラグイン「TablePress」の使い方

WooCommerceの設定方法と使い方

LuckyWP Table of Contentsの使い方と設定方法

おすすめテーマ

ポートフォリオ向けWordPressテーマ

ポートフォリオ向けWordPressテーマ|魅せるギャラリーが簡単にできる

おすすめ企業サイト向けWordPressテーマ

さっとクオリティの高い企業サイトを作成できるWordPressテーマ特集

アイキャッチ画像不要のWordPressテーマ

WordPressでアイキャッチ画像を表示したくないならZEROがおすすめ!

ヘッダーに動画を設定できるWordPressテーマまとめ

ヘッダーに動画を設定できるWordPressテーマまとめ

Previous Post: « WordPressでブログが検索結果に表示されない時にすべき対処法
Next Post: WordPressのPHPファイル内で任意のショートコードを実行する方法 »

Primary Sidebar

当サイトの利用テーマ

Genesis Theme Framework for WordPress
詳しく見る

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
詳しく見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

カテゴリー

  • WordPress
    • WordPressのSEO対策
    • WordPressのセキュリティ対策
    • WordPressの使い方
    • エラー・トラブル
    • カスタマイズ
  • WordPressテーマ
    • Divi
    • おすすめテーマ
    • テーマカスタマイズ
  • WordPressプラグイン
    • プラグインカスタマイズ
  • WordPress入門講座
  • WordPress設定関連
  • お役立ち情報
    • メモ
  • アフィリエイト
    • Amazonアフィリエイト
  • ドメインレジストラ
    • お名前.com
  • レンタルサーバー
    • ColorfulBox
    • Conoha WING
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
    • PBN Lab
    • Rank Tracker
  • 用語集
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2021 FOXWP All rights reserved.