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 等で日本語フォントが利用できればいいのですが、今後に期待したいと思います。