【WordPress】手書き風の枠を記事に貼る方法

以下のような手書き風の枠を記事に貼る方法についての覚え書きです。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

とりあえず、記事に以下の HTML タグを貼り付けると上のような手書き風の枠が表示されるようになると思います。

以下、自分で上のような HTML タグを作成する方法についての覚え書きです。

原理的には、border-image を使って画像の枠を表示させ、

その枠用の画像を手書きで作成する、という方法です。私の場合は「UPAD」という iPad のアプリを使って作成しました。

thumb_IMG_0757_1024

ポイントは、補助線を使って、枠のつなぎ目が合わさるように調整するところかと思います。

thumb_IMG_0758_1024

記事に貼り付ける用のタグの作成は、border-image-generator で行います。

2016-02-06 at 10.09.jpg

画像の方は WordPress の方にあらかじめアップロードしておき、

2016-02-06 at 10.11.jpg

画像の大きさは、画像の URL の末尾に「?w=200」などと追記することで調整します。ここの部分を編集した上でリターンキーを押すと border-image-generator の方にちゃんと反映されるようです。

2016-02-06 at 10.10.jpg

WordPress にアップロードした画像の大きさを URL の記述で調整する方法については以下の記事等をご参照ください。

あとは生成された HTML タグを WordPress の記事編集画面に貼れば OK かと思います。

「round」というパラメータを使うと

2016-02-06 at 10.32.jpg

画像の繰り返し、

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

「stretch」というパラメータを使うと画像の引き伸ばしで枠が調整されます。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。