ブログ/ホームページに設置するには

各ブログへの設置方法

管理人が調べた限りなので、解説の無いところはごめんなさい。
↓ブログ名をクリックすると、ブログパーツ設置方法の解説へ飛びます。

プロフィール欄には、設置できない場合があります。
詳しくは『ブログのプロフィール欄に貼り付ける場合』をご覧ください。

設置できないブログ

以下のブログでは設置できません!

  • Exciteブログ
  • cururu
  • gooブログ/gooブログアドバンス
    (※)当サイトのパーツは、gooブログパーツへの変換はできません。
  • はてなダイアリー
  • フルーツブログ
  • Yahoo!ブログ
  • 楽天ブログ

ここに載っていないブログの場合、一般的な設置方法

PAGE TOP▲

ブログへの一般的な設置方法

設置方法がわからないときは、まずはご自分で使っているブログサービスで「ブログパーツ」についての説明がないか、探してみましょう。

ブログサービスのトップページ(「新着記事」とか「登録する」などのあるページ)をよく見ると、画面の上の方や左右のメニューに「HELP」とか、「FAQ」「ヘルプ」「よくある質問」「使い方」「ガイド」「カスタマイズ」など、呼び方は色々ですが、ブログの使い方をまとめたページがあるはずです。
そこで「ブログパーツ」関連の記事を探してみましょう。

もしかしたら、「ブログパーツ」という言葉ではなく、「JavaScript」「ブログペット」「ティッカー」という言葉で書かれているかも知れません。
公式ページになくても、yahooやgoogleで「△△△(←ブログサービス名) ブログパーツ」と検索することで、やり方を書いた誰かの記事が見つかるかもしれません。


方法が見つからなかったり、判断がつかない場合は、次の手順を参考にしてみてください。(実際の手順や用語はブログサービスによってまちまちです)

  1. ブログの管理画面から、サイドバー(カレンダーや最近の記事のタイトルが表示されるところ)の編集画面を開きます。
  2. サイドバーに、「フリーエリア」「自由項目」など、HTMLタグが使用できる項目を追加します。
  3. 追加した「フリーエリア」等の編集画面に、コピーしたスクリプトのソースコードを貼り付けます。
  4. 位置や、表示するしないの設定を行います。
  5. 保存、必要なら再構築します。

  • フリーエリアなどのHTMLを記入できるスペースが設定されていないブログでも、テンプレートのHTMLを編集できるなら、ソースコードをHTMLに直接記入することで使用できます。
  • HTMLが使用できるスペースであっても、改行を反映する(または自動改行される)場所では使用できません。(プロフィール専用入力欄など)
  • 字数制限のある場合、オーバーすると表示されません。

設置できる条件

次の条件を満たすブログで使用できます。

  1. ブログパーツ用の入力欄(フリーエリア、フリープラグイン、自由項目など)があり、<script>タグが使用できること。
    入力欄には複数の行を入力できて、自動改行されない(改行を反映しない)こと。
  2. または、テンプレートHTMLを編集できること。

テスト用ソース

スクリプトが設置可能かどうか、簡易的にテストできます。
下のソースをコピーしたら、設置したい場所に貼り付け、ブログを表示してみます。
★テスト設置★」とだけ表示されるなら、設置できます。
何も表示されない、または貼り付けたソースがそのまま表示されるときは、そこには設置できません。

  • ブログのプロフィール欄などで、自動改行される(改行が反映される)場所では動作いたしません。
    (入力欄に設定があれば、「自動改行しない(改行を反映しない)」にしてください。)
    >>■ブログのプロフィール欄に貼り付ける場合
  • このテストで成功しても、文字数制限のあるブログではスクリプトが表示できないことがあります。
PAGE TOP▲

●アセラブログ

  1. 「デザイン」-「コンテンツ」を開き、種類「自由形式」選択、コンテンツの追加をクリック。
  2. 「自由形式」というタイトルのコンテンツが作成されるので、タイトルをクリックして、「自由形式の設定画面」を開く。
  3. タイトルはブログには表示されないが、内容がわかるように適当に入力。
  4. 「自由入力欄」に下記のタグをコピペする。
    <div class="sidetitle">★タイトル★</div>
    <div class="side">
    ★ここにスクリプトのソースコードを貼る★
    </div>
    ★タイトル★--ここをブログに表示するタイトルに書き換えます。
    ★ここにスクリプトのソースコードを貼る★--この文字を削除してコピーしたソースコードを貼り付けます。
  5. 「保存」をクリック。
  6. 表示するページを選択。表示位置を選択。並び順を設定。
  7. 再構築で表示するページを選び、クリック。
PAGE TOP▲

●アメブロ

【設置方法の解説サイト】
■アメーバヘルプ「フリープラグインの設定方法」
http://helps.ameba.jp/2007/08/post_161.html

  1. 記事作成・編集画面で、「サイドバーの設定」を開く。
  2. 「プラグインの追加」をクリックして、「フリープラグイン」を選択する。
    (既にサイドバーにフリープラグインが追加されている場合は、この手順は飛ばして次へ)
  3. 「サイドバーの基本設定」で「フリープラグイン」の「設定」をクリック
  4. フリープラグイン編集画面が開くので、スクリプトのソースコードを貼り付け、「設定」をクリック。
  5. 「サイドバーの配置」で、「フリープラグイン」を「使用する機能」へ配置し、「保存」する。
  • 「フリースペース」では使用できませんので、お間違えのないように!
  • 「フリープラグイン」は半角3800文字までの文字数制限があります。
    「いくつになったの」は約2700文字(設定・人数によって多少増えます)です。
  • 「結婚記念日カウントダウン」はそのままだと文字数をオーバーしますので、削除禁止以外の説明コメントを削除してお使いください。
    削除できるのは/*〜*/など、下記のような部分です。
    //*****************************************
    /* ■位置・フォントの設定■ */
    /* 文字揃え(left、center、right)*/
    /* 基本の文字サイズ(%,em,px,ptなど) */
    //---------------------------------------
    <!-- 結婚記念日スクリプト -->
    <!-- 共通設定 -->
    <!-- 共通設定おわり -->
    <!-- 個別設定 -->
    
PAGE TOP▲

●ウェブリブログ

  1. 「ブログ」-「設定」-「表示項目設定」-「フリースペース(またはフリースペース2、3)」の編集ボタンをクリック
  2. コピーしたスクリプトをフリースペース編集欄に貼り付ける
  3. タイトルを付ける場合、スクリプトの上に次のタグをコピーして貼り付ける。
    <h2>いくつになったの</h2>
    (「いくつになったの」の文字は適当に書き換えてください)
  4. 設定ボタンをクリック
  5. 「表示項目設定」で、「フリースペース(または2、3)」の表示場所をチェック、コンポーネント位置設定を設定して「設定」ボタンをクリックして終了
PAGE TOP▲

●FC2ブログ

FC2ブログでは下記の設置方法があります。

  1. 共有プラグインから追加する。
  2. 公式プラグインの「フリーエリア」に貼り付ける。
  3. 公式プラグインの「プロフィール」に貼り付ける。
  4. テンプレートHTMLに挿入する(プラグイン非対応テンプレートの場合)

1.共有プラグインから追加する

「共有プラグイン」から追加できるのは、下記の3つです。簡単な設定と1クリックで設置できます。表示サンプルはこちら>>KT*info

  • 「いくつになったの」…年齢&誕生日カウンタ
  • 「Wedding Anniversary」…結婚記念日カウンタ
  • 「My baby comes」…妊娠・出産カウンタ
「いくつになったの」FC2共有プラグイン版とEC版との違い
「いくつになったのFC2版」は、設置が非常に簡単なのですが、共有プラグインのシステム上、初期設定できるのが「一人分の名前、生年月日、色」だけです。人数を増やす、フォントサイズを変える、カウントダウン日数を設定するなどは、スクリプトを「HTML編集」で手直ししないといけません。
「いくつになったのEC」は、人数の追加、その他の設定を最初に画面上から入力できるため、後からスクリプトを手直しせずに済みます。

一人分だけ表示するなら共有プラグインで。
ひとつの枠に二人以上表示するなら、ECをコピーして、フリーエリアに貼りつける方法をオススメします。
※ただしコメントの表示欄は、FC2プラグイン版だけの仕様で、ECにはまだありません。

  1. プラグイン対応テンプレートを使用し、プラグイン機能をオンにしてください。
  2. 管理画面から[環境設定]-[プラグインの設定]を開きます。
  3. プラグイン[共有]をクリックします。
  4. プラグインサーチの「キーワード」に、設置したいプラグイン名を入力してください。(例:いくつになったの)
  5. 目当てのプラグインが表示されたら、説明をよくお読みの上、ダウンロード項目にお名前・生年月日・色コードを記入し、ダウンロードすれば完了です。
    (生年月日を入力するときの間違いが多いです!
    区切り記号は半角の「,」(カンマ、「ね」のキー)です。
    「.」(ピリオド、ドット、「る」のキー)を使わないでくださいね!)

カスタマイズの方法は、こちらのサイトで配布しているものと少し違いますので、詳しくは>>KT*infoをご参照ください。

2.フリーエリアに貼り付ける

  1. プラグイン対応テンプレートを使用し、プラグイン機能を「有効」にしてください。
  2. 管理画面で[環境設定]メニューから[プラグインの設定]を開きます。
  3. 画面上部のPC用[公式プラグイン追加]をクリックします。
  4. 拡張プラグイン「フリーエリア」の「追加」をクリックします。
  5. 再び左メニュー[環境設定]-[プラグインの設定]を開きます。
  6. 追加したフリーエリアの「詳細」をクリックします。
  7. 「フリーエリアの編集」画面が開くので、「タイトル」にブログパーツ名などを記入します。
    「フリーエリア内容の変更」欄に、コピーしたブログパーツのソースコードを貼り付けて「変更」をクリックします。
  8. 左メニュー「ブログの確認」で表示を確認してください。

※スクリプト作成時に設定した文字の横位置の方が優先しますので、「コンテンツの文字設定」の右寄せ・中央寄せ・左寄せは効きません。

3.プロフィールに貼り付ける

  1. プラグイン対応テンプレートを使用し、プラグイン機能を「有効」にしてください。
  2. 管理画面で左メニューの[環境設定]から[プラグインの設定]を開きます。
  3. プラグインの一覧から、「プロフィール」の「詳細」をクリックします。
  4. 「プロフィールの編集」画面が表示されるので、「プラグインの改造」の【HTMLの編集】をクリックします。
  5. <!--myimage-->
    <p class="plugin-myimage" &align>
    <img src="<%image>" alt="<%author_name>">
    </p>
    <!--/myimage-->
    <p &ialign>
    Author:<%author_name><br>
    <%introduction2>
    </p>
    と表示されるので、その下に続けて、コピーしたブログパーツのソースコードを貼り付け、「変更」をクリックします。
  6. 左メニュー「ブログの確認」で表示を確認してください。

4.プラグイン非対応テンプレートの場合

プラグインに対応していないテンプレートで使用する場合は、テンプレートのHTMLに直接貼り付けてください。ここでは、プロフィール欄に表示する方法を説明します。

  1. ブログ管理画面の左メニュー「テンプレートの設定」をクリック。
  2. 使用するテンプレートの「複製」をクリックして、コピーをとっておく。(編集が失敗したときの保険です)
  3. 使用するテンプレートの「HTML CSS」-「編集」をクリック。
  4. 画面の下に「○○○(テンプレート名)のHTML編集」という欄が開きます。 HTMLの内容はテンプレートによって違うのですが、次のようなタグがある部分がプロフィール欄です。
    <img src="<%image>" alt="<%author_name>">⇒プロフィール画像のタグ <%author_name>⇒ブログオーナーの名前を表示するタグ
    <%introduction2>⇒プロフィール紹介文を表示するタグ
  5. プロフィール紹介文の下に表示する場合は、だいたい下記のような場所に貼り付けます。
    <div class="aaa">Profile</div>
    <div class="bbb">
    <div align="center"><img src="<%image>" alt="<%author_name>" /></div>
    Author:<%author_name><br />
    <%introduction2><br />
    ★この辺り
    <a href="<%url>?admin">管理者ページ</a><br />
    <a href="<%url>?xml">RSS</a>
    </div>
    リスト形式の場合は、このような感じ。
    <div class="aaa">
    <div class="bbb">Profile</div>
    <div class="ccc">
    <div align="center"><img src="<%image>" alt="<%author_name>" /></div>
    <ul>
    <li>Author : <%author_name></li>
    <li><%introduction2></li>
    <li>★この辺り</li>
    <li><a href="<%url>?xml">RSS</a></li>
    </ul>
    </div>
    </div>

    <p>〜</p>の間にはできるだけ貼り付けないようにしてください。
    (スクリプトはdivで出力されるので、pの下にはHTMLのルール上入れることができません)
  6. テンプレートの「プレビュー」ボタンを押して、ちゃんと表示されていたら「更新」をクリック。

※別のテンプレートに変更したら、そのテンプレートに対しても同様に設定する必要があります。

PAGE TOP▲

●AutoPage (teacupブログ)

  1. 管理パネルを開き、「デザインの変更」タブをクリック、更に「サイドメニュー表示設定」をクリックします。
  2. 「自由項目(1〜3)」からひとつ選び、「表示」にチェックを入れ、表示タイトルを変更し、「設定する」をクリックします。
  3. 選んだ自由項目の「詳細設定」をクリックします。
  4. 入力欄にスクリプトを貼り付け、「プレビューと設定」をクリックします。
  5. このときのプレビュー画面には表示されない場合もありますが気にせず「設定する」をクリックします。
  6. 『「サイドメニューの表示設定」に戻る』をクリックします。
  7. スクリプトを貼り付けた自由項目の「表示」にチェックが入っていることを確認し、「プレビューと設定」で表示されていることを確認します。
  8. 「サイドメニューの並べ替え」タブをクリックし、表示する位置を決めます。
PAGE TOP▲

●ココログ

【設置方法の解説サイト】
■ココログサポート>FAQ:ブログパーツを貼るにはどうすればいいの?
http://support.cocolog-nifty.com/howto/2006/03/faq_c8f5_1.html

マイリストのメモではなくリンクリストに貼る場合は下記のようにしてください。

  1. マイリストで[リンクリスト]を作成する。
  2. サイドバーに表示するかプロフィールページに表示するか選ぶ(後で変更可能)
  3. 項目の追加で[メモ欄]にソースを貼り付ける。タイトル・URLは空欄にする。
  4. 作成したリンクリストの詳細設定で[テキスト表示]にチェックを入れる。
  5. コンテンツを並べ替える。
PAGE TOP▲

●シーサーブログ(Seesaa)

【設置方法の解説サイト】
■「Seesaaブログ:ブログパーツ」
http://blog.seesaa.jp/contents/blogparts/

スクリプトのソースコードをコピーしたら、上記ページの「タグの貼り付け方」で、手順の2.以下と同じ手順で設置してください。(IDは不要)

PAGE TOP▲

●ジュゲム(JUGEM)

  1. 管理者ページで、左メニューの「フリースペースの編集」をクリックします。
  2. 「フリースペースの編集:フリースペースのリスト」で、「編集」の筆アイコンをクリックします。
  3. 「タイトル」の部分に、ブログパーツのタイトルを入力します。
  4. 「内容」の入力欄に、コピーしたブログパーツのソースコードを貼り付けます。
  5. 「状態」で「公開」を選択し、「編集内容を保存する」をクリックします。
  6. 「ブログを確認する」をクリックして、表示を確認してください。

※古いテンプレートでフリースペース機能が対応していない場合は、状態を「公開」にしても表示されないので、テンプレートをダウンロードしなおす必要があるようです。

【参照リンク】
■「マニュアル:フリースペースの使い方」
http://jugem.jp/manual/manual.php?mode=b09

PAGE TOP▲

●ソネットブログ(So-net blog)

【詳しい方法の解説サイト】
■So-net blog の使い方:カスタムペイン
http://blog-help.blog.so-net.ne.jp/custompane

【参照リンク】
■カスタムペインを設定後、ブログが表示されません(レイアウトがおかしい)
http://blog.so-net.ne.jp/faq/705

PAGE TOP▲

●忍者ブログ

まず、ブログにプラグイン「フリーエリア」を追加します。

  1. 管理ページ-「環境設定」メニューの「プラグインの設定」をクリック。
  2. 「プラグインの追加」をクリック。
  3. 「フリーエリア」の欄で、タイトル(貼り付けるスクリプトの名前など)と、プラグインカテゴリー(表示する位置)を設定し、「追加」をクリックする。

そうして追加した「フリーエリア」にスクリプト(またはブログパーツ)を貼り付けます。

  1. 管理ページ-「環境設定」メニューの「プラグインの設定」をクリック。
  2. 追加した「フリーエリア」の右側にある「HTML編集」をクリック。
  3. プラグインHTML欄の編集欄が開くので、コピーしたブログパーツのソースコードを貼り付け、「変更」をクリック。

※フリーエリアの容量は1箇所あたり10KBまでです。既存のフリーエリアに貼り付けてオーバーしてしまう場合は、新規にフリーエリアを追加してそちらに貼り付けてください。「いくつになったの」は1つ(ひとり分ではなく、1セットで)約3KBです。

【参照リンク】
■フリーエリアの追加
http://www.ninja.co.jp/manual/blog/manual056.html
■既存のプラグインのHTMLを編集する
http://www.ninja.co.jp/help/blog/admin/admin013.html
■忍者ブログ 質問掲示板「プラグインのフリーエリアに関して」
http://csbbs.ninja.co.jp/Thread_View/2844/

PAGE TOP▲

●プチモールブログ(PetitMall)

ブログパーツ編集機能を使う

  1. 古いテンプレートだと「ブログパーツ編集」が使えないため、ユーザー管理画面「ブログデザイン設定」ページで、「デザインテンプレートを追加」をクリックし、テンプレートをダウンロードしなおします。
  2. ユーザー管理画面「ブログデザイン設定」-「ブログパーツ編集」-「新しいブログパーツを追加する」をクリック
  3. ブログパーツ名とスクリプトのソースコードを入力して「追加する」をクリック

 「プロフィール編集」の「自己紹介」欄へ貼り付けてもスクリプトは表示されません。

【参照リンク】
プチモールブログ-使い方一覧[ブログ機能]-ブログパーツ編集 
http://www.petitmall.jp/howto_admin_blog.html#blogparts

今使っているテンプレートをブログパーツ編集できるように修正する

【詳しい方法の解説サイト】
■プチモールお知らせブログ
http://staff.blog1.petitmall.jp/blog-entry-182.html

テンプレートに直接挿入する場合

  1. 管理画面の 【ブログデザインの設定】で、使用中のテンプレートの【編集】をクリックするとHTML編集欄がでてきます。
  2. HTML中で、下記のような部分を探します。
    ★〜★の部分に「いくつになったの」などのスクリプトを貼り付けてください。
    <!-- プロフィール部分ここから -->
    <h2 class="appendix">Profile</h2>
    <div class="right_back">
    <p class="author-image" align="※※※"><img src="※※※" width="100"
    alt="※※※"></p>
    <!-- 画像の大きさに合わせてextra-columnの幅以下で調整して下さい -->
    <p class="author-name">※※※</p>
    ★この辺にスクリプトを貼り付けてください★
    <p class="author-description">※※※</p>
    </div>
    <div class="under2"> </div>
    <!-- プロフィール部分ここまで -->
    実際のテンプレートでは上記と違う部分があるかと思いますが、推量で貼り付けてみてください。
    <p class="author-name">※※※</p>
    というのが、ブログオーナーの名前が表示される部分で、
    <p class="author-description">※※※</p>
    というのが、プロフィール編集に書き込んだ内容が表示される部分です。

    または、「ブログパーツ用スペース」という場所に貼り付けてもOKです。
    <!-- ブログパーツ用スペースここから いらない場合はここから -->
    <h2 class="others">ブログパーツの名前</h2>
    <div align="center">
    ブログパーツ用に作りました。ここにブログパーツのタグを入れて、この文章は削除してください。
    </div>
    <!-- ブログパーツ用スペースここまで いらない場合はここまで削除して下さい。 -->
    「ブログパーツの名前」を書き換えて、 「ブログパーツ用に作りました…」を削除し、スクリプトを貼り付けます。
  3. 保存して終了です。

【参照リンク】
■プチモテンプレート日誌>ブログパーツスペースについて
http://temp.blog1.petitmall.jp/blog-entry-21.html

PAGE TOP▲

●269g

[コンテンツ]に[自由形式]を追加して、「自由入力欄」にコピーしたソースコードを貼り付け、再構築してください。詳しくは下記参照リンクをご覧ください。

【参照リンク】
■サイドバーに、BBS・おみくじ・ブログペット・アクセス解析など他社サービスを設置したいhttp://help.269g.net/article/53219.html
■自由形式で追加した箇所のデザインについて
http://help.269g.net/article/2183570.html

PAGE TOP▲

●ブログ人

【設置方法の解説サイト】
■ブログ人の使い方 06サイドバーを活用しよう:ブログを私リストで飾る
http://blog.ocn.ne.jp/manual/06/005.html

↓上記ページの内容のほぼ引用

  1. 「私リスト」タブをクリックし、 「新しい私リストを作る」を開きます。
  2. 「1 リストのタイプ」で「メモ」を選び、「2 リストの名前」に好きな名前を入力したら、下の「リストを作成」ボタンをクリックします。
  3. 「新しい項目を追加」画面で、 「備考」(または「注意」)欄に、コピーしたスクリプトのソースコードを貼りつけ、「保存して更新」をクリック。
  4. 「ブログ」の「デザイン」で、「表示項目を選択」を開きます。
  5. 「私リスト」一覧から、今作った「メモ」のリストにチェックを入れて「変更を保存」をクリック。
  6. 「デザイン」の「並び方を変更」で表示する位置を決めます。

●ブロックブログ(BLOCKBLOG)

一応設置できる方に書きましたが、当サイトのブログパーツの場合、ファイルアップロードができる環境でないとブロックブログには設置できません。

「ファイルアップロード」は、BLOCKBLOGの有料サービスでもありますが、ファイルを外部呼出しすることが可能なホームページスペースをお持ちになっていればそちらでも構いません。(←しかしそのようなところはたいてい有料だったりします…)

もしファイルアップロードできる状況であれば、

  1. テキストエディタ(メモ帳など)でソースコードを編集する。
  2. 拡張子を.jsの形式で保存し、アップロードする。
  3. アップロードしたファイルのURLを、どこのもブロックに書き込む。

という手順になります。詳しくは、ユーザーサポートBBS(記事No.1762)で親切に解説してくださっています。(ありがとうございます!)ただしバージョンが変わったため、記事No.1765の説明に補足しておきます。

  1. いくつになったの のスクリプトを作成後、右クリック→コピーしたら、メモ帳(テキストエディタ)に貼り付ける。
  2. この手順は飛ばします。
  3. コメント化する(半角スラッシュを2個付ける)のは、次の箇所です。
    <!-- ▼いくつになったの --> <script type="text/javascript"> <!-- </script> <!--リンク表示(削除しないでくださいね)--> <!-- ▲いくつになったの -->
  4. 後の手順は同じです。

【参照リンク】
■ブロックブログ ユーザーサポートBBS(記事No.1762)
http://www.blockblog.jp/cgi/wforum.cgi?mode=allread&no=1762

PAGE TOP▲

●ヤプログ

【サイドバーに設置する場合】

  1. 管理画面の[サイドバー]-[機能編集・追加]で[新規追加]をクリック
  2. [HTML]欄に、コピーしたブログパーツのソースコードを貼り付け、タイトルを付けて[保存]
  3. [機能選択・並び替え]で表示にします。

【プロフィール欄に設置する場合】

管理画面から「プロフィール編集」-「その他」欄にスクリプトを貼り付け、欄の上の『HTMLで記述する』にチェックを入れてください。

PAGE TOP▲

●livedoorブログ

上級者向けプラグインのフリーエリアに貼り付けます(改行設定「変換しない」)。
プロフィール欄には設置できません。

  1. 管理画面-「カスタマイズ/管理」-プラグインの設定/新規追加の「新規追加」-「上級者向けプラグイン」-フリーエリアを「追加する」
  2. 入力欄にスクリプトを貼り付ける-改行設定「変換しない」-「この内容で設定する」
  3. 「プラグインの設定」-タイトルを入力、順番設定など-「順序・タイトルを変更する」-「再構築」

【参照リンク】
■ブログトップ > ヘルプトップ > ガイド > ブログの設定/管理>プラグインを新規追加する
http://helpguide.livedoor.com/help/blog/guide/grp103/guide242

PAGE TOP▲

●ラヴログ [ LOVELOG ] (DION)

  1. 管理画面の「サイドバー」をクリック、「新しいプラグインの追加」から「フリーエリア」を選択して「プラグインの追加」をクリックします。
  2. 「フリーエリアの設定」画面が表示されたら、タイトル(ブログパーツ名など)を入力します。「自由項目欄」にブログパーツのソースコードを貼り付けます。
  3. 「変換しない」を選択して「保存」をクリック。
  4. ブログを再構築します。

もうひとつ方法があります。(上で上手く行かなかったらこちらを試してみるといいかもしれません)

  1. 管理画面の「サイドバー」をクリック、「新しいプラグインの追加」から「フリーエリア」を選択して「プラグインの追加」をクリックします。
  2. 「フリーエリアの設定」画面が表示されたら、タイトル(ブログパーツ名など)を入力します。
    (ココまでは上の方法と同じ)
  3. 「プラグインHTML編集」をクリック。
  4. 下記のようなコードが表示されるので、★1または★2に、コピーしたブログパーツのソースコードを貼り付けてください。(★1★2は位置がわかりやすいように記入したもので、実際は表示されていません)
    <div class="sidetitle"><% content.title %></div>
    <div class="side">
    ★1
    <% content.header -%>
    <% if:convert_breaks %>
    <% content.free.text | nl2br %>
    <% else -%>
    <% content.free.text %>
    <% /if -%>
    <% content.footer -%>
    ★2
    </div>

    ★1に貼り付けると、挿入テキスト(上部)の上に表示される(…と思います)
    ★2に貼り付けると、挿入テキスト(下部)の下に表示される(以下同文)
    下の参照リンクの「Google検索窓をつける」では、★1〜★2までを全部削除し、代わりにGoogle検索のソースコードを貼りつけているようです。

  5. ブログパーツのソースコードを貼り付けたら「保存」をクリックし「再構築」します。

私はLOVELOGは利用できないので、上記は検索した結果をまとめたものです。
公式情報が少ないので、違う所があったらごめんなさい。ご指摘お願いします。

【補足】HTML編集で表示されるコードの意味(多分)

<div class="sidetitle"><% content.title %></div>
:ここにフリーエリアのタイトルを表示する
<div class="side">
<% content.header -%>
:ここに挿入テキスト(上部)を表示する
<% if:convert_breaks %>
:「改行を変換する」が選択されているとき、【A】に分岐する
<% content.free.text | nl2br %>
:【A】自由項目の中身の行末を改行タグ<br />に変換してここに表示する
<% else -%>
:「改行を変換しない」が選択されているとき、【B】に分岐する
<% content.free.text %>
:【B】自由項目の中身をそのままここに表示する
<% /if -%>
:分岐終わり
<% content.footer -%>
:ここに挿入テキスト(下部)を表示する
</div>

【参照リンク】
■トラブル雑記帳:アフィリエイトプログラムの登録方法について
http://blogs.dion.ne.jp/aceproject/archives/368670.html
■はじめようブログ/ラヴログをカスタマイズしよう「Google検索窓をつける」
http://www.auone-net.jp/netguide/feature/020/cust018/01801.html
■LOVELOG ヘルプ
http://www.auone-net.jp/lovelog/help/index.html

PAGE TOP▲

文字数制限のある場合(アメブロ・So-netブログ)

プラグイン容量に制限があるブログでは、容量をオーバーして使用できない場合があります。
配布スクリプトでは、「結婚記念日カウントダウン」「いくつになったの」のサイズが特に大きいのでご注意ください<(_ _)>

アメブロ
「フリープラグイン」に設置できますが、半角3800文字までの文字数制限があります。
「いくつになったの」は約2700文字です(設定・人数によって多少増)。
「結婚記念日カウントダウン」は3800文字をオーバーしますので、削除禁止とされている以外の説明コメント(/*から*/までと、//の付いている行)を削除してお使いください。
So-netブログ
「カスタムペイン」1箇所につき、半角2000文字までの文字数制限があります。
2008/2/27のリニューアル後に制限が大幅緩和されたようです。「いくつになったの」「結婚記念日カウントダウン」等の長いスクリプトでも気兼ねなくお使いいただけるようになりました。
PAGE TOP▲

ブログのプロフィール欄に貼り付ける場合

ブログのプロフィール専用欄に貼り付けると表示されない場合があります。
自動改行(行末に自動的に改行タグを挿入する)という機能が働き、スクリプトのソースコード内にもタグを書き込んでしまうためです。

プロフィール入力欄に設定があれば、

  • 「自動改行」しない。
  • 改行を改行タグ<BR>(または<BR />)に変換しない。
  • 改行を反映しない
などを選択してください。
その場合、スクリプト以外の文字は改行されなくなるので、行末に自分で <br />(改行タグ)を書き入れてください。

上記のような設定が無い場合、プロフィール欄以外に(フリーエリア、ブログパーツ欄などに)貼り付けてください。

テンプレートのHTMLが編集可能なブログの場合、HTMLに直接貼り付けることで表示できます。(別のテンプレートに変更したら、また貼り付け直す必要があります。)

PAGE TOP▲

ホームページに設置する場合

<body>〜</body>の設置したい場所に貼り付けてください。
ホームページビルダーでの設置方法はこちら。

スクリプトはボックス(divタグ)で出力されます。
ボックス幅や高さの指定がないので、幅100%で表示されます。
必要に応じ、幅などを設定した別のブロック要素の中に入れるなどしてください。(divとかtableとか)


divタグ、幅200px、ボーダー破線の例

あお711ヶ月11日♪
8歳の誕生日まで20
*script by KT*

▼インラインで指定する場合のタグ

▼HEADまたは外部(リンキング)ファイルで指定する場合
【CSS】

【HTML】

PAGE TOP▲

設置できないホームページについて

下記の簡易ホームページでは、設置できません。

  • gaiax
  • goo簡単ホームページ
  • 楽天広場

他にも、次のようなページには設置できません。

  1. HTMLが使用できない、或いは<script>タグが使用できない。
  2. <script>タグが使える入力欄があるが、自動改行される(改行が反映される)
PAGE TOP▲

ホームページビルダーで設置するには?

ホームページビルダーV8を例にして説明します。
編集スタイルが「かんたん」だと「HTMLソース編集」ができませんので、「スタンダード」または「エディターズ」に切り替えてください。

  1. まず、設置したいスクリプトのソースコードを「コピー」しておきます。
  2. ビルダーを開き、ページ編集画面の「文字の挿入」で、スクリプトを設置したい場所に目印のテキストを書き込みます。
    例えば、 ★ここに貼る★ など、自分で見てわかるものなら何でも構いません。
  3. 「HTMLソース編集」タブをクリックして、HTMLソースを表示させたら、目印のテキストを探します。
  4. 目印を見つけたら、そのテキストをマウスドラッグで反転し、その上で右クリックし、「貼り付け」を選びます。
    すると、コピーしたスクリプトが目印のテキストの代わりに挿入されます。
  5. 「プレビュー」タブをクリックして、表示されているかどうか確認してください。

★表示されない場合は、スクリプトを自分用に書き変えたときに書き違えたか、またはコピーの段階で選択漏れなどがあったのかも知れません。注意して再度やり直してみてください。
★挿入をやり直す場合は、貼り付けたスクリプトを完全に削除してからやり直してください。

PAGE TOP▲

関係者以外は非公開のサイト・ブログですが、確認できないとまずいですか?

非公開ページでも問題ありません。基本的にスクリプトの使用にあたって、こちらで確認を求めることはありませんので、利用規約に反しない限り、お気兼ねなくお使いください。ご連絡も不要です。
もし利用規約に違反していないかご心配でしたら、気になる点をBBSやメールフォームからご連絡ください。

PAGE TOP▲

携帯電話で表示できますか?

携帯電話はよくわからないので、以下は話半分でお願いします…(ごめんなさい)

  • 携帯専用サイトでは、基本的に使用できないようです。
  • パソコン用サイトを表示できる携帯電話の場合、表示できる場合があります。各携帯電話に搭載されているブラウザの種類によって、JavaScriptが動作するかどうか違うようです(フルブラウザでもJavaアプリ系では動作しないとか…)
    ⇒wikipedia
  • 携帯での表示は保証できませんが、一応SoftBank3G(810T)では表示されました。
  • FC2ブログには、携帯で閲覧するときに表示するプラグインを設定できる「モバイルプラグイン」という機能があり、JavaScriptを使用できます。ただし2000文字程度の文字制限がかかっているので、設置できるのは2000文字以下のスクリプトになります。※これも表示されるかどうかは携帯電話の機種によります。

(2008/12/5記)

PAGE TOP▲
オススメ
関連広告