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

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

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

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

続きを読む

記事の中に欄を作るための HTML タグに border-image で画像を追加する

最終更新日:2016-02-19

記事に以下の HTML タグを貼ると

以下のような画像付きボックスを追加することができます。

見出し

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

見出し

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

この画像付きボックスは、

の合わせ技です。

枠付きの画像 + border-image の組み合わせで画像枠付きのボックスを作成する

ここでは、PhotoScape X 等の、画像に枠線を追加する機能と

2016-01-24 at 16.50.png

以下のツールで生成できる border-imgae を含む CSS を使って、

以下のような画像枠付きのボックスを作成する方法について覚え書きしたいと思います。

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

続きを読む

【WordPress.com】border-image で画像の枠を付ける

CSS (CSS3) の中に「border-image」というプロパティがあります。以前は WordPress.com では使えませんでしたが、2016-01-22現在は使えるようになっています。

このプロパティの詳細については以下の記事等をご参照ください。

ここでは、このプロパティを使って、WordPress.com で実際に画像の枠を作成してみたので、その覚え書きです。

続きを読む

記事の中に欄を作るための HTML タグ -タイトル右上バージョン-

以下の HTML タグをテキストモードで記事中に貼り付けると、

memo

 (ここに文章等を入力します。)

右のような欄が表示されます。

適宜、色を変更するなり、

memo

(ここに文章等を入力します。)

左寄せにするなり、

memo

(ここに文章等を入力します。)

幅を変更するなり

memo

(ここに文章等を入力します。)

して、好きに使ってください。なお、Firefox のアドオン「Make Link」等に登録して使う場合、

2015-11-02 at 15.16

ビジュアルモードで貼り付けると HTML 内の CSS スタイルが欠落してしまいますので、そのようなツールを使う場合にはテキストモードの状態

2015-11-02 at 15.09

で貼るようにしてください。

レイアウトが崩れるようであれば、上記 HTML タグの後ろに以下のタグを貼ってみてください。

注意書きに「blockquote」を入れてみたら WordPress.com リーダーでもボックス表示される?

私自身は、ブログの記事に注意書きをつけるときには、以下のようなボックスを使っています。

!

(ここに注意書きの内容を記載します。)

これまでは div 要素を使っていたのですが、WordPress.com リーダーでの表示が他の文章と区別がつきにくかったので、試しに blockquote を使ったところ、多少は改善されたので、その覚え書きです。

続きを読む

background-image + before,after で画像の枠を作成する

最終更新日:2016-01-22

以前、記事「background-image + padding で画像の枠を作成する」において、画像の枠線を表示する方法について検討しましたが、HTML タグが2つ必要なので、テーマのウィジェットや記事のタイトル部分では使いにくいと思ったので、CSS だけで画像の枠線を表示する方法について検討してみました。

記事等に以下の HTML タグを追加し、

<div class="test">てすてす</div>

以下の CSS を CSS スタイルシートエディターへ追加すると、

画像の枠線つきのボックスを表示することができました。

adfasdfads

続きを読む

#2013