Photoshopで画像を開き、「イメージ」−「サイズ変更」−「カンバスサイズ」をクリックします。


「幅」と「高さ」に任意の数字を入れます。
「相対」にチェックを入れておくと開いた画像の回りにそのサイズ分の余白ができます。
この余白がフレームの幅になりますので、画像に応じてお好みの幅にして下さい。


「自動選択ツール」で白色の余白の部分をクリックします。
（余白の部分だけが選択されます。）


新規レイヤーを作成します。

ここでは木目調のフレームを作ってみたいと思います。
１．「塗りつぶしツール」をクリック。
２．「パターン」にチェック。
３．「▼」ボタンをクリック。
４．「」ボタンをクリック。
５．「パターン１」をクリック。


「木」のパターンを選択し、塗りつぶしツールで白い余白の部分をクリックすると、白い部分が木目調に塗りつぶされます。


「選択範囲」の点線がジャマですので消しておきましょう。
「選択範囲」−「選択の解除」をクリックすると範囲選択の点線が消えます。


「効果」−「▼」ボタン−「ベベル」をクリック。


ここでは「シンプルシャープ」を選んでみました。
いろいろな「ベベル」を選んで、試してみて下さいね。


「シンプルシャープ」をダブルクリックするとこんなふうになります。


レイヤースタイルをお好みに変えてみましょう。
「レイヤー」−「レイヤースタイル」−「レイヤーの設定」をクリックします。


「ドロップシャドウ」にチェックを入れたり、ベベルの「サイズ」を変更したりして、好みのスタイルに変更します。


こんな感じに完成♪


「画質調整」−「カラー」で「色相・彩度」を触って、色合いを変えてみたり、ベベルの種類を変えたり、パターンで塗りつぶすのではなく、グラデーションで塗りつぶしたり、いろんな効果を試してみると、いろんなフレームができますよ。

script.aculo.usから必要なJavaScriptをダウンロードします。

こちらのページに行きましたら、右から二つ目の○の中にある「Downloads page」をクリックします。

真ん中の○の「scriptaculous-js-1.8.2.zip」をクリックすると保存（ダウンロード）できます。

ダウンロードしたscriptaculous-js-1.8.2.zipファイルを展開すると←のようなフォルダが現れます。
「lib」フォルダの中のファイル、「src」フォルダの中から３つのファイルが必要となります。

これは「src」フォルダの中身です。

「lib」フォルダに入っているファイルと
←こちらの「ｓｒｃ」フォルダの中から□で囲んだ3つのファイルを使用します。

復習です。
使用するファイルは
・prototype.js
・controls.js
・effects.js
・scriptaculous.js
の４つです。

この4つのファイルをファイルのアップロード画面から画像などをアップするのと同様にアップロードします。

テンプレートの編集画面を開き、HTMLの編集で</head>の直前に下記を追加します。

<script type="text/javascript" src="http://blog-imgs-*.fc2.com/*/*/*/********/prototype.js"></script>
<script type="text/javascript" src="http://blog-imgs-*.fc2.com/*/*/*/********/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://blog-imgs-*.fc2.com/*/*/*/********/effects.js"></script>
<script type="text/javascript" src="http://blog-imgs-*.fc2.com/*/*/*/********/controls.js"></script>

<script type="text/javascript">
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 0.5, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
function ajaxShowHide(entryID) {
element = $('Text' + entryID);
if(element.style.display == 'none') {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
Element.show(effect.element);
}
};
Effect.BlindDown(element, options);
} else {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
Element.hide(effect.element);
}
};
Effect.BlindUp(element, options);
}
}
</script>

赤字の部分を書き換えます。
「http://blog-imgs-*.fc2.com/*/*/*/********/」の部分はファイルをアップロードしたURLです。
よくわからない場合は
ファイルをアップロードしたあとに「表示」をクリックします。
するとブラウザにアップロードしたファイルの中身が表示されます。

ブラウザのURLが表示される欄に出てくるURLをコピーして貼り付けるとよいと思います。

<!--more_link-->
<div class="entry-more">
<a href="<%topentry_link>#more">続きを読む（「追記」などテンプレートによって表示が違うと思います） "<%topentry_title>"</a>
</div>
<!--/more_link-->

上記のような<!--more_link-->〜<!--/more_link-->を探し、その部分をを下記に差し替えます。

<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->

これでひと味違った「追記」の開閉ができますよ♪

ここに書いたことはFC２のブログのテンプレートの編集でのことですが、他のブログでもテンプレートを編集できる場合は、追記部分のHTMLを編集すれば同様にできると思います。

　角丸にしたい写真を開きます。
　そのとき、レイヤータブ上で「背
　景」になっている写真をレイヤー
　に変換しておきます。

　レイヤータブの「背景」を右クリッ
　クして「背景からレイヤーへ」を選
　択するとレイヤーに変換されま
　す。



　
　「選択範囲」で
　「すべてを選択」



　再び「選択範囲」−
　「選択範囲を変更」　
　−「滑らかに」



　半径のところに
　任意の数字を
　入れます。



　点線で角が丸く
　表示されます



　「選択範囲」−
　「選択範囲を反転」
　
　角丸のいらない
　部分が選択されま
　す。



　「編集」−
　「カット」

　これで不必要な
　部分は切り取られ、
　角丸になりました♪

そのまま保存するとカットした部分は白色になりますが、ブログなどに使う場合、その部分をブログの記事欄の背景と同じ色にすると、全く違和感がなくなります。