テンプレート 【 ありのごとくあつまりて 】

2014年の 年賀状の販売が始まりましたね。 今年も無料で使える「2014年うま年用 写真フレーム年賀状用テンプレート」 リンク集を作りました。

作り方はこのページの下にも載せています

私は 例年ワードで作っているので ワードでのワンポイントも紹介しています。それ以外の宛名作成用ソフトで作る方で、方法がよく分からないという方は Canon のサイトにある 年賀状の作り方 ページが分かり易いと思います。 作成ソフト別（筆まめ，筆ぐるめ，筆王，楽々ハガキ，宛名職人，Microsoft Word） での作り方が 詳しく図解されていますよ。 最初は、フレーム数 が少なく、フレームとフレームの間が広めのものを選ぶと失敗が少ないかもしれません。

• フォトフレーム年賀状 - キヤノン クリエイティブパーク
  
  [ PNG形式 ]　Canon の提供で、干支（午・馬）素材ものが73件，干支なし素材も入れると202件と とても充実しています。 落ち着いた雰囲気のものから 可愛らしいものまで様々です。ワンポイントに追加できる 賀詞 などの素材も揃っています。 今年から PNG形式 になったので、利用しやすくなりました♪
  
  
• 年賀状クイックサーチ｜郵便年賀.jp
  
  [ PNG形式 （圧縮ファイルをダウンロードする形式） ]　JP日本郵便の提供。 「テンプレートを検索する」 から 「条件を絞って検索」 へと進み、写真フレーム の項目 を 「あり」 にして 検索すればOKです。 210件程度の中には、出産報告に使えるテンプレート や 入学報告に使えるテンプレートなど面白い素材も多いですよ。 注意）年末はサイトが激重になるかも。。
  サンプルは こちらのテンプレートを利用しています。 手作り風はんこ作成ツール（無料） もあるので、子供の写真で作った ハンコ画像 も入れてみました。
  
  
• 無料ダウンロード | プリビオ・オープンテラス | ブラザー
  
  [ PNG形式 ]　brother の提供。 フォトフレームは 32件と数は少ないですが、素敵なデザインのテンプレートがあります。 左のメニューの中に 「全国ご当地キャラ年賀2014」 というのがあるのですが、その中にもフォトフレームものが 各キャラ2種類 混じっています。 目的のキャラがあるか検索できないがちょっと残念です...
  
  
• 年賀状MYプリント 馬(うま)のイラスト 写真フレーム
  
  [ PNG形式 ]　左側のフレームメニュー「干支うまの年賀状」から選択できます。 富士山＋馬のイラスト など可愛くて元気なイメージのテンプレートが素敵です！ 写真は1枚用～ 4枚入れられるものまであり、賀詞入り・賀詞なし等 から選べます。 新作も随時追加されているようなので要チェックですね。
  
  
• 写真フレーム 無料素材 午・うま｜写真で年賀状Pnen
  
  [ PNG形式 ]　オレンジ色を基調とした可愛い素材が多いです。（姉妹サイト： 年賀状素材スープ にも一部異なる素材が置かれているようです。） 「午（うま）の着ぐるみ」カテゴリ も要チェック！ サムネイルをクリックすると 同系の数パターンが表示されます。 ダウンロードするには 2クリックした（大きいサイズ）の画像を保存してください。
  
  
• 年賀状無料素材/2014年イラスト午年（うま）年賀状わんパグ
  
  [ PNG形式 ]　有名な素材屋さんです。 1～5（6?）フレームのテンプレートがあるので 「たくさん写真を入れたい」という方にも良いかも。 うまの着ぐるみ も可愛いです。 同作者さんの わんパグ別館 には 結婚報告，出産報告，引越し報告用 の写真フレームテンプレートもあるのですが、今年は干支ものは無さそうです。。
  
  
• 写真（デジカメ）フレーム年賀状テンプレート【フォト年賀状桜屋】
  
  [ PNG形式 ]　ちょっと入口が迷いやすいですが、ピンク色を基調とした 素敵な素材がたくさんあります。お花やクローバー好きな人には必見です♪ メニューで 1フレーム～4フレーム を選べるので用途とパソコンスキルに合わせて選べます。 敢えて難易度の高いものを選んで 差をつけちゃっても良いかも！
  

↓まだまだ... いいなというサイトを見つけ次第 ここにも追加していきたいと思います。 画像をクリックすると 大きめの画像サンプル4～5個 を表示します。

2013年も 誰よりも可愛い年賀状を作るぞ！ ...ということで、今年も「2013年へび年用 写真フレーム年賀状用テンプレート」 のリンク集 をまとめました。

追記 ： 2013/11/07 New
最新版 2014年用のリンク集 を別の記事にまとめました。紹介文なども更新していますので最新版をご覧下さい。

Canon のサイトにある 年賀状の作り方 ページでは、作成ソフト別（筆まめ，筆ぐるめ，筆王，楽々ハガキ，宛名職人，Microsoft Word） での作り方が 詳しく図解されています。 初めて写真入り年賀状を作るという方、写真の入れ方がよく分からないという方は、始めに参照してみてくださいね。 私は例年、写真面（おもて）を Microsoft Word、宛名面を 筆ぐるめ で作っています。 最初は、フレーム数 が少なく、フレームとフレームの間が広めのものを選ぶと失敗が少ないかもしれません。

• 年賀状無料素材/2013年イラスト巳年（へび）年賀状わんパグ
  
  [ PNG形式 ]　「とにかく写真をたくさん入れたい！」 という方にもお勧めで、最大で6フレームのテンプレートがあるようです。 また、わんパグ別館 には 結婚報告，出産報告，引越し報告用 の写真フレームテンプレート も多数用意されているので、必要な方は要チェックです。 「へび着ぐるみ単品」 も可愛いのでワンポイントに。。
  
  
• フォトフレーム年賀状 - キヤノン クリエイティブパーク
  
  [ JPG形式， BMP形式 （圧縮ファイルをダウンロードする形式） ]　Canon の提供。 落ち着いた雰囲気のものから 可愛らしいものまであります。 オリジナル年賀状 のコーナーには ワンポイントに追加できる 賀詞 や へびのハンコ などの素材が揃っているので、「気に入ったテンプレートに干支の絵が入ってない」 などの時にも活用できますね。
  
  
• 写真（デジカメ）フレーム年賀状テンプレート【フォト年賀状桜屋】
  
  [ PNG形式 ]　ちょっと入口が迷いやすいですが、ほのぼのとした素材が多くとても素敵です。 1フレームのものから 4フレームものまであるので、敢えて難易度の高いものを選んで 差をつけちゃっても良いかも！ 「へびの七五三」 素材もいいですね。
  左上のサンプルはこちらのテンプレートを使わせていただきました(*´◡`*)
  
  
• 年賀状クイックサーチ｜郵便年賀.jp
  
  [ PNG形式 （圧縮ファイルをダウンロードする形式） ]　JP日本郵便の提供。 「テンプレートを検索する」 から 「条件を絞って検索」 へと進み、写真フレーム の項目 を 「あり」 にして 検索すればOKです。 出産報告などにも使える『たまひよテンプレート』 や 『コラショテンプレート』、『ディズニー キャラクター テンプレート』 もありますよ！
  ※年賀ハガキは ここから注文も可能です。 5枚以上～ 送料も掛りません。 写真入り年賀状を作るなら 60円のインクジェット写真用 がおススメ！ 早めなら 「ミッキー・ミニー切手」で可愛い宛名面の ディズニーキャラクター年賀 もゲットできると思いますよ！
  
  
• 写真フレーム 無料素材 巳・へび｜写真で年賀状Pnen
  
  [ PNG形式 ]　オレンジ色を基調とした可愛い素材が多いです。（姉妹サイト： 年賀状素材スープ にも一部異なる素材が置かれているようです。） 「巳（へび）の着ぐるみ」カテゴリ も要チェック！ サムネイルをクリックすると 同系の数パターンが表示されます。 ダウンロードするには 2クリックした（大きいサイズ）の画像を保存してください。
  
  
• 年賀状MYプリント へびのイラスト 写真フレーム
  
  [ PNG形式 ]　ちょっと広告が多めですが... 左側のフレームメニューから選択できます。 可愛くて豪華な感じのする素材が沢山ありますよ。 写真も1枚用～ 4枚入れられるものまであり 賀詞入り・賀詞なし等 選択肢が多くて便利そうです。
  
  

• 年賀状2013 | 無料ダウンロード | ブラザー
  [ PNG形式 ]　brother の提供。 数は少ないですが、素敵なデザインのテンプレートがあります。 干支柄などは入っていませんが、結婚報告・出産報告に使える写真フレーム もありますよ。
• 干支の写真フレーム年賀状 /巳(へび)
  [ PNG形式 ]　左中央 「干支の写真フレーム年賀状 無料素材入口」 というところから入れます。 素材は 縦型のみですが、シンプルで落ち着いた印象のテンプレートです。
• 【mihoのフォト年賀状】巳・へび2013イラスト
  [ PNG形式 ]　ページ中央 「フォトフレーム年賀状　enter」 というところから入れます。 数は少ないですが、一風変わった面白い年賀状を作りたい人に良いかも。。
• 無料年賀状 フォトフレーム（写真フレーム） Andante
  [ PNG形式 ]　干支，和風，洋風 いずれかを選び、左のメニューから選択できます。 広告リンクが多いですが、フレームが写真サイズのものが多く 難易度は低め、初心者さんでも安心です。
• mococo年賀状2013
  [ GIF形式， JPG形式 ]　イラストレーターMOKOさんの無料年賀素材です。 多忙なようで数は少なめですが、キュートな素材を探している方にはいいかも。。
  
  

ワードで 写真入り年賀状 を作る時のポイント

Microsoft Word で作る際に つまづきやすいかなと思うポイントを載せておきます。

前回の記事 FC2 スマホ用テンプレートに 関連記事リストを追加する方法 では、「スマートフォン用テンプレートでは FC2ブログの関連記事リスト がまだ使えないので、Google Feed API を利用して...」 と書いていたのですが、その投稿翌日には（2012/07/12～）仕様が変更されたようで、スマートフォン用テンプレートでも FC2ブログの関連記事リスト が使えるようになっていました。

(^_^;) という訳で、前回の方法ではなくてもOK になりましたので、FC2の変数を使う方法なども 一応紹介しておきます。 前回の方法と殆ど違いはないと思いますが、多少軽くはなるかも。。 好きな方を選んでご利用ください。

FC2ブログ 関連記事リストの設置方法 （スマートフォン版）

1.　スマートフォン用テンプレート の表示したい場所に ソースを追加

※「テンプレート変数」 を使う場合のみ追加。

個別記事ページ表示エリア（<!--permanent_area-->） の <!--topentry--> ～ <!--/topentry--> の間に入れておけばOKです。

【　続きを閉じる　】

※「テンプレート変数」 を使わない場合、関連記事リストの設定｜FC2ブログ公式マニュアル に載っているようなソースが 自動で追加されます。 表示場所を選べない上に、PCと同じ表示項目（日付の有無など）になるので、自由度は少し低くなると思います。

<!--relate_list_area-->
<div class="relate_dl">
<ul>
<!--relate_list-->
<li>
<!--relate_entry_other--><a href="<%topentry_relate_url>&amp;sp"><!--/relate_entry_other--><%topentry_relate_title><!--relate_entry_other--></a><!--/relate_entry_other--></li>
<!--/relate_list-->
</ul>
</div>
<!--/relate_list_area-->

リンクは　?no=記事番号　に張られます。 &amp;sp を追加しておくと　?no=記事番号&sp　になりますので、必要に応じて入れてみてください。不要なら削除してOK。 （デフォルトでは入っていませんが、私の共有テンプレートであれば 入れておいた方が自然かも。。）

変数の詳細 や これ以外の設定方法 については以下を参考に

• テンプレート用　変数一覧｜FC2ブログ公式マニュアル
• 関連記事リスト が 「変数」 でも出力可能に！

入れる位置のイメージ

スマホ用共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』
の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。

それ以外のテンプレートでも 似たような場所があるはずなので探してください。

<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<!--topentry-->
（中略）

<div id="entry_box">

（中略：記事内容など）

【 自動表示での表示場所 】

<div class="entry_category">
（カテゴリー名）
【 候補地 ：1 】
（コメント数・トラバ数）
</div>

</div><!--/class=entry_box-->

【 候補地 ：2 】

<!--/topentry-->
<!--▲▲個別記事ページ▲▲-->
<!--/permanent_area-->

2.　スマートフォン用テンプレート の CSS 一例

※「テンプレート変数」 を使う場合， 使わない場合 共通です。

特に何も設定しなくてもOKですが、共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』 の場合の設定例 を載せておきます。 以下のような項目が入っているので 緑文字部分のみを スタイルシートに追加してください。

/*================================
記事装飾 （削除可，自由に追加してください）
================================*/

.relate_dl,
blockquote {
margin: 20px 5px 20px 10px;
padding: 10px;
overflow: auto;
background: #f5f5f5;
font-size: 13px;
line-height: 1.3;
border-left: 4px solid #ccc;
}

もしくは ↓ こんな感じの設定でもいいかも。。 私のは大体こんな感じです。 一行分だけ表示して はみ出す部分は ... と省略されます。

実際のページ


.relate_dl ul {
margin: 0 !important;
}
.relate_dl ul li {
list-style: none;
margin: 10px;
padding-left: 19px;
background: url(リスト用の画像のパス) no-repeat left center;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}

関連記事

• スマートフォン用のテンプレートを公開しました！
• スマートフォン用テンプレートのプレビュー方法
• iPad，iPhone，Android，DS，Wii など 閲覧時の操作性対策を2つ

• FC2 スマホ用テンプレートに 関連記事リストを追加する方法　Google Feed API
• 関連記事リスト が 「変数」 でも出力可能に！ 　PC用テンプレート

PC用テンプレートでは 定番となった 関連記事リスト（多くは 同じカテゴリーの新着記事などを表示しているもの）、PC用では 管理画面の設定 や FC2の変数を使うことで簡単に利用できるようになりましたが、スマートフォン用テンプレートでは その機能がまだ使えません。

そのうち仕様が変わるかな という気がしなくもありませんが、先日 ユーザーさんから 「関連記事を表示できたら...」 と質問がありましたので、その方法を探して2つ試してみました。

追記 （2012/07/12） ：
関連記事リスト スマホ用でも動くように変わったようです(^_^;) そのうち.. は翌日でしたｗ

最終的に 「Google AJAX Feed API」 を利用して 同一カテゴリーの新着記事を表示する という方法がスッキリしましたので、紹介します。

リストに “表示中の記事” が含まれている場合には 区別できるようにもしてみました。 カテゴリーのRSSフィード と javascript を使っていますが、PC用で使う 関連記事リスト とほぼ同様に使えると思います。

関連記事リストの設置方法 （FC2ブログ スマートフォン版）

1.　スマートフォン用テンプレート の表示したい場所に ソースを追加

個別記事ページ表示エリア（<!--permanent_area-->） の <!--topentry--> ～ <!--/topentry--> の間に入れておけばOKです。

【　続きを閉じる　】

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var xmlUrl = "<%url>?xml&category=<%topentry_category_no>"; // feedのURL
var setNum = 7; // 表示件数
var setID = "feed"; // 表示させる箇所のID
google.load("feeds", "1");
function initialize() {
var html = '';
var feed = new google.feeds.Feed(xmlUrl);
feed.setNumEntries(setNum);
feed.load(function(result) {
if (!result.error){
var container = document.getElementById(setID);

for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var title = entry.title; // 記事タイトル取得
var link = entry.link; // 記事のリンクを取得
// 日付を取得し年月日を整形（使ってないので削除してOK）
// var publishedDate = entry.publishedDate;
// var pubDD = new Date(publishedDate);
// yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
// mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
// var pubDate = yy +'年'+ mm +'月'+ dd +'日';
// 表示する部分を整形
if(entry.link.match(/blog-entry-<%topentry_no>/)) {
html += '<li>' + title +'</li>';
}
else {
html += '<li><a href="' + link + '?sp">' + title +'</a></li>';
// ?sp はお好みで... PC からでもスマホ版で開きたい場合には 入れておく。
}

}
container.innerHTML = html;
}
});
}
google.setOnLoadCallback(initialize);
</script>


<div class="kanrenbox">このカテゴリーの新着記事
<ul id="feed">
<li>読み込み中</li>
</ul>
</div>

// でコメントアウトしている部分 はサンプルでは使っていないので、削除してOKです。 関連記事リストに 日付を追加したい場合などには それを利用してください。

記事数が少ない場合（50件以下など） や 記事番号が変則的になることの多い場合、この条件式 if(entry.link.match(/blog-entry-<%topentry_no>/)) では足りないかもしれませんが、その場合は blog-entry-<%topentry_no>.html まで追加しても良いかも。 ただ、テストした感じだと .html まで加えると何故か重くなってしまうようなので、デフォルトでは省略して書いてます。 取得できる日付データは 2012年7月7日 のような形式で FC2の 2012年07月07日 とは形式が異なるので、条件を追加するなら 記事タイトルくらいかも。。

入れる位置のイメージ

スマホ用共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』
の場合、このようなソースになっていますので、この範囲内に1ヶ所のみ追加すればOKです。

それ以外のテンプレートでも 似たような場所があるはずなので探してください。

<!--permanent_area-->
<!--▼▼個別記事ページ▼▼-->
<!--topentry-->
（中略）

<div id="entry_box">

（中略：記事内容など）

<div class="entry_category">
（カテゴリー名）
【 候補地 ：1 】
（コメント数・トラバ数）
</div>

</div><!--/class=entry_box-->

【 候補地 ：2 】

<!--/topentry-->
<!--▲▲個別記事ページ▲▲-->
<!--/permanent_area-->

2.　スマートフォン用テンプレート の CSS 一例

特に何も設定しなくてもOKですが、共有テンプレート 『sp_custom』 『sp_ari_custom』 『sp_pattern』 の場合の設定例 を載せておきます。 以下のような項目が入っているので 緑文字部分のみを スタイルシートに追加してください。

/*================================
記事装飾 （削除可，自由に追加してください）
================================*/

.kanrenbox,
blockquote {
margin: 20px 5px 20px 10px;
padding: 10px;
overflow: auto;
background: #f5f5f5;
font-size: 13px;
line-height: 1.3;
border-left: 4px solid #ccc;
}

もしくは ↓ こんな感じの設定でもいいかも。。 私のは大体こんな感じです。 一行分だけ表示して はみ出す部分は ... と省略されます。

実際のページ


.kanrenbox ul {
margin: 0 !important;
}
.kanrenbox ul li {
list-style: none;
margin: 10px;
padding-left: 19px;
background: url(リスト用の画像のパス) no-repeat left center;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}

3.　関連記事の表示件数設定 は RSS の件数以内で

各カテゴリーのRSSフィード 例えば → ./?xml&category=22　を利用して表示していますので、最大表示件数は 「RSSの設定」 で設定している表示件数以内なら指定可能です。

関連記事

• スマートフォン用のテンプレートを公開しました！
• スマートフォン用テンプレートのプレビュー方法
• iPad，iPhone，Android，DS，Wii など 閲覧時の操作性対策を2つ

• スマホ用テンプレートでも関連記事リストが使えるように！ New
• 関連記事リスト が 「変数」 でも出力可能に！ 　PC用テンプレート

• 共有テンプレート サポート専用窓口 （5） コメントNo.1434 ～ No.1443 辺り
  最初に試した方法などについても書いてます。