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

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

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

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

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

<div style="border-style:solid;border-width:50px;border-image:url('https://comemo508.files.wordpress.com/2016/02/thumb_img_0759_1024.jpg?w=200') 50 fill round;">
<p style="text-shadow:1px 1px 1px white !important;">本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</p>
</div>

<div style="border-style:solid;border-width:50px;border-image:url('https://comemo508.files.wordpress.com/2016/02/thumb_img_0759_1024.jpg?w=200') 50 fill stretch;">
<p style="text-shadow:1px 1px 1px white !important;">本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</p>
</div>

以下、自分で上のような 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」というパラメータを使うと画像の引き伸ばしで枠が調整されます。

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

投稿者: comemo

WordPress.com での記事の作成方法など

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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