記事枠の上下に読者登録ボタンを置く | ★あもブログ★ クエスト 締切が一目でわかる!カレンダー&カウントダウン

★あもブログ★ クエスト 締切が一目でわかる!カレンダー&カウントダウン

ピグライフ、ピグカフェ、ピグアイランド、クエスト、イベント、カスタマイズ、CSS、ブログ改造


今回のカスタマイズ


今回は、「記事枠の上下に読者登録ボタンを置く方法」ですキラキラ

★あもブログ★


読者登録ボタンは、通常、プロフィール欄に置かれていますが、
ちょっと目立たないですよね…

記事枠の上下に設置することで、クリックしやすくなるようにしてみましょう~りぼん


編集する箇所


今回は、2箇所さわる必要があります

フリープラグイン


フリープラグイン

★あもブログ★



CSS編集


★★★CSS

CSS編集用デザイン」を適用している必要があります

CSSをさわるのが初めてという方は、
先に「CSS編集の基本知識」のページをご覧くださいsss

★あもブログ★

/* その他、拡張があれば記述 */」の下に記号を書き込んでください


やり方


①読者登録ボタン用の画像の準備


まずは、読者登録ボタン用の画像を用意しましょうダイヤ

こんな感じで、通常時とマウスオーバー時の2種類作ります
★あもブログ★

わたしの画像の大きさは、250px×28pxになってますが、この大きさはお好みでキラキラ

ただし、2種類の画像は同じ大きさにしてください


画像が準備できたら、画像URLを取得してくださいね星
(→画像URLとは??


③フリープラグイン編集(コードの書き込み)


書き込むのは、この2種類です
jQueryを使えるようにするコード (すでに入れている場合は、不要)
記事枠の上下に読者登録ボタンを設定するコード
※リンク先はすべて同じです

ただし、
進入禁止著作権の問題から、他の方が作られたコードそのものをここに載せることができません

ご自身で、リンク先のわざめーばさんのブログ記事に載っているコードをコピペして
フリープラグイン内に書き込み、保存してください

すでにフリープラグイン内に他のコードが入っている場合は、
他のものを消してしまわないように注意してね

その後、
「使用する機能」のところにフリープラグインを配置するのを忘れないでsei

※今回は、「読者一覧」も「使用する機能」に配置しておく必要があります!

★あもブログ★

※フリープラグインがよくわからないという方には、
わざめーばさんのこちらの記事が参考になります


③CSS編集(記号の書き込み)


次に、記号をCSSに書き込みます

すこし複雑ですが、
の3種類を書き込みます

こちらも、ご自身で、
リンク先のわざめーばさんのブログ記事に載っている記号をコピペ&適宜編集をして
CSS内に書き込み、保存してください


すでにCSS内に他の記号が入っている場合は、
他のものを消してしまわないように注意してねsei


CSS保存時に気をつけること


「保存」ボタンを押した後、CSSの一番上に
リクエストは既に処理中であるか無効です
の表示がでていないかを必ず確認してくださいsei

この表示がでた場合は保存に失敗しており、ブログに反映されませんsei
もう一度「保存」を押してください

★あもブログ★


保存に成功したら、
F5」を押してブラウザを更新sei 必ず最新の状態にして確認してねsei


動作環境


わたしが確認したブラウザは、Windows版の
★あもブログ★Internet Explorer9/★あもブログ★Google Chrome18/★あもブログ★Firefox13/★あもブログ★Safari5
です


参考にさせていただいたブログ記事まとめ


いつもお世話になっておりますキラキラ ありがとうございますキラキラ
 わざめーばさん:アメブロカスタマイズで人が集まるブログ作り 【新】メインカラムの上下に読者登録ボタンを設置する方法
【新】メインカラムの上下にオリジナル画像の読者登録ボタンを設置する方法
アメブロカスタマイズで人が集まるブログ作り

 実験委員さん:新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ 基本的な構造は上記のわざめーばさんのものと同じですが、画像の配布もされているので一度のぞいてみてくださいね
jquery 記事の上(下)に読者になるボタンをつける
読者になるボタン
★あもブログ参照される際は、
リンク先のブログさまのご迷惑とならないよう、よろしくお願いします



さいごに


参考までに、
ピグ攻略の有名ブロガーさんの読者登録ボタンを勝手にご紹介させていただきますsei


paokujiraさんPaokujira ☆ Pigg
★あもブログ★



黒猫さんアメピグ攻略と裏技~ピグライフ/ピグアイランド完全制覇
★あもブログ★



haruさんピグアイランド・ピグライフ攻略【haruのアメーバピグ無課金】
★あもブログ★



ブログにとんで、実物を見てみてくださいね!!
(画像をクリックで、ブログのトップページにとびます)

カスタマイズを敬遠していた方にすこしでも興味をもっていただけたら嬉しいですsei

また、この記事のリンクを貼って、ぜひお友達にも紹介してあげてくださいねハート②



☆.。.:*・゚ ☆.。.:*・゚ ☆.。.:*・゚

カロリー、気にしてる? ブログネタ:カロリー、気にしてる? 参加中
本文はここから

お菓子買うときとか一応パッケージの裏のカロリーチェックするけど、
結局買っちゃうので、あんまり気にしてないのかもsei