記事に自分用の修正ボタンを表示する

★　記事に自分用の修正ボタンを表示する。


●　概要


①　自分のブログの記事タイトル横などに記事を変更できる
　　ボタン（アイコン）を設置する
②　ボタン（アイコン）をクリックするとログイン中であれば、
　　新しいページで該当記事の記事変更ページが開いて、
　　変更できる。
③　他の人がボタン（アイコン）をクリックするとまったく
　　違った記事変更ページに飛んでしまうので注意が必要です。

　　アメーバにログインしていない時にクリックするとログインページに飛びます

　　該当する記事番号がなければデータがありませんとなります。






④　記事タイトル横など記事内であれば自由に設置ができます。
⑤　ボタン（アイコン）にカーソルを乗せると　『●●の記事編集』とポップアップ表示されます。
　　　（●●は記事タイトル名）
⑥　今後は、ボタンをクリックすると修正するかどうかの確認を表示する様に
　　改造したいと考えています。


●　記事変更のＵＲＬについての説明

①　記事ＵＲＬが下記の場合（★は自分のアメーバＩＤ　■は記事番号）は

http://ameblo.jp/★/entry-■.html


②　記事変更ＵＲＬは下記になります

http://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id=■




●　この記事で使用する画像の例

①　記事の編集ページにあるアメーバの絵文字。

http://stat.ameba.jp/blog/ucs/img/char/char2/131.gif








●　やり方



①　下記をフリープラグインへ入れる（記事タイトル横に設置のケース）

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
Article_update_btn('.skinArticleHeader h1 a','http://stat.ameba.jp/blog/ucs/img/char/char2/131.gif');
</script>

◆　説明

・下記はフリープラグインの最初に１つあればＯＫです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>


・下記はフリープラグインに既に書かれている場合は不要です。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>

・　スクリプトの形式

Article_update_btn('追加したい場所のセレクタ','表示する画像のURL');







②　下記をCSSへ追記する（記事タイトル右横に設置するケース）

/* ------------------------------------------------------- */
/* 記事変更ボタンの設定（記事タイトル右横）　　　　　　　　*/
/* ------------------------------------------------------- */
.Article_update{
margin-left:5px;/* 左余白 */
margin-top:5px;/* 上余白(画像垂直位置調整) */
vertical-align:-1px;/* 画像垂直位置調整 */
outline:none;
overflow:hidden;
}
/* ------------------------------------------------------- */

③　下記をCSSへ追記する（記事タイトル左横に設置するケース）

/* ------------------------------------------------------- */
/* 記事変更ボタンの設定（記事タイトル左横）　　　　　　　　*/
/* ------------------------------------------------------- */
.Article_update{
margin-right:5px;/* 右余白 */
float:left;/* 左寄せ */
margin-top:3px;/* 上余白(画像垂直位置調整) */
outline:none;
overflow:hidden;
}
/* ------------------------------------------------------- */

◆　スクリプトの内容
（　http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css　に
入っているスリプトのソース）


function Article_update_btn(Article_update_sel,pic_url){// 記事に自分用の修正ボタンを表示する
$(document).ready(function(){
$(".skinArticle").each(function () {
var Article_url=$(".skinArticleHeader h1 a",this).attr('href');// 記事URLを求める
var Article_number=Article_url.substring(Article_url.indexOf(".html",1), Article_url.indexOf(".html",1)-11);// 記事番号を求める
var Article_title=$(".skinArticleHeader h1 a",this).html();// 記事タイトルを求める
var Article_update_data='<span class="Article_update Article_up_'+Article_number+'"><a class="Article_up" href="http://blog.ameba.jp/ucs/entry/srventryupdateinput.do?id='+Article_number+'" target="_blank" title="'+Article_title+'の記事編集"><img src="'+pic_url+'" /></a></span>';// 該当html を作成
$(Article_update_sel,this).after(Article_update_data);// htmlを該当セレクタに挿入
});
});
}