1 year 1 month 20 days 前に書いた記事です。最新の情報とは異なる場合がありますのでご注意ください。

画像をポラロイド風に表示する JavaScript『Instant.js』。
WordPress 専用ではなく、JavaScript が動作するブログで設置可能なようです。

うちのブログでもつい最近まで使ってたんだけど。
IE8 を入れた途端にエラーが出るようになってしまい…。
単一記事の閲覧時には、Instant.js が働いていない状態に(;´Д`A “`
自分で確認した中では、IE8 だけなんだよね、この JavaScript でポラ風にならないのって。。

働かないものを入れても意味がないので、CSSでポラロイド風にすることにしました。
今更感が漂ってますがｗ

← こんな感じです。

まずはCSSにスタイルを書き込みます。
class名は適当にpolaとでも。
上の画像はサムネイル(横幅185px)で、ポラの下の枠内にサイト名画像(175px*25px)を配置しています。
※ポラの下の枠に画像を入れない場合は下記8~10行は要りません。

1
2
3
4
5
6
7
8
9
10
11

.pola {
      background-color: #ffffff;  /* ポラロイドの台紙色 */
      margin: 5px 20px 5px 5px;  /* ポラロイドの周りの間隔：上 右 下 左 */
      padding: 10px 10px 40px 10px;  /* ポラロイドの幅：上 右 下 左 */
      border-width: 2px;  /* 枠線の太さ */
      border-style: solid;  /* 枠線の種類 */
      border-color: #eeeeee #cccccc #cccccc #eeeeee;  /* 枠線色：上 右 下 左*/
      background-image: url(http://ワンポイント画像のURL);
      background-repeat: no-repeat;  /*ワンポイントを繰り返すか */
      background-position: 48% 97%;  /*ワンポイントの位置：左から 上から */
}

これを以下の例のように、ブログ記事内のポラロイド風に表示したい画像に適用させます。

<a href="画像のURL" title="画像のタイトル">
<img src="サムネイルのURL" alt="画像名など" width="画像の幅" height="画像の高さ" class="pola" />
</a>

ブログの記事投稿画面にある画像挿入で自動的に<img>タグが挿入されるので、
あとは class=”pola” を追加してください。
class属性が既にある場合は (半角スペース)pola を追加してください。
なお、上のポラ風の画像サンプルは左に寄せてテキストを右に回り込ませているので、
class=”alignleft pola” となっています。（大まか過ぎる；；
※テキストを右に回り込ませるにはCSSに適宜追加する必要があります。

関連するかもしれない投稿

• プラグインのテスト。[更新] (0)
• トラックバックの文字化け。 (0)
• いきなりのアクセス不能。 (0)
• 「Arthemia」その後。 (2)
• WPテーマ「Arthemia」[更新] (2)