ひさしぶりにWEB制作ネタをブログしてみたいと思います。
先日仕事の案件で和っぽいウェブサイトの制作依頼がきて、その中に縦書きのコンテンツを掲載しなければならず・・・・「あれ？今まで縦書きって画像でやってたよな？テキストで書けたっけ？」・・・という体たらくっぷりの僕です。
調べてみたら「HTML内のテキストを簡単に縦書きで表示する方法」がありましたので今回はデモ付きで紹介してみたいと思います。
テキストの縦書きは「taketori.js」を使います
みだしの通り、HTML内のテキストを縦書きで表示するには「taketori.js」というありがたい Javascript を利用させていただきます。
ダウンロードは以下から
デモサイト作ってみたよ
実際にこの「taketori.js」を利用してデモサイトを作ってみたのでよかったら参考までにご覧ください。
どうですか？なかなか良い感じで縦書きになっているでしょ？ウフフ・・・
taketori.js のセッティング方法
セッティング方法はいたって簡単です！まずは「taketori.js」を公式サイトからダウンロードして準備をしましょう。
1.<head>の間にCSS「taketori.css」を読み込ませるタグを挿入
1 | <link rel="stylesheet" href="css/taketori.css"> |
2.スクリプトを挿入しましょう
1 2 3 4 | <script src="js/taketori.js"></script> <script> (new Taketori()).set({fontFamily:'serif',togglable:false,multiColumnEnabled:false}).element('tategaki').toVertical(); </script> |
「tategaki」と記述されている部分がHTMLに挿入する id 名なので任意で変更してみてください。それからJquery本体も忘れずに挿入してね。
3.HTML挿入例
1 2 3 4 | <div id="tategaki"> <h1>タイトルも縦書きアルよ</h1> <p>縦書きになってるよ</p> </div> |
設定した id 名で囲った部分全部が縦書きで表示されます。
まとめ
このように「taketori.js」を使えば、とても簡単にHTML内のテキストを縦書きにできます。便利ですよね～。画像ではなく、テキストで表示することによってSEO的な底上げにもなりますし、何よりもテキストで表現できるって楽なんですよ！！うん。あ、もちろん主要ブラウザに対応しておりますからご安心を。
ただ、レスポンシブサイトにはちょっと使えなさそうですね。今回の僕が受けた制作依頼では、ユーザーエージェント振り分けで対応してPC版のみで「taketori.js」を利用しています。
何はともあれ、「taketori.js」非常に便利なのでウェブサイト制作で縦書きに困ったら是非ご利用くだされ。
