刺繍で縫いつけたようなボックスを描くための CSS(改)

最終更新日:2016-02-17

dfafad

続きを読む

#2013

background-image + padding で画像の枠を作成する

以下の HTML を記事にはりつけると

<div style="background-image:url('http://comemo508forum.files.wordpress.com/2013/03/skinimage07.jpg');border-radius:5px;padding:5px;margin-bottom:2em;">
<div style="border-radius:5px;background-color:white;padding:10px 15px;">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
</div>
</div>

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

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

続きを読む

#2013

「Stylish」という Safari の拡張機能を使って、自分が使っているパソコンだけ表示を変える

以前、記事「記事中に自分だけ(ではなくて、WordPress.com にログインしている人だけ)が見れるメモ欄を挿入する」において、自分だけが見える部分を作って、そこにメモをする方法についての覚書をしたつもりでしたが、「自分だけ」ではなくて、「WordPress.com にログインしている人」になっていたので、改めて、自分だけが見れる部分を作る方法についての覚書です。

例えば、このサイトのフッター部分には、私だけが見れる領域を設定しています。

image

続きを読む

#2013

記事中に注意書きの欄を入れる -丸い記号版-

以前、「記事中に注意書きの欄を入れる」という記事を作成しましたが、前回は注意を喚起するというよりも、ポイント・要点を目立たせる、という感じのものだったので、今回は、「気をつけて!」というニュアンスが出るような感じにしてみました。どうでしょう?

dsfgsdfgdfs

続きを読む

#2013

記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)

最終更新日:2014-05-30

以前、「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –」という記事を書きましたが、欄の間に隙間を作るのに、border を背景と同じ色にするといった力技ではなくて、スマートな方法が分かったので、その覚書です。

display:table を指定している要素に「border-collapse: separate; border-spacing: 10px;」といった感じの記述を追加すると、欄と欄との間にスペースを確保できるようです。

ブログ上での表示は、以下のような感じです。

見出し

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

見出し

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

見出し

本文 本文 本文

見出し

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

見出し

本文 本文 本文

見出し

本文 本文 本文

見出し

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

見出し

本文 本文 本文

見出し

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

続きを読む

#2013

記事中に注意書きの欄を入れる

記事中に下図のような注意書きの欄を入れるための CSS についての覚書です。

adfasfads

続きを読む

#2013

記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 –

※ 改訂版を作成しました。
記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)
(2013年4月10日追記)

前回の記事「記事内に高さの同じ枠つきの欄を作成する - margin-bottom: -32768px を使う方法 –」の方法だと、記事への記述がちょっとごちゃごちゃしていて、カスタム CSS をあまり有効に利用できていないような気がするので、極力、記事への記述を最小限に抑える方法のひとつとして、「display: table」を使って、記事内に高さの同じ枠つきの欄を作成する方法について検討してみました。

検討した結果を反映させたデモは以下のとおりです。

srgadafda

続きを読む

#2013, #nodisplay