CSSを使用して配置する方法もありますが、1文字ごとに配置を調整しなければならなくて面倒なので、変更や修正が必要な場合などメンテナンス面も含めて、アーチ状にテキストを配置したい際にオススメのライブラリです。
Arctext.js
ファイルのダウンロード
以下の配布ページより Download をクリックしてファイルをDLする。
Arctext.js – Curving Text with CSS3 and jQuery | Codrops
デモとか
事前に色々と確認したい場合は、デモページもあります。
Arctext.js – Curving text with CSS3 and jQuery
jQuery
jQueryに依存しているため、CDNか、事前にDLしておく。
サイトに読み込む
HTMLの場合
scriptタグで普通に参照する。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/xx.xx.xx/jquery.min.js"></script>
<script src="*****/js/jquery.arctext.js"></script>
WordPressの場合
functions.phpへ下記を追加。
wp_enqueue_script( 'jquery-arctext', get_theme_file_uri() . '*****/jquery.arctext.js', array(), '1.0.1', true );
使用方法
アーチ状（扇状、カーブ文字）にしたいテキストの要素を指定する必要があるため、id属性 や class属性 を設定しておくとラクです。
HTML
<div class="arch-wrap">
<div id="arch-txt-radius">radius 50</div>
<div id="arch-txt-dir">radius: 100｜dir: -1</div>
<div id="arch-txt-rotate">radius: 150｜rotate: false</div>
</div>
JS｜jQuery
$(function() {
$("#arch-txt-radius").arctext({
radius : 50,
});
$("#arch-txt-dir").arctext({
radius : 100,
dir: -1,
});
$("#arch-txt-rotate").arctext({
radius : 150,
rotate: false,
});
});SCSS
表示調整用です。
.arch-wrap {
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 1fr;
padding: 3rem;
text-align: center;
text-transform: uppercase;
@media screen and (min-width: 768px) {
grid-template-columns: repeat(3, auto);
}
> *{
padding: 5rem 0;
}
}
出力結果
radius 50
radius: 100｜dir: -1
radius: 150｜rotate: false
オプション
- オプション
- 説明
- radius
- アーチ状に配置するサークルの半径を指定。デフォルトは「 0 」
- dir
- アーチ方向の指定。「 1 」で下方向、「 -1 」で上方向。デフォルトは「 1 」
- rotate
- 「true」文字が中心に向かって配置される。「false」文字の角度を変更しない。デフォルトは「true」
- fitText
- プラグインを使用する場合「true」にする。デフォルトは「false」