CSS を使って new マーク等を入れる

最終更新日:2016-03-07

2015-11-30 at 8.01.jpg

続きを読む

Trello のリンクへアイコンを追加するための CSS

以下の CSS を追加すると、

Trello へのリンクの前にアイコンがつきます。

なお、これが正しい方法かどうかわかりませんが、このアイコンは「CC BY 3.0」ということでクレジット表記をする必要があるので、このアイコンを使用しているページの下に以下のタグを貼り付けて、

以下のような感じでクレジット表示されるようにしましたが、こういう方法でいいのかどうかはわかりません。

2015-11-02 at 9.30

CSS で文字を上書きする方法についての考察

最終更新日:2015-03-30

ここでは、CSS を使って文字を上書きする方法について考察したいと思います。

続きを読む

【WordPress.com】ナビゲーションメニューにアイコンを入れる方法 (改)

3年以上前に記事「[WordPress] ナビゲーションメニューにアイコンを入れる方法 | comemo」において、メニューに画像のアイコンをつける方法について覚え書きをしましたが、ここでは、Web フォント「Noticons」をメニューの左側に追加する方法について覚書きしたいと思います。ざっくり説明すると、画像のかわりに Web フォントが入るだけです。

2015-03-06 at 14.16

続きを読む

#2015

引用文の右下にタグをつける

記事中に以下のような引用文を追加し、

<blockquote>本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</blockquote>

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

/* 引用文の右下にタグをつける */
blockquote {
	font-family: inherit;
	position: relative;
	padding: 20px 30px 10px;
	margin: 15px auto 30px;
	background-color: #fff;
	box-shadow: -1px -1px 2px rgba(0,0,0,0.6), 1px 1px 2px rgba(255,255,255,0.8), inset 0 0 50px #EADED3;
	border: 1px solid #ccc;
	background-color: #f0f0f0;
	max-width: 440px;
	overflow: visible;
}

blockquote:before {
	content: "他のブログなどからの引用部分";
	position: absolute;
	bottom: -22px;
	right: 20px;
	height: 20px;
	background-color: #666666;
	background-color: rgba(0,0,0,0.600);
	border-radius: 0 0 5px 5px;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 20px;
	z-index: 1;
	color: #fff;
	text-shadow: -1px -1px 1px #777;
	padding-right: 7px;
	padding-left: 7px;
	font-size: 10px;
}

引用文の右下にタグがつきます。

t demo | WordPress.com のデモ用

続きを読む

#2013

[WordPress.com] ソースコードの右下にラベルをつける

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

/* ソースコードの装飾 */
div.syntaxhighlighter {
	outline: 6px solid #eccbbb;
	box-shadow: 0 0 0 7px #dabcad;
	margin-bottom: 2.625em !important;
}

div.syntaxhighlighter.xml:before,
div.syntaxhighlighter.plain:before {
	content: "HTML";
	position: absolute;
	bottom: 0;
	right: 20px;
	height: 20px;
	background-color: #c27d5a;
	background-color: rgba(194,125,90,0.7000);
	border-radius: 3px 3px 0 0;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 20px;
	z-index: 1;
	color: #fff;
	text-shadow: -1px -1px 1px #9f4f27;
	padding-right: 7px;
	padding-left: 7px;
	font-size: 10px;
}

div.syntaxhighlighter.css {
	outline: 6px solid #aee3e8;
	box-shadow: 0 0 0 7px #93c0c4;
}

div.syntaxhighlighter.css:before {
	content: "CSS";
	position: absolute;
	bottom: 0;
	right: 20px;
	height: 20px;
	background-color: #31b1bc;
	background-color: rgba(49,177,188,0.700);
	border-radius: 3px 3px 0 0;
	border: 1px solid #ccc;
	text-align: center;
	line-height: 20px;
	z-index: 1;
	color: #fff;
	text-shadow: -1px -1px 1px #237d85;
	padding-right: 7px;
	padding-left: 7px;
	font-size: 10px;
}

ソースコードの右下にラベルをつけたりすることができます。

sdggsdfgdf

rect3015

sadgdfgf

#2013

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

最終更新日:2016-01-22

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

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

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

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

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

adfasdfads

続きを読む

#2013