以下の記事で紹介されていたボタンを WordPress.com で試してみたところ、うまくいくことを確認しました。
表示のようすはこんな感じです。HTML を記事に貼って、CSS を WordPress.com に適用すれば、以下のようなボタンが反映されると思います。
カテゴリー別アーカイブ: 貼付け方：ボタン
CSS の追加なしにリンク付きボタンを設置する方法
WordPress.com にボタンを貼り付ける方法 -「beautons」を使う –
「beautons」というボタンを WordPress.com に貼り付ける方法についての覚え書きです。
Twitter Bootstrap のボタンなどを WordPress に適用する方法についての考察
以前、記事「プラグイン「Content Bootstrap」をちょっとさわってみました」において、「Twitter Bootstrap 」なるものがこの世に存在することについて覚書きしました。
ここでは、それをレンタルサーバ等にインストールするタイプの WordPress や WordPress.com でどうやったら使えるようになるのかについて考察してみました。
「Twitter Bootstrap ！」と叫んでみたが、ボタンは表示されなかった
そもそも、Twitter Bootstrap というのは、これのようです。
記事中に直接、「使用中」のボタンをつける方法
前回の記事「ＣＳＳを使って「使用中」マークを入れる」を参考に、記事に直接貼り付ける方法について考えてみました。
以下の 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>
この文章のうしろに「使用中」というボタンがつきます。使用中
ＣＳＳを使って「使用中」マークを入れる
以下の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 !」とかに変更するなどして、いろいろと使えるのではないかと思います。
GitHub ボタンをWordPress.comに適用してみる
最終更新日：2015-12-24
!かつては、この記事にボタンのサンプルを貼り付けていましたが、このブログでは GitHub ボタンの CSS を用いないことにしたため、表示されなくなりました。従いまして、やや説明がわかりづらい部分がありますがご了承ください。(2015-12-24記)
