リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

古いスキンのCSS(ベーシックスキン)の方法などは下記を参照

ランのカスタマイズ日記


目 注意点のテーマの記事を読んでください。
http://ameblo.jp/new-blue-777/theme-10040412712.html

各種スクリプトの置場
http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css


注意 広告は消さないで下さい。
CSSで広告を消した場合、規約違反になる可能性があります。

★CSSを変えたら、自分のブログを開いてF5を押して確認してください

画面の解像度表示


PCのOS(基本ソフト)とブラウザのバージョン




Amebaでブログを始めよう!

テーマ:

テーマ:
★ OneNote でクリップの調整


● 内容

① OneNoteでクリップを非表示にする。
② OneNoteでクリップをクリックするとサインインしてクリップを保存しますと
表示されます。
元に戻すには、Esc(エスケープ)キーを押します。






● CSSへ追加する

① OneNoteでクリップを非表示にする。

.oneNoteBtnArea{/* OneNoteでクリップ */
display:none !important;/* 非表示 */
}









テーマ:
★ 『いいね!した人』の常時表示 (リアルピグ対応)

● 内容

① 『いいね!した人』の表示を『いいね!した人』をクリックしなくても常時表示します。
② プロフィール画像または、リアルピグ表示が可能です。
   リアルピグが表示できない場合は、プロフィール画像を表示します。
   リアルピグ画像のアクションを指定できます。
   リアルピグ画像の指定できるアクションは下記の通り。

初期値 ・・・default
うれしい・・・glad
悲しい ・・・sad
怒り  ・・・angry
はい! ・・・pose_hi
どうぞ ・・・pose_please
スマイル・・・pose_smail
びっくり・・・pose_surprise
悩む  ・・・think
シャイ ・・・pose_shy
クール ・・・pose_cool



③ カーソルを画像に乗せるといいね!した人のニックネーム、ブログ名、いいね!した日時が
   ポップアップされます。
④ 表示する位置は、記事フッターなど記事内であれば自由に指定できます。
⑤ 表示数は、最初は10人分のいいね!した人が表示されます。
   いいね!した人が11人以上ある場合は、『もっと見る』が表示されます。
   『もっと見る』をクリックすると11人目から10人分表示されます。

⑥ 表示例





追記

⑦ 退会ユーザ対応

  ユーザーが退会しているため表示できません が画像にカーソルを乗せると表示されます。

  アメーバIDさん
  ユーザーが退会しているため表示できません
  いいね!した日時:●年▲月■日 ●時●分

  画像は下記が表示されます。






● やり方

① 下記をフリープラグインへ追加します。


<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'>
iine_j=0;iine_url_array=[];
$(document).ready(function(){
iine_display(90,90,"いいね!した人",".articleLinkArea","1","glad","pose_please");
});
</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>


・ 90・・・いいね!した人の画像の幅
・ 90・・・いいね!した人の画像の高さ
・ "いいね!した人"・・・当ヘッダーの表題
・ ".articleLinkArea"・・・設置したい場所
・ "1"・・・リアルピグ表示の場合は、"1" プロフィール画像表示の場合は、"0"
・  "glad"・・・リアルピグ画像のアクション
・ ,"pose_please"・・・リアルピグのアクション(カーソルを乗せた時)


② CSSへ下記を追加する


/* ************************ */
/* いいね!した人の常時表示 */
/* ************************ */
.iine_head{/* ヘッダー */
height:30px;/* 高さ */
display:block;
background-color:#222222;/* 背景色 */
margin:10px 0px 0px 0px;/* 外側余白 */
padding:10px 0px 0px 10px;/* 内側余白 */
color:#ffffff;/* 文字色 */
border-radius: 5px 5px 0px 0px;/* CSS3角丸 */
}
.iine_userList{/* 明細 */
text-align:center;/* 中央寄せ */
border-radius: 0px 0px 0px 0px;/* CSS3角丸 */
background-color:#222222;/* 背景色 */
border-top:1px dotted #ffffff;/* 枠線(上) */
padding:5px;/* 内側余白 */
}
.iine_userList img{/* 画像 */
border-radius: 5px;/* CSS3角丸 */
margin-left:3px;/* 外側余白 */
}
.iine_Foot{/* フッター */
background-color:#111213;/* 背景色 */
border-radius:0px 0px 5px 5px;/* CSS3角丸 */
}
.more_iine{/* もっと見る */
display:block;
text-align:center;/* 中央寄せ */
font-size:12px;/* 文字の大きさ */
color:#dddddd;/* 文字色 */
}
/* ************************ */



● スクリプトのソース内容


// **********************************************************************
// * いいね!の表示
// **********************************************************************
// ************************
// いいね!もっと処理
// ************************
function iine_more(m_lastUpdMillis,m_entryId,m_iine_j,m_w,m_h,m_h_title,m_selc,m_iine_pigg_sw,m_iine_pigg_a1,m_iine_pigg_a2){
var more_url='http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId='+
ameba_id_get()+'&entryId='+m_entryId+'&updMillis='+m_lastUpdMillis+'&ts='+new Date/1+
'&callback='+m_entryId; // いいね! json URL(callback関数=記事番号(任意))
load_iine(more_url);
iine_url_array[0]=more_url;
window.iine_j=m_iine_j;
iine_edit(1,m_w,m_h,m_h_title,m_selc,m_iine_pigg_sw,m_iine_pigg_a1,m_iine_pigg_a2);
}
// ************************
// いいね!JSON読み込み処理
// ************************
function load_iine(iine_url){ // JSONの読み込み処理 (いいね!のスクリプト(json)を読む)
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', iine_url);
script.setAttribute('charset', 'UTF-8');
document.getElementsByTagName('head').item(0).appendChild(script);
}
// **************************************************
// 初期処理(いいね!のURL作成&アレイにホールド)
// **************************************************
function iine_entry_get(){
var url_ix=0;
$(".skinArticle").each(function(){
var iine_json_url='http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId='+
ameba_id_get()+'&entryId='+$(".iineEntryCnt",this).attr("data-entryId")+'&ts='+new Date/1+
'&callback='+$(".iineEntryCnt",this).attr("data-entryId"); // いいね! json URL(callback関数=記事番号)
iine_url_array[url_ix]=iine_json_url;
url_ix++;
});
if(typeof iine_url_array[0]!="undefined"){ // いいね!URLが存在するか?
load_iine(iine_url_array[0]); // JSONの読み込み処理
}
}
// ************************
// いいね!表示処理メイン
// ************************
function iine_display(d_w,d_h,d_h_title,d_selc,d_iine_pigg_sw,d_iine_pigg_a1,d_iine_pigg_a2){
iine_entry_get(); // 初期処理
iine_edit(0,d_w,d_h,d_h_title,d_selc,d_iine_pigg_sw,d_iine_pigg_a1,d_iine_pigg_a2);
}
// ************************
// いいね!ネクスト処理
// ************************
function iine_next(n_w,n_h,n_h_title,n_selc,n_iine_pigg_sw,n_iine_pigg_a1,n_iine_pigg_a2){
iine_url_array.shift();
if(typeof iine_url_array[0]!="undefined"){
load_iine(iine_url_array[0]);
iine_edit(0,n_w,n_h,n_h_title,n_selc,n_iine_pigg_sw,n_iine_pigg_a1,n_iine_pigg_a2);
}
}
// ************************
// いいね!編集処理
// ************************
function iine_edit(more_sw,w,h,h_title,selc,iine_pigg_sw,iine_pigg_a1,iine_pigg_a2){
window.iineEntryDetailCallback = function(data){
if(more_sw==0){
var iine_list='<div class="iine_area"><span class="iine_head">'+h_title+
'</span>'+'<div class="iine_userList">';
}else{
var iine_list="";
}
for (var i = 0; i < data.userList.length; i++) {
var no_image = 'http://stat100.ameba.jp/common_style/img/common/noimage140.gif';
var pig_image = 'http://contents.pigg.ameba.jp/api/0/user/';
var iine_date=new Date(data.userList[i].iineMillis);
var iine_week = ['日', '月', '火', '水', '木', '金', '土'];
var iine_y = iine_date.getFullYear();
var iine_m = iine_date.getMonth() + 1;
var iine_d = iine_date.getDate();
var iine_w = iine_date.getDay();
var iine_h = iine_date.getHours();
var iine_mi = iine_date.getMinutes();
if(iine_h<10){iine_h="0"+iine_h;}
if(iine_mi<10){iine_mi="0"+iine_mi;}
if(iine_pigg_sw=="0"){ // プロフィール画像表示
if(data.userList[i].validFlg==true){
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].profile.nickname+'さん\n'+data.userList[i].blogTitle+
'\nいいね!した日時:'+iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+data.userList[i].profile.profileImage.url+'" width="'+w+'" height="'+h+'"></a>';
}else{
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].amebaId+'さん\n'+
'ユーザーが退会しているため表示できません\nいいね!した日時:'+
iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+no_image+'" width="'+w+'" height="'+h+'"></a>';
}
}else{ // pigg 表示
var pigg_image = 'http://contents.pigg.ameba.jp/api/0/user/';
var scale="&scale=264";
var shadow="&shadow=false";
var frame="?part=all";
var direction="&direction=FL";
// 最初の表示
var pigg_image_URL = pigg_image+data.userList[i].amebaId+'/image'+frame+direction+shadow+scale+
'&action='+iine_pigg_a1;
// カーソルを乗せた時の表示
var pigg_image_URL2 = pigg_image+data.userList[i].amebaId+'/image'+frame+direction+shadow+scale+
'&action='+iine_pigg_a2;
// pigg画像がない時はプロフィール画像を表示する(onerror)
if(data.userList[i].validFlg==true){
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].profile.nickname+'さん\n'+data.userList[i].blogTitle+
'\nいいね!した日時:'+iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+pigg_image_URL+'" width="'+w+'" onmouseover="this.src=\''+pigg_image_URL2+
'\'" onmouseout="this.src=\''+pigg_image_URL+'\'"'+' onerror ="(function(that){ that.src=\''+
data.userList[i].profile.profileImage.url+'\';})(this)"></a>';
}else{
iine_list+='<a href="http://ameblo.jp/'+data.userList[i].amebaId+'/"'+
' target="_blank" title="'+data.userList[i].amebaId+'さん\n'+
'ユーザーが退会しているため表示できません\nいいね!した日時:'+
iine_y + '年' + iine_m + '月' + iine_d + '日 (' + iine_week[iine_w] + ')'+
' '+iine_h+':'+iine_mi+
'"><img src="'+no_image+'" width="'+w+'" height="'+h+'"></a>';
}
}
}
// 記事番号を求める
var entryId=iine_url_array[0].substring(iine_url_array[0].length-11,iine_url_array[0].length);
// もっと見るの判断
var more_iine="";
if(data.lastFlg==false){
more_iine='<span class="more_iine"><a href="java'+'script:void(0)" class="iine_more"'+
' onclick="iine_more('+data.lastUpdMillis+','+entryId+','+window.iine_j+','+
w+','+h+',\''+h_title+'\',\''+selc+'\',\''+iine_pigg_sw+'\',\''+iine_pigg_a1+'\',\''+iine_pigg_a2+
'\');">もっと見る</a></span>';
}else{
more_iine='<span class="more_iine"></span>';
}
if(more_sw==0){
iine_list+='</div><div class="iine_Foot">'+more_iine+'</div></div>';
$(selc+':eq('+window.iine_j+')').after(iine_list);
window.iine_j++;
iine_next(w,h,h_title,selc,iine_pigg_sw,iine_pigg_a1,iine_pigg_a2);
}else{
$('.iine_area'+':eq('+window.iine_j+') .iine_Foot').remove();
iine_list+='<div class="iine_Foot">'+more_iine+'</div>';
$('.iine_userList'+':eq('+window.iine_j+')').append(iine_list);
}
};
}




● その他、覚書

① いいね!した人のデータの呼び出しは、下記の様に JSON with padding(JSONP)の形式で
コールバックで呼び出す。クロスドメインのため、Ajaxは使用できない。

http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId=アメーバID&entryId=記事番号&ts=現在の日時

② 1つのJSONで呼び出せるのは10件のみ。
次の10件を呼び出すには下記の様に呼び出す。

http://iine.blog.ameba.jp/api/iine_entry_detail.json?receiveAmebaId=アメーバID&entryId=記事番号&updMillis=上記①で呼び出した時のlastUpdMillisの値&ts=現在の日時


③ 呼び出した時のデータの内容

iineEntryDetailCallback({
"successFlg":true,
"lastUpdMillis":最終更新日時,
"lastFlg":false,
"userList":[{
"validFlg":true,
"amebaId":"アメーバID",
"blogTitle":"ブログタイトル",
"iineMillis":いいねした日時,
"profile":{
"nickname":"ニックネーム",
"profileImage":{"url":"プロフィール画像のURL",
"height":高さ,
"width":幅
}}}
]});

赤字部分は繰り返し

"successFlg":true ・・・ false の場合はエラー
"lastFlg":false ・・・ false は続きあり、 trueは続きなし
iineEntryDetailCallback・・・固定のためcallback=での名前指定(変更)はできない。


④ JSON with padding(JSONP)では非同期のため、同期をとるためには、レンタルサーバを
利用してプログラムを作ればできる様であるが、サーバは用意できないので、
あくまで、クライアント側(ブラウザ側)で同期をとることとする。

⑤ アメブロのHTMLの該当部分

<script src="http://stat100.ameba.jp/blog/js/user/iineEntryDetail.1.000.js"></script>
<script>
new Amb.IineEntryAmb.PcBlog({
setting:{
receiveAmebaId:'new-blue-777',
blogDomain:'http://ameblo.jp',
statDomain:'http://stat100.ameba.jp',
iineDomain:'http://iine.blog.ameba.jp',
measureDomain:'http://measure.ameblo.jp'
}
});
</script>





Ameba人気のブログ

Amebaトピックス