WordPress.com にゴーストボタンを貼る

以下の記事で紹介されていたボタンを WordPress.com で試してみたところ、うまくいくことを確認しました。

表示のようすはこんな感じです。HTML を記事に貼って、CSS を WordPress.com に適用すれば、以下のようなボタンが反映されると思います。

CSS の追加なしにリンク付きボタンを設置する方法

CSS の追加なしに以下のようなリンク付きボタンを設置する方法についての覚え書きです。

続きを読む

WordPress.com にボタンを貼り付ける方法 -「beautons」を使う –

「beautons」というボタンを WordPress.com に貼り付ける方法についての覚え書きです。

続きを読む

#%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e6%8a%95%e7%a8%bf

Twitter Bootstrap のボタンなどを WordPress に適用する方法についての考察

以前、記事「プラグイン「Content Bootstrap」をちょっとさわってみました」において、「Twitter Bootstrap 」なるものがこの世に存在することについて覚書きしました。

ここでは、それをレンタルサーバ等にインストールするタイプの WordPress や WordPress.com でどうやったら使えるようになるのかについて考察してみました。

Twitter Bootstrap !」と叫んでみたが、ボタンは表示されなかった

そもそも、Twitter Bootstrap というのは、これのようです。

Bootstrap
Bootstrap

続きを読む

#2013

記事中に直接、「使用中」のボタンをつける方法

前回の記事「CSSを使って「使用中」マークを入れる」を参考に、記事に直接貼り付ける方法について考えてみました。

以下の HTML タグを文章の後ろに貼ると、
<span style="color: green; background-color: #dddddd; border-radius: 20px; padding: 2px 10px; font-size: 11px; text-shadow: 1px 1px 1px #ffffff; border: 1px solid #cccccc; box-shadow: 1px 1px 1px white, -1px -1px 1px rgba(0,0,0,0.4); margin: 0 10px; line-height: 2.5;">使用中</span>

この文章のうしろに「使用中」というボタンがつきます。使用中

#2013

CSSを使って「使用中」マークを入れる

以下のCSSを追加して、

/* 使用中のマークを入れる */
.useitem::after {
	content: "使用中";
	color: green;
	background-color: #dddddd;
	border-radius: 20px;
	padding: 2px 10px;
	font-size: 11px;
	text-shadow: 1px 1px 1px #ffffff;
	border: 1px solid #cccccc;
	box-shadow: 1px 1px 1px white, -1px -1px 1px rgba(0,0,0,0.4);
	margin: 0 10px;
	line-height: 2.5;
	vertical-align:middle;
}

投稿記事等に以下のような感じでクラス名「useitem」を追加すると、

<ul><li class="useitem">とっても便利なアプリ</li></ul>

「使用中」というマークを右側に入れることができます。

  • とっても便利なアプリ

「使用中」のところを「おすすめ!」とか「New !」とかに変更するなどして、いろいろと使えるのではないかと思います。

#2013

GitHub ボタンをWordPress.comに適用してみる

最終更新日:2015-12-24

!

かつては、この記事にボタンのサンプルを貼り付けていましたが、このブログでは GitHub ボタンの CSS を用いないことにしたため、表示されなくなりました。従いまして、やや説明がわかりづらい部分がありますがご了承ください。(2015-12-24記)

 

続きを読む

#2012