jun-style (お仕事備忘録)

事務員の備忘録、メモ。仕事において役に立つと思ったこと、気になったこと、とりとめもないことを無作為に記しています(´・ω・`)

手軽に囲み枠、飾り枠をつくる。記事を囲んでみる[簡単なhtmlタグ]

      2014/02/10

このエントリーをはてなブックマークに追加
はてなブックマーク - 手軽に囲み枠、飾り枠をつくる。記事を囲んでみる[簡単なhtmlタグ]
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
手軽に囲み枠、飾り枠をつくる。記事を囲んでみる[簡単なhtmlタグ]jun-style (お仕事備忘録)

 

記事を装飾したい。というか囲みたい。 でもそんなにごてごてしたものじゃなくてシンプルなものでよい。 そんなときに、htmlで簡単に挿入できるタグがあったので、メモしておきます。 ウェブを作っている方からすると、きっと、超基本的なことなんだろうなあ。今まで、ビルダーやらGoliveやらにお任せだったので、私にとってはありがたいものなのです。

 

 

<p style=”border-bottom: #cccccc 1px dotted; border-left: #cccccc 1px dotted; padding-bottom: 5px; background-color: #ebedff; padding-left: 5px; padding-right: 5px; border-top: #cccccc 1px dotted; border-right: #cccccc 1px dotted; padding-top: 5px”>ここに文章をいれるとよいみたいです。 </p>

(コピペ用。含じぶん)

 

 

ちょっと自分なりにいじってこんな風なシンプルなものもつくってみました。

ここに文字を入れます

 

シンプルできれいでしょう?

 コードはこんな感じです↓

 

<fieldset style=”padding: 10px 5px 10px 20px; border: 2px dotted red; background-color: oldlace; color: blue;”><span style=”font-size: medium;”>ここに文字を入れます</span></fieldset>

 

【コードの内容は・・・】

◆余白の設定

padding: 10px 5px 10px 20px;

順番に、上、右、下、左、の余白を入れていきます。

 ◆枠線の太さ、種類、色

border: 2px dotted red;

点線以外の指定もできます → 実線 :solid、点線 : dotted、破線 :dashed、 二重線: double、無し:none

なので、dottedの部分を変えると。。。

こんな感じになります

 二重線:doubleを指定してみたのですが、線の間が詰まっているのか二重線には見えませんが、よい感じになりました。

◆枠内の塗りつぶし

background-color: oldlace(#DF5E6 薄いピンク色です)

◆枠内の文字色

color: blue (青)

 よい感じでしょう^^?

 

ちなみに。枠内の文章が、2行、3行と改行により行が増えるときは、改行のときに</br>タグを。文章と文章の間に挿入する必要があるようです。

※</br>をいれないと、囲みが分裂するみたい(もちろん、こういう効果をねらうのもありかもしれません)。

 

ところで。 wordpressにおいては、以前話題にもしてみたプラグイン「wp-note」がすごく手軽で、見栄えもよかったから重宝していたのですが。

付箋内にアイコンがついてしまうことと、スマートフォンなんかで表示すると、少し崩れたりするんですよね

wp-noteはこんなかんじ。 見た目きれいだけど、スマホ表示などではたいてい崩れるんですよねー。 【参照】WP-Note 記事の文章をお洒落に囲むことができるプラグイン=WordPress=

なので、これとwp-noteをケースバイケースで使い分けていきたいと思います。

 - 未分類, メモ・備忘録, wordpress, ネット関連