ホームページ/ブログ全般

写真をポラロイド風や写真立て風に表示する

写真を以下のようにポラロイド風に表示する方法。

インド料理のランチ

スタイルシートにポラロイド風写真のスタイルの記述を追加します。上の写真の場合は、pola クラスとして次のように指定しています。好みに応じてスタイル指定を変えてください。

.pola { background-color:#fffdf4;padding:30px 30px 90px 30px;border: 1px solid #cccccc; }

「padding:30px 30px 90px 30px;」が写真周囲の余白になります。数字は前から順番に、上、右、下、左の余白になります。上、右、左を同じ数字にして、下をそれよりも大きめに指定するとポラロイドっぽくなります。

次に、対象となる画像の画像挿入タグ内に class="pola" を挿入します。

次に、以下のように写真立て風に表示する方法。

インド料理のランチ

たとえば、次のようにスタイルを指定します。ここでは、stand クラスとしてスタイルを指定しています。

.stand { background-color:#fffdf4;padding:30px 30px 90px 30px;border: 1px solid #cccccc; background-image: url(http://～gazo.gif) ; }

background-image: url(http://～gazo.gif) の (　) に画像の URL を指定してください。

今度は、対象となる画像の画像挿入タグ内に class="stand" を挿入します。

写真の下の余白部分に説明を入れることも可能。

マリンピア神戸のインド料理のランチ。安くておいしいです

記述例は以下のとおり。

<div style="border:1px solid #cccccc; padding:30px; width:250px; background:#fffdf4; font-size:85%; line-height:150%; ">
<img style="margin:0 0 10px 0;" width="250px" height="188" alt="インド料理のランチ" src="lunch.jpg">
<br>
マリンピア神戸のインド料理のランチ。安くておいしいです
</div>

div の width と画像の width に同じ値を指定します。

関連記事 >> 写真をポラロイド風に加工できるサイト

自分のブログやサイトの人気記事（エントリー）のランキングを簡単に作成できるツール

ブログやサイトの記事が古くなると、読んでもらえる機会がどんどん減っていきます。また、自分のブログのどんな記事がよくアクセスされているのか、どんな記事が人気があるのかを知ると、今後記事を書くときの参考になります。

ACR WEB のページランキングを利用すると、プラグインを使ったり、難しいコードを記述したりしなくても、簡単に人気記事のアクセスランキングを表示できます。ランキングの対象にしたいページの任意の場所に ACR WEB バナーのタグを貼り付け（このサイトの表示例は、ページ左側のサイドバーのいちばん下を参照）、ランキングを表示したい箇所にランキング表示用タグを貼り付けるだけです。

このサイトでは、「人気記事ランキング」というページを作成して、そこに以下のランキングを表示しています。

表のタイトル、幅、文字サイズ、色などは自由に編集できます。幅を小さく設定すると、サイドバーにも設置可能です。ランキングは最大 50 位まで表示でき、アクセス数も表示できます。

詳細は、ACR WEB ページランキングにアクセスしてください。
わかりやすい設置マニュアルも用意されています。