新CSSに読者登録ボタンを置こう・ステップ1・アメブロカスタマイズ 新CSS編集用デザイン編

新CSSに読者登録ボタンを置こう・ステップ1・アメブロカスタマイズ 新CSS編集用デザイン編

アメブロカスタマイズ 読者登録ボタンの設定方法

新スキンに読者登録ボタンを置く方法

新CSS編集用デザインのヘッダーの見えるところに読者登録ボタンを設定する方法を解説します。

今回解説する方法は、記事の上に「読者になる」というボタンを置く方法です。

ステップを3回に分けて行いますのでついてきてください。操作自体はコピーペーストし、該当箇所をあなたのブログIDに書き換えるだけなのでそんなに難しくないのです。しかし、私が独自に考えたものなので・・・もしかしたらあなたのブログの環境によってはできない可能性もありますので、そのときはご容赦ください・・・

まずは
「このブログの読者になる」という文字を表示しよう。

今回はまず第一段階として「このブログの読者になる」という文字リンクを設定しましょう。今回のゴールは以下の画像を目指します。

image-11030231476-11509440880

手順1 管理画面左上の「アメーバのサービス一覧」をクリックし、プラグインの追加を選択する

以下の画像のように「プラグインの追加」ボタンをクリックします。

image-11030231476-11509404321

手順2 フリープラグインにコピーペーストする

フリープラグインのタブを開いて以下のコードを、枠の一番上にコピーペーストしてください。コピーが終わったら下にある「保存」ボタンをクリック。

コピーコード

<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js”></script>

画像のようになります

image-11030231476-11509506378

フリープラグインが空白で初めてこの部分にコピーペーストする人は次の一文は読み飛ばして次の手順3へ進んでください。

フリープラグインになんらかのコードが入力されている場合
枠の一番上にというのは既に、プラグインにあなたが選んだ別のプラグインのコードが入っていた場合の作業です。既に入力しているプラグインの上に次のコードを追加してくださいという意味です。このコードが既に入っている場合は手順3へ進んでもらって結構です。このニュアンスが微妙であなたのパソコンの環境によってはうまくいかないことがあるかもしれません。
手順3 フリープラグインにコピーペーストする

先ほどコピーペーストした部分の下に(既に別のプラグインを入力しているからは、一番下に)以下のコードをコピーペーストしてください。コピーが終わったら下にある「保存」ボタンをクリック。

コピーコード

<script type=”text/javascript”>
$(function(){
$(“<div id=’reader_btn10′><a href=’http://blog.ameba.jp/reader.do?bnm=あなたのブログID‘ target=’_blank’>このブログの読者になる</a></div>”).insertBefore(“.skinMainArea2”);
});
</script>

赤字のあなたのブログIDのところにはあなたのブログIDを入力してください。ブログIDはログインするときに聞かれるIDです。

手順4 「フリープラグイン」が使用する機能にあるかをチェック

最後の「サイドバーの配置」タブをクリックし、使用する機能に「フリープラグイン」が入っているかを確認します。入っていない場合は「使用しない機能」の中に「フリープラグイン」アイコンが入っているのでそれを「使用する機能」にドラックアンドドロップします。

image-11030231476-11509578210

これで完了です。

どうですか?上記のゴールのように「このブログの読者になる」のリンク文字が表示されましたか?

でもバランスが悪いですね?

では次回は、これをCSS編集で編集してみましょう。

では

お疲れ様でした。

アメブロカスタマイズガイドは当サイトのカスタマイズサイトマップとなっています。

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ

« »

コメントは受け付けていません。