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

最終更新日:2016-01-22

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

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

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

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

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

adfasdfads

上下の位置関係はこんな感じです。

background-image + before,after で画像の枠を作成する | comemo demo (org)

この方法を応用すると、例えば、記事のタイトル部分を以下のような感じにすることができます。

sadgfasfasd

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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