おしゃれでシックな FOLLOW ME アイコンを見つけたので設置してみました。
この FOLLOW ME アイコンは、35 Follow me on Twitter badges / buttonsで入手できます。サイトにアクセスして、希望のアイコンを右クリックして画像を保存するだけです。
上の画像は若干縮小しています。実際のサイズはこれになります。
その他の Follow Me アイコン配布・紹介サイト
>> ブログの横にtwitter(ツイッター)用「Follow Me」バッジをつける方法@Photoshop Vip
>> 「私をフォローしてくださいッ」のTwitterアイコン31個を配布しているサイト@二十歳街道まっしぐら（FC2ブログ時代）
自分のブログやサイトに「ツイートする」ボタンを設置します。
1. Twitter / ツイートボタンのページにアクセスします。
2. 好みのボタンを選びます。
3. 「ツイートする」ボタンを設置したい箇所に表示されたコードを記述します。以下のように表示されます。
FacebookのLike Button(いいねボタン)の設置@to-Rを参考にして、Movable Type に Facebook の「いいね！」ボタンを設置してみました。
1. まず、Facebook 開発者の Like Bottun ページで好みのレイアウトと Width を指定して [Get Code] ボタンを押します。[URL to Like] フィールドは何も入力する必要はありません。 このサイトでは、Layout Style に [button_count] を選んだので、[Width] は 150 に設定しました（ボタンの設置位置やレイアウトに応じて、適切な width を設定してください）。
2. 表示された iframe のコードをメモ帳などにコピー & ペーストします。
3. 上記の赤字の箇所「http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike」を「<$MTEntryPermalink encode_url="1"$>」 に書き換えます。
4. 書き換えたコードを「いいね！」ボタンを設置した箇所に記述して、サイトを再構築して完了です。
参考・参照サイト
公式の『mixiボタン』『Twitterボタン』『Facebookボタン』『GREEボタン』『はてなボタン』などを設置する方法。@YABURE KABURE
FacebookのLike Button(いいねボタン)の設置@to-R
スタイルシートではなく、その場かぎりでスタイルを指定するには、HTML タグを
<div stye="">テキストや画像などのコンテンツ</div>
のように記述します。<div stye=""> と </div> で囲まれた箇所が指定のスタイルで表示されます。" " 内にスタイルを指定します。たとえば、背景が薄いグリーンの緑色の枠内に、20px のサイズの赤い太字で表示したい場合は、以下のように記述します。
実際にこれを記述すると、以下のように表示されます。
ただし、本来はスタイルシートで指定するほうがよいので、乱用しないほうが賢明なようです（このスタイルを常時使用する場合は、スタイルシートで指定します）。
写真を以下のようにポラロイド風に表示する方法。
スタイルシートにポラロイド風写真のスタイルの記述を追加します。上の写真の場合は、pola クラスとして次のように指定しています。好みに応じてスタイル指定を変えてください。
「padding:30px 30px 90px 30px;」が写真周囲の余白になります。数字は前から順番に、上、右、下、左の余白になります。上、右、左を同じ数字にして、下をそれよりも大きめに指定するとポラロイドっぽくなります。
次に、対象となる画像の画像挿入タグ内に class="pola" を挿入します。
次に、以下のように写真立て風に表示する方法。
たとえば、次のようにスタイルを指定します。ここでは、stand クラスとしてスタイルを指定しています。
background-image: url(http://～gazo.gif) の ( ) に画像の URL を指定してください。
今度は、対象となる画像の画像挿入タグ内に class="stand" を挿入します。
写真の下の余白部分に説明を入れることも可能。
記述例は以下のとおり。
div の width と画像の width に同じ値を指定します。
関連記事 >> 写真をポラロイド風に加工できるサイト
新着情報