アメザク（アメブロザクザク）テンプレートカスタマイズ～記事枠設置～

記事に枠を付けることで、ついつい読んでしまう。という家族の言葉で記事枠を設置してみました。
設置するにあたりどんな感じにしようかな？と少し迷いました。
最も簡単な方法は記事文章を<blockquote>記事</blockquote>で囲む方法ですが、これでは味気ないので、別の方法をとることにしました。
※blockquoteを使うと記事が点線枠で囲まれて表示されます。

今回設置した枠線はスクリプトを利用する方法を採りました。
以下の記述をした「sample.css｣(任意の名前でＯＫです）を作成してサーバーにアップロードしておいて、
アメブロのプラグインで外部ファイルとして読み込ませる方法です。

【手順１】
■sample.cssの内容
------------------------------
p.sample {
padding: 15px;
border: inset 10px #336633;
}
------------------------------
①insetを使うとこのブログのように上と左のボーダーが暗く下と右のボーダーが明るく表示され、
　ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。
②記事枠と文章との間の余白は、「padding: 15px」の部分で指定しています。
　これを指定していないと文章と枠の間に全く余白がなくなって読みづらくなります。
　paddingの数値は、ご自身で数値を調整されて下さい。
③色指定は上記の「#336633」（カラーコード）の部分ですので、自分の好みの色を指定します。　　　
　sample.cssファイルは「サクラエディタ」を使って「UTF-8」の文字コードで保存。
　これをサーバーにアップロードしています。
　サーバーにアップロードしたファイルのURLを控えておきます。

【手順２】
■外部スクリプトファイルとして読み込み
sample.cssのURLがhttp://www.yourdomain.com/sample.cssである場合、以下のスクリプトを記述します。

<link rel="stylesheet" href="http://www.yourdomain.com/sample.css" type="text/css">

そして、この記述をアメブロのプラグインの最後尾に貼り付けて保存します。

【手順３】
■上記の記事枠を表示させるために、<p class="sample">記事</p>というスタイルで記事を書きます。
　※「sample」としているのは、手順１で作成したCSSファイル名をsample.cssと定義しているためです。
　　他の名前を使ってcssファイルを作成されていれば、その名前を使用します。

以上で、このブログのように記事の周りに枠が表示できます。
色については、グラフィックアクセラレーターやディスプレイ環境によって違って見えたりしますので
出来れば色再現性・解像度の良い環境で確認しながら色を決めて下さい。