WordPress 俳句ショートコード

WordPress で俳句や川柳をいい感じ(?)に表示させるショートコードを作成してみました。

縦書きスタイル

俳句や川柳を表示するなら縦書きだよねと思い、スタイルで縦書きレイアウトにしようとしたのだが、これが意外と手こずりました。

水平方向の配置(text-align が効かない)や全角英数字の向き等ブラウザにより挙動が異なる点等です。

スタイル(CSS3)で縦書きにするには、writing-mode プロパティを使用します。

writing-mode プロパティは実験段階の機能で実装しているのは一部のブラウザ(Firefox や Edge)だけですが、Chrome、Safari、IE もベンダープリフィックス付きのプロパティにて実装されています。writing-mode プロパティの値には、vertical-rl(縦書きで右から左り方向)を指定します。

writing-mode プロパティに関しては、writing-mode – CSS サイトを参照してください。

div {
	writing-mode: vertical-rl;         /* CSS3 (Firefox, Edge) */
	-webkit-writing-mode: vertical-rl; /* Chrome, Opera, Safari */
	-ms-writing-mode: tb-rl;           /* IE9, IE10 */
}

水平方向の配置ですがセンタリングさせたかったのですが text-align が効きませんでした。仕方ないので position プロパティと transform プロパティで何とかセンタリングさせました。

div {
	position: relative;
	top: 0;
	right: 50%;
	display: block;
	transform:translate(50%, 0%);
}

haiku ショートコード

俳句/川柳を表示するショートコードです。

このショートコードは囲み型のみをサポートします。

[haiku](囲み型コンテンツ)[/haiku]

オプション

オプション 説明
囲み型コンテンツ

句です。

class

クラスです。

初期値は “haiku” です。

na

名前(俳号/柳号)です。

初期値は “” です。

[haiku]古池や 蛙飛込む 水乃音[/haiku]

[haiku na="芭蕉"]
古池や
 蛙飛込む
  水乃音
[/haiku]

コード

functions.php などに下記のコードを記述します。

/**
 * haiku ショートコードの出力を作成します。
 *
 * @param array $attr {
 *     ショートコードの属性。
 *     @type string $class クラスです。デフォルトは 'haiku'。
 *     @type string $na    名前(俳号/柳号)です。デフォルトは empty。
 * }
 * @return string 俳句/川柳を表示する html コンテンツ。
 */
function haiku_shortcode( $attr, $content = null ) {
	$atts = shortcode_atts( array(
		'class' => 'haiku',
		'na' => '',
	), $attr );

	$content = trim( $content );
	$ku = '';

	// p タグを削除
	$content = preg_replace( '/<\/*p\s*>/i', '', $content );
	// br タグを削除
	$content = preg_replace( '/<br\s*\/?\s*>/i', '', $content );
	// 行を p タグで囲む
	foreach ( explode( "\n", $content ) as $line ) {
		$ku .= '<p>' . $line . '</p>';
	}

	$html = '
		<div class="' . esc_attr( sanitize_html_class( $atts['class'] ) ) . '">
		<div class="haiku-inner">
		<div class="haiku-ku">' . $ku . '</div>
		<div class="haiku-na">' . esc_attr( $atts['na'] ) . '</div>
		</div>
		</div>' . "\n";

	return $html;
}

add_shortcode( 'haiku', 'haiku_shortcode' );

スタイル(CSS)

下記スタイルでは、武蔵システム様が商用利用等完全フリー(配布元サイトで利用規約をご確認ください)で提供している「衡山毛筆フォント行書」フォントを使用しています。

このままのスタイルで使用する場合は、提供元よりフォント(OpenType フォント)をダウンロードして、記述したスタイルと同じフォルダに配置してください。
なお、OpenType 形式のファイルサイズは大きいので、WOFF2 形式に変換することをお勧めします。

/*
Font
*/
@font-face {
	font-family: "衡山毛筆フォント行書";
	src: url("KouzanGyoushoOTF.otf") format("opentype");
}

/*
Haiku
*/
.haiku {
	font-family: "衡山毛筆フォント行書", serif;
	width: 100%;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.haiku p {
	margin: 0;
	padding: 0;
}
.haiku-inner {
	position: relative;
	padding: 6px;
	top: 0;
	right: 50%;
	display: block;
	transform:translate(50%, 0%);
	background-image: linear-gradient(to top left, #f7de06, #e0a020, #edac06, #f7de06, #ecb802, #ebbf10, #d0a000);
	box-shadow: 2px 2px 8px 4px rgba(0,0,0,0.1);
}
.haiku-ku {
	padding: 30px 50px 40px 50px;
	font-size: 2.5rem;
	line-height: 3.0rem;
	white-space: nowrap;
	background-color: #fafaf6;
}
.haiku-na {
	position: absolute;
	bottom: 40px;
	left: 20px;
	display: inline-block;
	text-align: right;
	font-size: 1.8rem;
	line-height: 1.8rem;
	white-space: nowrap;
}

最後に

WEB は横書きが基本なんだなと思い知らされました。

WEB フォントも日本語に対応したフォントはまだまだ少ないですね。

Google Font 等で日本語フォントが利用できればいいのですが、今後に期待したいと思います。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。