今回は更新情報を設置してみましょう。こちらで紹介するのは、ASP-Ranker!を使用した設置の方法です。同様の機能を持ったスマトレードもありますが、どちらかというならばASP-Rankerをオススメしておきます。こちらの方が機能が豊富でカスタマイズも手軽にできると思います。
まずは登録が済んでいないのでしたら、ASP-Rankerさんから登録して下さい。スマトレードと違って即日登録です。
そしてログインして下さい。また、初めての場合はよく説明などをお読みになり、いくつか設定を変更したりして、操作に慣れておいて下さい。
その前に、まずは機能設定(左メニューの更新情報欄の機能設定)でサイトに合わせた設定に変更しておいて下さい。ここで紹介するのは更新情報ページ1のみです。
また、登録サイトがなければ表示されませんので、できれば最低4サイト位はご自身で登録して下さい。登録の削除も後でできますので、最初は適当なサイト(ここでもいいですよ)を練習のつもりで登録しておいて下さい。(ランキング欄の相互リンクの追加から登録できます。)
最重要:標準では更新情報機能がオフになっています。左メニューその他の登録情報の更新をクリックして、更新情報配信機能を「使用する」に変更してください。非常にわかりにくい設定及び場所なので、気をつけて下さい。
次に項目設定を変更します。サムネイルをクリックするとフルサイズ画像が表示されますので、この通りの設定に変更して下さい。この設定でテンプレートを作成していますので、項目が異なると表示も異なります。
必須項目が、サムネイル(サイズは60x60)、女優名/タイトル、内容となります。文字数制限もテンプレートに合わせてあります。
左メニューからレイアウト設定をクリックすると、最初に表示されるのは、レイアウト1のテンプレート設定になります。レイアウト2はこちらでは紹介しません。
テンプレートはこの画面で入力しますが、まずはこのテンプレート用のスタイルシートが必要になります。既に作成してありますので、まずはこのスタイルシートをダウンロードしてください。
ASP-Ranker用スタイルシート
ダウンロードしたら、そのままお使いのブログ上でアップロードして下さい。DTI、FC2共にスタイルシートやHTMLファイルはアップロードして利用できます。
アップロードができたら、次はテンプレートを変更します。
更新情報のテンプレートはヘッダ、ボディー、フッターの3つに分かれています。それぞれ間違いないようにペーストしてください。下にそれぞれのテンプレートを紹介しますので、コピペでお願いします。
<link href="アップロードしたcssファイルのアドレス" rel="stylesheet" type="text/css">
<base target="_blank">
<body>
<table class="boxtable" width="872">
#4#<tr>#
<td>
<table class="asptable" width="218">
<tr>
<td class="asptext3" width="65">
#date4#
</td>
<td width="153">
<a href="#url#" target=_blank>#name#</a>
</td>
</tr>
<tr>
<td width="65" rowspan="2">
<a href="#url#"><img src="#FLD1#" width="60" height="60" alt="banner"></a>
</td>
<td>
<span class="asptitle">#FLD6#</span>
</td>
</tr>
<tr>
<td class="asptext">
#FLD7#
</td>
</tr>
</table>
</td>
#4#</tr>#
</table>
以上をまずは正確に貼り付けて下さい。次は変更部分とプレビューで確認です。
まずはスタイルシート部分を変更して下さい。ヘッダー部分に赤字でアップロードしたcssファイルのアドレスと書かれている部分を削除して、そこに先ほどアップロードしたcssファイルのアドレスをペーストして下さい。これを間違うと表示がおかしくなりますので、正確にお願いします。
次にプレビューではなくて、フッター部分下にある変更を反映させるボタンを押して、変更を保存して下さい。プレビューはその後です。
次はプレビューして確認しましょう。サムネイルをクリックすると成功例が見れます。ちなみに4列表示なので、4サイト未満の登録だとレイアウトがずれます。4以上登録があればちゃんと表示されますので、その部分は気にしないで下さい。それ以外で画像と異なる部分(もちろん登録情報と画像は除きます)があれば、ペーストに問題がないか確認して下さい。
表示に問題がなければテンプレートの編集は成功です。次はブログのテンプレートに更新情報を貼り付けます。
ブログのテンプレートを変更して、先ほどの更新情報を貼り付けます。更新情報のアドレスは、左メニュー更新情報欄のトップをクリックすれば表示されます。こちらの更新情報ページ1のアドレスになります。まずはブログのテンプレートを変更しましょう。
ブログのテンプレート編集画面に移動して下さい。HTML部分をCtrl+Aなどで全文選択し、テキストエディタに貼り付けて下さい。編集はテキストエディタを利用しましょう。また、最初に貼り付けたテキスト(HTML)を保存しておくことを強くすすめます。そうしないと大きな間違いをしてしまった場合に元に戻れなくなります。バックアップは基本ですから、必ず行ってください。
テンプレート上に更新情報エリアがありますから、すこし修正して先ほどのアドレスを貼り付ければ完成です。難しくはありません。
下記の部分が編集するHTML箇所です。
<!-- サイト更新開始 -->
<!-- 使用しない場合はここから下を削除↓ -->
<div id="kousin">
<div id="k-title">
オススメサイト更新情報
</div><!-- k-title -->
<div class="kousincontent"><!-- ここから下に挿入↓ -->
このエリアに提携サイトの更新情報が入ります。<br />
スマトレード、ASP-Rankerなどのファイルを指定するか、インラインフレームで読み込んで下さい。<br />
このエリアを使用しない場合は、サイト更新の部分を削除してください。
</div><!-- kousincontent --><!-- ここから上に挿入↑ -->
<!-- インラインフレームを使用する場合、以下を参考に。サイズは変更可能。 -->
<!-- kousincontentの部分を削除して、k-titleの下に挿入してください -->
<!-- heightで高さが決まります。お好きなサイズに調整してください -->
<!--
<iframe src="アップした(指定された)htmlファイルのアドレス" width="100%" height="400" frameborder="0" scrolling="yes"></iframe>
-->
</div><!-- kousin -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- サイト更新終了 -->
説明文付きですが、下に変更したテンプレートを紹介しますので、わからなければそちらをそのまま全文貼り替えて下さい。(もちろんサイト更新部分のみの全文です)
<!-- サイト更新開始 -->
<!-- 使用しない場合はここから下を削除↓ -->
<div id="kousin">
<div id="k-title">
オススメサイト更新情報
</div><!-- k-title -->
<div class="kousincontent"><!-- ここから下に挿入↓ -->
<iframe src="指定されたURL" width="100%" height="400" frameborder="0" scrolling="yes"></iframe>
</div><!-- kousincontent --><!-- ここから上に挿入↑ -->
</div><!-- kousin -->
<!-- 使用しない場合はここから上を削除↑ -->
<!-- サイト更新終了 -->
コメントは外しました。インラインフレーム部分を挿入部分に貼り付ければいいんですが、少し説明がわかりにくいかも。
これを使用すれば大丈夫ですが、赤部分のアップした(指定された)htmlファイルのアドレスに、先ほどの更新情報ページのアドレスを貼り付けて下さい。
そして、青部分の400がインラインフレームの縦のサイズです。更新サイトの数やアクセス数の調整などによってサイズは調整してください。単純に大きくすればサイズが大きくなります。
修正部分を書き換えたら、修正したテンプレートをブログの編集画面で貼り付けて、プレビューで確認してください。画像は標準テンプレートから更新情報の部分だけ変更した画面です。このようになっていなければ、何か問題がありますので、もう一度各作業を確認してみて下さい。
以上で更新情報の設定は完了です。説明のほとんどがASP-Rankerに関することでもわかるように、ブログテンプレートの変更はほとんど必要ありません。通常のテンプレートで同じことをする場合、まずはボックス自体を設置する必要があります。このテンプレートならこれだけで済みます。
こちらの更新情報のテンプレートですが、このブログテンプレートをお使いの方でしたらそのままお使いいただけます。また、この更新情報のテンプレートだけ使いたい方もいるかと思いますが、自由にお使い下さい。できましたら、このページへのリンクをお願いいたします。リンク場所は問いませんし、リンクは任意で結構です。
次はランキングです。「6.ランキングの登録と貼り付け」ASP-Ranker ランキング編へどうぞ。
 |
|
秘密のコメント
ブログ管理人への秘密コメントです