ブログページ表示をサンプル化するツール / JavaScript

ページ表示をサンプル化する「Page Sample 🔵」

スクリプトツール（JavaScript）の制作やページデザイン（CSS）の制作などを手掛けると、その結果や使い方などを説明する必要が出て来ます。 その場合、ブログページのスクリーンショットを撮り、それをブログ等で公開する事が多いのですが、ここで問題になるのが「個人情報」です。 自他の利益を損なう最悪の場合を考え、これは不用意な事は出来ません。

例えば、一般公開されたページを借りてサンプルにする場合は、そのページを無個性で一般的な「サンプル」にするため、大変に時間と苦労を要します。 多数の箇所のテキストにボカシを入れ、デザイン上で特別な部分を避けるなど、とても大変です。

このページで紹介するJavaScriptツール「Page Sample 🔵」は、その様な作業を簡単にするために作ったものです。 操作は、サンプルにするページの読み込みが終わったら「Ctrl+F2」を押すだけです。

「Page Sample 🔵」は、アメーバブログページの特に個別ユーザーに関係する表示を、ワンタッチで書換えて保護します。 記事やサイドバーなどで、そのまま残る部分は追加処理が必要ですが、それでも保護処理がかなり楽になります。

書換えの様子 

下は、このブログのページのスクリーンショットです。

このツールをONにして、再度このページを開いた後「Ctrl+F2」を押すと、下の赤枠の部分が書換わります。

書換える部分と上書きの内容 

◎ブラウザのタブタイトル

　「Ameba Blog Page」

◎ブラウザURL窓のURL表示

　「ameblo.user」

◎アメブロヘッダーのログインユーザー表示

　「プロフィールアイコン ※1」「Login User」

◎ブログヘッダーのブログタイトル名とサブタイトル

　「Ameba Blog Sample」「Ameba Blog Sample by Ameblo User」

◎サイドバーのブログユーザープロフィール表示

　「プロフィールアイコン ※2」「Ameblo User」「ステータスを非表示」

◎サイドバーのランキング表示

 　「*****」「******ジャンル」「***」

◎サイドバーのよく使う公式ハッシュタグ表示

　「****」

使用上の注意 

◎このツールで保護処理をした後は「URL窓内の表示」を書換えるため、ページをリロードできません。 リロードは無効なURLを開くため下のエラー表示になります。

 処理前のページ表示に戻すには、別の方法でページを再表示してください。

◎「Page Sample 🔵」は上図の項目（赤枠の表示）以外の部分は書換えないので、必要に応じて手作業の保護処理が必要です。

◎「プロフィールアイコン」の ※1 と ※2 は、スタッフブログのアイコンです。

◎現在提供されている新タイプと旧タイプのスキンに対応しますが、それ以前の世代のスキン（レトロタイプスキン）には対応しません。

◎上書きするテキスト内容は「Page Sample 🔵」のコード書換えで変更できます。

◎「Page Sample 🔵」は、保護処理を実行する場合のみに使用する「非常駐型ツール」です。 通常のブログ操作時は、ツールをOFFにしておくのが適当です。

「Page Sample 🔵」を使用するには 

「Page Sample 🔵」は Chrome/Edge/Firefox の拡張機能「Tampermonkey」上で動作します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法 / JavaScript

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕 右サイドバーの   マークのボタンを1度押してください。

　コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

「Page Sample」の初期バージョン 

旧バージョンは置いておく意味がないので削除しました。

〔 Page Sample 🔵 〕 ver. 0.1 ～0.9

 ホームのメインユーザーアイコンを変更

 ピンクからブルーの配色に変更。

〔 Page Sample 🔵 〕 ver. 1.0

// ==UserScript==
// @name         Page Sample 🔵
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  ブログページサンプルのプレゼンテーション「Ctrl+F2」
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://www.ameba.jp/home
// @match        https://blog.ameba.jp/*
// @match        https://comment.ameba.jp/*
// @noframes
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant        none
// ==/UserScript==


let target=document.querySelector('head');
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始

catch_key();


function catch_key(){
    document.addEventListener('keydown', check_key);

    function check_key(event){
        let gate=-1;
        if(event.ctrlKey==true){
            if(event.keyCode==113){ // ショートカット「Ctrl+F2」
                event.preventDefault(); gate=1; }
            if(gate==1){
                event.stopImmediatePropagation();
                main(); }}}

} // catch_key()



function main(){
    alert("💢 Page Sample が処理を実行します");

    // 管理画面のアメブロヘッダー ver.0.6 で追加
    let globalH_amebaId=document.querySelector('#gHeaderRight .amebaId');
    if(globalH_amebaId){
        globalH_amebaId.textContent='Ameblo User'; }

    // アバターのURLを設定
    let Avatar=
        'https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
        'o03000300p_1590399247329_rw286.png?cat=120';

    // ブラウザ タブタイトル
    if(!location.pathname.includes('/form')){ // コメントダイアログの場合は除外
        document.title='Ameba Blog Page'; }

    // ブラウザURL窓 URL表示
    if(location.pathname.includes('/image')){ // 画像リストページ
        history.replaceState('','','/ameblo.user/imagelist.html'); }
    else if(location.pathname.includes('/home')){ ; } // HOMEページ
    //    else{
    //        history.replaceState('','','/ameblo.user'); } // ブログページ
    else if(location.pathname.includes('/amemberentry')){ // アメンバー記事
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/amemberentry-12345678901.html'); } // 代替ページ
        catch{ ; }}
    else if(location.pathname.includes('/form')){ // コメントダイアログ
        alert("💢 コメントダイアログのアレンジ処理を実行");
        try{
            history.replaceState('','','https://comment.ameba.jp/form?eid=12345678901&bnm=ameblo.user'); } // 代替ページ
        catch{ ; }}
    else{
        alert("💢 Page Sample が処理を実行します");
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/entry-12345678901.html'); } // 代替ページ
        catch{ ; }}


    // アメブロヘッダー ログインユーザー表示
    let login_Avatar=document.querySelector('._MaL9RhoC >img');
    if(login_Avatar){
        login_Avatar.setAttribute('srcset', Avatar); } // ログインユーザー アイコン

    let login_name=document.querySelector('p._3UwSsVVD');
    if(login_name){
        login_name.textContent='Login User'; } // ログインユーザー名

    // ブログヘッダー ブログタイトル名　新タイプスキン
    let blogMainTitle=document.querySelector('.skin-blogMainTitle');
    if(blogMainTitle){
        blogMainTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー ブログタイトル名　旧タイプスキン
    let skinTitle=document.querySelector('.skinTitleArea .skinTitle');
    if(skinTitle){
        skinTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー サブタイトル　新タイプスキン
    let blogSubTitle=document.querySelector('.skin-blogSubTitle');
    if(blogSubTitle){
        blogSubTitle.textContent='Ameba Blog Sample by Ameblo User'; }

    // ブログヘッダー サブタイトル　旧タイプスキン
    let skinDescription=document.querySelector('.skinDescription');
    if(skinDescription){
        skinDescription.textContent='Ameba Blog Sample by Ameblo User'; }


    // サイドバー ブログユーザープロフィール表示　新タイプスキン
    let profileAvatar=document.querySelector('.skin-profileAvatar img');
    if(profileAvatar){
        profileAvatar.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileName=document.querySelector('.skin-profileName a');
    if(profileName){
        profileName.textContent='Ameblo User'; } // ブログユーザー名

    let profileStatus=document.querySelector('.skin-profileStatus');
    if(profileStatus){
        profileStatus.style.opacity='0'; } // ブログユーザー 性別 その他の情報

    // サイドバー ブログユーザープロフィール表示　旧タイプスキン
    let userProfileImage=document.querySelector('.userProfileImage img');
    if(userProfileImage){
        userProfileImage.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileUserNickname=document.querySelector('.profileUserNickname a');
    if(profileUserNickname){
        profileUserNickname.textContent='Ameblo User'; } // ブログユーザー名

    let profileDetailArea=document.querySelector('.profileDetailArea');
    if(profileDetailArea){
        profileDetailArea.style.opacity='0'; } // ブログユーザー 性別 その他の情報


    // サイドバー ランキング表示
    let profileGenre=document.querySelectorAll('[data-uranus-component="profileGenre"] dt');
    if(profileGenre[1]){
        profileGenre[1].textContent='******ジャンル'; }
    let rankingResult=document.querySelectorAll('.skin-rankingResult');
    if(rankingResult[0]){
        rankingResult[0].textContent='*****'; }
    if(rankingResult[1]){
        rankingResult[1].textContent='***'; }


    // サイドバー よく使う公式ハッシュタグ表示
    let hashtag_module=
        document.querySelectorAll('.hashtag-profile .hashtag-module__item__text');
    if(hashtag_module[0]){
        hashtag_module[0].textContent='****'; }
    if(hashtag_module[1]){
        hashtag_module[1].textContent='****'; }


    // ～さんをフォロー
    let snsReader=document.querySelector('.snsReaderModuleBlogNickname');
    if(snsReader){
        snsReader.textContent='Ameblo Userさんをフォロー'; }


    // アメンバーページの説明文
    let amemberWidget=document.querySelector('p[data-uranus-component="amemberWidget"]');
    if(amemberWidget){
        amemberWidget.textContent=
            "この記事はAmeblo Userさんのアメンバーに参加している方のみご覧いただけます。"; }




    // 以下は個人的な特別な設定 🟢
    let Avatar_base=document.querySelector('.skin-profileAvatar');
    if(Avatar_base){
        Avatar_base.style.background='none'; }
    if(profileAvatar){
        profileAvatar.style.opacity='1'; } // ブログユーザー アイコン

    let bar_icon=document.querySelectorAll('.bar_icon'); // バー追加 機能アイコン
    for(let k=0; k<bar_icon.length; k++){
        bar_icon[k].style.display='none'; }


    // トップページへのマーク 🟢
    let pagetop=document.querySelector('#pageup');
    if(pagetop){
        pagetop.style.zIndex='2000'; }



    // HOMEページでのプロテクト
    if(location.pathname.includes('/home')){

        // ユーザープロフィール
        let PcProfile_Image=document.querySelector('.PcProfile_Image img');
        if(PcProfile_Image){
            PcProfile_Image.setAttribute('src', Avatar);
            PcProfile_Image.style.filter='hue-rotate(90deg) saturate(4)'; }

        let PcProfile_Name=document.querySelector('.PcProfile_Name');
        if(PcProfile_Name){
            PcProfile_Name.textContent='Ameblo User'; }

        // ブログのタイトル
        let BlogTitle_Link=document.querySelector('.HomeBlogModule_BlogTitle_Link');
        if(BlogTitle_Link){
            BlogTitle_Link.textContent='Ameba Blog Sample'; }}


    // コメント欄
    let commentAuthor=document.querySelectorAll('[data-uranus-component="commentAuthor"] a');
    for(let k=0; k<commentAuthor.length; k++){
        let author=commentAuthor[k].textContent;
        if(author=='personwritep'){
            commentAuthor[k].textContent='PersonWritep'; }}

    let commentText=document.querySelectorAll('[data-uranus-component="commentText"]');
    for(let k=0; k<commentText.length; k++){
        commentText[k].textContent=
            commentText[k].textContent.replace('personwritep', 'PersonWritep'); }


    // コメントダイアログ  ：コメント対象の記事
    let CommentWebEntry_blog_title=document.querySelector('.CommentWebEntry_blog-title__j7Xgd');
    if(CommentWebEntry_blog_title){
        CommentWebEntry_blog_title.textContent='Ameblo User'; }

    let comment_user_icon=document.querySelector('.CommentWebForm_image__m65qw img');
    if(comment_user_icon){
        comment_user_icon.src='https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
            'o03000300p_1590399247329_rw286.png'; }


} // main()

コメント欄の置換えコードを修正 

コメント欄の「コメントテキスト」の取得に「textContent」を使用していたので改行が解除されていました。「innerHTML」に変更して、この問題を修正しています。

〔 Page Sample 🔵 〕 ver. 1.1

// ==UserScript==
// @name         Page Sample 🔵
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  ブログページサンプルのプレゼンテーション「Ctrl+F2」
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://www.ameba.jp/home
// @match        https://blog.ameba.jp/*
// @match        https://comment.ameba.jp/*
// @noframes
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant        none
// ==/UserScript==


let target=document.querySelector('head');
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始

catch_key();


function catch_key(){
    document.addEventListener('keydown', check_key);

    function check_key(event){
        let gate=-1;
        if(event.ctrlKey==true){
            if(event.keyCode==113){ // ショートカット「Ctrl+F2」
                event.preventDefault(); gate=1; }
            if(gate==1){
                event.stopImmediatePropagation();
                main(); }}}

} // catch_key()



function main(){
    alert("💢 Page Sample が処理を実行します");

    // 管理画面のアメブロヘッダー ver.0.6 で追加
    let globalH_amebaId=document.querySelector('#gHeaderRight .amebaId');
    if(globalH_amebaId){
        globalH_amebaId.textContent='Ameblo User'; }

    // アバターのURLを設定
    let Avatar=
        'https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
        'o03000300p_1590399247329_rw286.png?cat=120';

    // ブラウザ タブタイトル
    if(!location.pathname.includes('/form')){ // コメントダイアログの場合は除外
        document.title='Ameba Blog Page'; }

    // ブラウザURL窓 URL表示
    if(location.pathname.includes('/image')){ // 画像リストページ
        history.replaceState('','','/ameblo.user/imagelist.html'); }
    else if(location.pathname.includes('/home')){ ; } // HOMEページ
    //    else{
    //        history.replaceState('','','/ameblo.user'); } // ブログページ
    else if(location.pathname.includes('/amemberentry')){ // アメンバー記事
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/amemberentry-12345678901.html'); } // 代替ページ
        catch{ ; }}
    else if(location.pathname.includes('/form')){ // コメントダイアログ
        alert("💢 コメントダイアログのアレンジ処理を実行");
        try{
            history.replaceState('','','https://comment.ameba.jp/form?eid=12345678901&bnm=ameblo.user'); } // 代替ページ
        catch{ ; }}
    else{
        alert("💢 Page Sample が処理を実行します");
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/entry-12345678901.html'); } // 代替ページ
        catch{ ; }}


    // アメブロヘッダー ログインユーザー表示
    let login_Avatar=document.querySelector('._MaL9RhoC >img');
    if(login_Avatar){
        login_Avatar.setAttribute('srcset', Avatar); } // ログインユーザー アイコン

    let login_name=document.querySelector('p._3UwSsVVD');
    if(login_name){
        login_name.textContent='Login User'; } // ログインユーザー名

    // ブログヘッダー ブログタイトル名　新タイプスキン
    let blogMainTitle=document.querySelector('.skin-blogMainTitle');
    if(blogMainTitle){
        blogMainTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー ブログタイトル名　旧タイプスキン
    let skinTitle=document.querySelector('.skinTitleArea .skinTitle');
    if(skinTitle){
        skinTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー サブタイトル　新タイプスキン
    let blogSubTitle=document.querySelector('.skin-blogSubTitle');
    if(blogSubTitle){
        blogSubTitle.textContent='Ameba Blog Sample by Ameblo User'; }

    // ブログヘッダー サブタイトル　旧タイプスキン
    let skinDescription=document.querySelector('.skinDescription');
    if(skinDescription){
        skinDescription.textContent='Ameba Blog Sample by Ameblo User'; }


    // サイドバー ブログユーザープロフィール表示　新タイプスキン
    let profileAvatar=document.querySelector('.skin-profileAvatar img');
    if(profileAvatar){
        profileAvatar.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileName=document.querySelector('.skin-profileName a');
    if(profileName){
        profileName.textContent='Ameblo User'; } // ブログユーザー名

    let profileStatus=document.querySelector('.skin-profileStatus');
    if(profileStatus){
        profileStatus.style.opacity='0'; } // ブログユーザー 性別 その他の情報

    // サイドバー ブログユーザープロフィール表示　旧タイプスキン
    let userProfileImage=document.querySelector('.userProfileImage img');
    if(userProfileImage){
        userProfileImage.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileUserNickname=document.querySelector('.profileUserNickname a');
    if(profileUserNickname){
        profileUserNickname.textContent='Ameblo User'; } // ブログユーザー名

    let profileDetailArea=document.querySelector('.profileDetailArea');
    if(profileDetailArea){
        profileDetailArea.style.opacity='0'; } // ブログユーザー 性別 その他の情報


    // サイドバー ランキング表示
    let profileGenre=document.querySelectorAll('[data-uranus-component="profileGenre"] dt');
    if(profileGenre[1]){
        profileGenre[1].textContent='******ジャンル'; }
    let rankingResult=document.querySelectorAll('.skin-rankingResult');
    if(rankingResult[0]){
        rankingResult[0].textContent='*****'; }
    if(rankingResult[1]){
        rankingResult[1].textContent='***'; }


    // サイドバー よく使う公式ハッシュタグ表示
    let hashtag_module=
        document.querySelectorAll('.hashtag-profile .hashtag-module__item__text');
    if(hashtag_module[0]){
        hashtag_module[0].textContent='****'; }
    if(hashtag_module[1]){
        hashtag_module[1].textContent='****'; }


    // ～さんをフォロー
    let snsReader=document.querySelector('.snsReaderModuleBlogNickname');
    if(snsReader){
        snsReader.textContent='Ameblo Userさんをフォロー'; }


    // アメンバーページの説明文
    let amemberWidget=document.querySelector('p[data-uranus-component="amemberWidget"]');
    if(amemberWidget){
        amemberWidget.textContent=
            "この記事はAmeblo Userさんのアメンバーに参加している方のみご覧いただけます。"; }




    // 以下は個人的な特別な設定 🟢
    let Avatar_base=document.querySelector('.skin-profileAvatar');
    if(Avatar_base){
        Avatar_base.style.background='none'; }
    if(profileAvatar){
        profileAvatar.style.opacity='1'; } // ブログユーザー アイコン

    let bar_icon=document.querySelectorAll('.bar_icon'); // バー追加 機能アイコン
    for(let k=0; k<bar_icon.length; k++){
        bar_icon[k].style.display='none'; }


    // トップページへのマーク 🟢
    let pagetop=document.querySelector('#pageup');
    if(pagetop){
        pagetop.style.zIndex='2000'; }



    // HOMEページでのプロテクト
    if(location.pathname.includes('/home')){

        // ユーザープロフィール
        let PcProfile_Image=document.querySelector('.PcProfile_Image img');
        if(PcProfile_Image){
            PcProfile_Image.setAttribute('src', Avatar);
            PcProfile_Image.style.filter='hue-rotate(90deg) saturate(4)'; }

        let PcProfile_Name=document.querySelector('.PcProfile_Name');
        if(PcProfile_Name){
            PcProfile_Name.textContent='Ameblo User'; }

        // ブログのタイトル
        let BlogTitle_Link=document.querySelector('.HomeBlogModule_BlogTitle_Link');
        if(BlogTitle_Link){
            BlogTitle_Link.textContent='Ameba Blog Sample'; }}


    // コメント欄
    let commentAuthor=document.querySelectorAll('[data-uranus-component="commentAuthor"] a');
    for(let k=0; k<commentAuthor.length; k++){
        let author=commentAuthor[k].textContent;
        if(author=='personwritep'){ // 個人的な設定 🟢
            commentAuthor[k].textContent='PersonWritep'; }} // 個人的な設定 🟢

    let commentText=document.querySelectorAll('[data-uranus-component="commentText"]');
    for(let k=0; k<commentText.length; k++){
        commentText[k].innerHTML=
            commentText[k].innerHTML.replace('personwritep', 'PersonWritep'); } // 個人的な設定 🟢


    // コメントダイアログ  ：コメント対象の記事
    let CommentWebEntry_blog_title=document.querySelector('.CommentWebEntry_blog-title__j7Xgd');
    if(CommentWebEntry_blog_title){
        CommentWebEntry_blog_title.textContent='Ameblo User'; }

    let comment_user_icon=document.querySelector('.CommentWebForm_image__m65qw img');
    if(comment_user_icon){
        comment_user_icon.src='https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
            'o03000300p_1590399247329_rw286.png'; }


} // main()

Amebloヘッダー の変更に対応

2023.12 Amebloヘッダー のClass名変更に対応。（ユーザーアカウント表示部）

〔 Page Sample 🔵 〕 ver. 1.2

// ==UserScript==
// @name         Page Sample 🔵
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  ブログページサンプルのプレゼンテーション「Ctrl+F2」
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://www.ameba.jp/home
// @match        https://blog.ameba.jp/*
// @match        https://comment.ameba.jp/*
// @noframes
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant        none
// ==/UserScript==


let target=document.querySelector('head');
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始

catch_key();


function catch_key(){
    document.addEventListener('keydown', check_key);

    function check_key(event){
        let gate=-1;
        if(event.ctrlKey==true){
            if(event.keyCode==113){ // ショートカット「Ctrl+F2」
                event.preventDefault(); gate=1; }
            if(gate==1){
                event.stopImmediatePropagation();
                main(); }}}

} // catch_key()



function main(){
    alert("💢 Page Sample が処理を実行します");

    // 管理画面のアメブロヘッダー ver.0.6 で追加
    let globalH_amebaId=document.querySelector('#gHeaderRight .amebaId');
    if(globalH_amebaId){
        globalH_amebaId.textContent='Ameblo User'; }

    // アバターのURLを設定
    let Avatar=
        'https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
        'o03000300p_1590399247329_rw286.png?cat=120';

    // ブラウザ タブタイトル
    if(!location.pathname.includes('/form')){ // コメントダイアログの場合は除外
        document.title='Ameba Blog Page'; }

    // ブラウザURL窓 URL表示
    if(location.pathname.includes('/image')){ // 画像リストページ
        history.replaceState('','','/ameblo.user/imagelist.html'); }
    else if(location.pathname.includes('/home')){ ; } // HOMEページ
    //    else{
    //        history.replaceState('','','/ameblo.user'); } // ブログページ
    else if(location.pathname.includes('/amemberentry')){ // アメンバー記事
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/amemberentry-12345678901.html'); } // 代替ページ
        catch{ ; }}
    else if(location.pathname.includes('/form')){ // コメントダイアログ
        alert("💢 コメントダイアログのアレンジ処理を実行");
        try{
            history.replaceState('','','https://comment.ameba.jp/form?eid=12345678901&bnm=ameblo.user'); } // 代替ページ
        catch{ ; }}
    else{
        alert("💢 Page Sample が処理を実行します");
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/entry-12345678901.html'); } // 代替ページ
        catch{ ; }}


    // アメブロヘッダー ログインユーザー表示
    let login_Avatar=document.querySelector('._2KFZbuvC >img');
    if(login_Avatar){
        login_Avatar.setAttribute('srcset', Avatar); } // ログインユーザー アイコン

    let login_name=document.querySelector('p._w6MHwCAy');
    if(login_name){
        login_name.textContent='Login User'; } // ログインユーザー名

    // ブログヘッダー ブログタイトル名　新タイプスキン
    let blogMainTitle=document.querySelector('.skin-blogMainTitle');
    if(blogMainTitle){
        blogMainTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー ブログタイトル名　旧タイプスキン
    let skinTitle=document.querySelector('.skinTitleArea .skinTitle');
    if(skinTitle){
        skinTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー サブタイトル　新タイプスキン
    let blogSubTitle=document.querySelector('.skin-blogSubTitle');
    if(blogSubTitle){
        blogSubTitle.textContent='Ameba Blog Sample by Ameblo User'; }

    // ブログヘッダー サブタイトル　旧タイプスキン
    let skinDescription=document.querySelector('.skinDescription');
    if(skinDescription){
        skinDescription.textContent='Ameba Blog Sample by Ameblo User'; }


    // サイドバー ブログユーザープロフィール表示　新タイプスキン
    let profileAvatar=document.querySelector('.skin-profileAvatar img');
    if(profileAvatar){
        profileAvatar.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileName=document.querySelector('.skin-profileName a');
    if(profileName){
        profileName.textContent='Ameblo User'; } // ブログユーザー名

    let profileStatus=document.querySelector('.skin-profileStatus');
    if(profileStatus){
        profileStatus.style.opacity='0'; } // ブログユーザー 性別 その他の情報

    // サイドバー ブログユーザープロフィール表示　旧タイプスキン
    let userProfileImage=document.querySelector('.userProfileImage img');
    if(userProfileImage){
        userProfileImage.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileUserNickname=document.querySelector('.profileUserNickname a');
    if(profileUserNickname){
        profileUserNickname.textContent='Ameblo User'; } // ブログユーザー名

    let profileDetailArea=document.querySelector('.profileDetailArea');
    if(profileDetailArea){
        profileDetailArea.style.opacity='0'; } // ブログユーザー 性別 その他の情報


    // サイドバー ランキング表示
    let profileGenre=document.querySelectorAll('[data-uranus-component="profileGenre"] dt');
    if(profileGenre[1]){
        profileGenre[1].textContent='******ジャンル'; }
    let rankingResult=document.querySelectorAll('.skin-rankingResult');
    if(rankingResult[0]){
        rankingResult[0].textContent='*****'; }
    if(rankingResult[1]){
        rankingResult[1].textContent='***'; }


    // サイドバー よく使う公式ハッシュタグ表示
    let hashtag_module=
        document.querySelectorAll('.hashtag-profile .hashtag-module__item__text');
    if(hashtag_module[0]){
        hashtag_module[0].textContent='****'; }
    if(hashtag_module[1]){
        hashtag_module[1].textContent='****'; }


    // ～さんをフォロー
    let snsReader=document.querySelector('.snsReaderModuleBlogNickname');
    if(snsReader){
        snsReader.textContent='Ameblo Userさんをフォロー'; }


    // アメンバーページの説明文
    let amemberWidget=document.querySelector('p[data-uranus-component="amemberWidget"]');
    if(amemberWidget){
        amemberWidget.textContent=
            "この記事はAmeblo Userさんのアメンバーに参加している方のみご覧いただけます。"; }




    // 以下は個人的な特別な設定 🟢
    let Avatar_base=document.querySelector('.skin-profileAvatar');
    if(Avatar_base){
        Avatar_base.style.background='none'; }
    if(profileAvatar){
        profileAvatar.style.opacity='1'; } // ブログユーザー アイコン

    let bar_icon=document.querySelectorAll('.bar_icon'); // バー追加 機能アイコン
    for(let k=0; k<bar_icon.length; k++){
        bar_icon[k].style.display='none'; }


    // トップページへのマーク 🟢
    let pagetop=document.querySelector('#pageup');
    if(pagetop){
        pagetop.style.zIndex='2000'; }



    // HOMEページでのプロテクト
    if(location.pathname.includes('/home')){

        // ユーザープロフィール
        let PcProfile_Image=document.querySelector('.PcProfile_Image img');
        if(PcProfile_Image){
            PcProfile_Image.setAttribute('src', Avatar);
            PcProfile_Image.style.filter='hue-rotate(90deg) saturate(4)'; }

        let PcProfile_Name=document.querySelector('.PcProfile_Name');
        if(PcProfile_Name){
            PcProfile_Name.textContent='Ameblo User'; }

        // ブログのタイトル
        let BlogTitle_Link=document.querySelector('.HomeBlogModule_BlogTitle_Link');
        if(BlogTitle_Link){
            BlogTitle_Link.textContent='Ameba Blog Sample'; }}


    // コメント欄
    let commentAuthor=document.querySelectorAll('[data-uranus-component="commentAuthor"] a');
    for(let k=0; k<commentAuthor.length; k++){
        let author=commentAuthor[k].textContent;
        if(author=='personwritep'){ // 個人的な設定 🟢
            commentAuthor[k].textContent='PersonWritep'; } // 個人的な設定 🟢
        if(author=='Amb User'){ // プライベート設定 🟠
            commentAuthor[k].textContent='Ameblo User'; }} // プライベート設定 🟠

    let commentText=document.querySelectorAll('[data-uranus-component="commentText"]');
    for(let k=0; k<commentText.length; k++){
        commentText[k].innerHTML=
            commentText[k].innerHTML.replace('personwritep', 'PersonWritep'); // 個人的な設定 🟢
        commentText[k].innerHTML=
            commentText[k].innerHTML.replace('Amb User', 'Aemblo User'); } // プライベート設定 🟠


    // コメントダイアログ  ：コメント対象の記事
    let CommentWebEntry_blog_title=document.querySelector('.CommentWebEntry_blog-title__j7Xgd');
    if(CommentWebEntry_blog_title){
        CommentWebEntry_blog_title.textContent='Ameblo User'; }

    let comment_user_icon=document.querySelector('.CommentWebForm_image__m65qw img');
    if(comment_user_icon){
        comment_user_icon.src='https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
            'o03000300p_1590399247329_rw286.png'; }


} // main()

Amebloヘッダー のアバター変更に対応

2024.03 Amebloヘッダー のログインアバターのimg変更。

〔 Page Sample 🔵 〕 ver. 1.3

// ==UserScript==
// @name         Page Sample 🔵
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  ブログページサンプルのプレゼンテーション「Ctrl+F2」
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://www.ameba.jp/home
// @match        https://blog.ameba.jp/*
// @match        https://comment.ameba.jp/*
// @noframes
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameblo.jp
// @grant        none
// ==/UserScript==


let target=document.querySelector('head');
let monitor=new MutationObserver( catch_key );
monitor.observe(target, {childList: true}); // ショートカット待受け開始

catch_key();


function catch_key(){
    document.addEventListener('keydown', check_key);

    function check_key(event){
        let gate=-1;
        if(event.ctrlKey==true){
            if(event.keyCode==113){ // ショートカット「Ctrl+F2」
                event.preventDefault(); gate=1; }
            if(gate==1){
                event.stopImmediatePropagation();
                main(); }}}

} // catch_key()



function main(){
    alert("💢 Page Sample が処理を実行します");

    // 管理画面のアメブロヘッダー ver.0.6 で追加
    let globalH_amebaId=document.querySelector('#gHeaderRight .amebaId');
    if(globalH_amebaId){
        globalH_amebaId.textContent='Ameblo User'; }

    // アバターのURLを設定
    let Avatar=
        'https://stat.profile.ameba.jp/profile_images/'+
        '20200605/08/63/tB/p/o03000300p_1591312706303_fbxee.png?cat=120';

    // ブラウザ タブタイトル
    if(!location.pathname.includes('/form')){ // コメントダイアログの場合は除外
        document.title='Ameba Blog Page'; }

    // ブラウザURL窓 URL表示
    if(location.pathname.includes('/image')){ // 画像リストページ
        history.replaceState('','','/ameblo.user/imagelist.html'); }
    else if(location.pathname.includes('/home')){ ; } // HOMEページ
    //    else{
    //        history.replaceState('','','/ameblo.user'); } // ブログページ
    else if(location.pathname.includes('/amemberentry')){ // アメンバー記事
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/amemberentry-12345678901.html'); } // 代替ページ
        catch{ ; }}
    else if(location.pathname.includes('/form')){ // コメントダイアログ
        alert("💢 コメントダイアログのアレンジ処理を実行");
        try{
            history.replaceState('','','https://comment.ameba.jp/form?eid=12345678901&bnm=ameblo.user'); } // 代替ページ
        catch{ ; }}
    else{
        alert("💢 Page Sample が処理を実行します");
        try{
            history.replaceState('','','https://ameblo.jp/ambuser/entry-12345678901.html'); } // 代替ページ
        catch{ ; }}


    // アメブロヘッダー ログインユーザー表示
    let login_Avatar=document.querySelector('._2KFZbuvC >img');
    if(login_Avatar){
        login_Avatar.setAttribute('srcset', Avatar); } // ログインユーザー アイコン

    let login_name=document.querySelector('p._w6MHwCAy');
    if(login_name){
        login_name.textContent='Login User'; } // ログインユーザー名

    // ブログヘッダー ブログタイトル名　新タイプスキン
    let blogMainTitle=document.querySelector('.skin-blogMainTitle');
    if(blogMainTitle){
        blogMainTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー ブログタイトル名　旧タイプスキン
    let skinTitle=document.querySelector('.skinTitleArea .skinTitle');
    if(skinTitle){
        skinTitle.textContent='Ameba Blog Sample'; }

    // ブログヘッダー サブタイトル　新タイプスキン
    let blogSubTitle=document.querySelector('.skin-blogSubTitle');
    if(blogSubTitle){
        blogSubTitle.textContent='Ameba Blog Sample by Ameblo User'; }

    // ブログヘッダー サブタイトル　旧タイプスキン
    let skinDescription=document.querySelector('.skinDescription');
    if(skinDescription){
        skinDescription.textContent='Ameba Blog Sample by Ameblo User'; }


    // サイドバー ブログユーザープロフィール表示　新タイプスキン
    let profileAvatar=document.querySelector('.skin-profileAvatar img');
    if(profileAvatar){
        profileAvatar.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileName=document.querySelector('.skin-profileName a');
    if(profileName){
        profileName.textContent='Ameblo User'; } // ブログユーザー名

    let profileStatus=document.querySelector('.skin-profileStatus');
    if(profileStatus){
        profileStatus.style.opacity='0'; } // ブログユーザー 性別 その他の情報

    // サイドバー ブログユーザープロフィール表示　旧タイプスキン
    let userProfileImage=document.querySelector('.userProfileImage img');
    if(userProfileImage){
        userProfileImage.setAttribute('srcset', Avatar); } // ブログユーザー アイコン

    let profileUserNickname=document.querySelector('.profileUserNickname a');
    if(profileUserNickname){
        profileUserNickname.textContent='Ameblo User'; } // ブログユーザー名

    let profileDetailArea=document.querySelector('.profileDetailArea');
    if(profileDetailArea){
        profileDetailArea.style.opacity='0'; } // ブログユーザー 性別 その他の情報


    // サイドバー ランキング表示
    let profileGenre=document.querySelectorAll('[data-uranus-component="profileGenre"] dt');
    if(profileGenre[1]){
        profileGenre[1].textContent='******ジャンル'; }
    let rankingResult=document.querySelectorAll('.skin-rankingResult');
    if(rankingResult[0]){
        rankingResult[0].textContent='*****'; }
    if(rankingResult[1]){
        rankingResult[1].textContent='***'; }


    // サイドバー よく使う公式ハッシュタグ表示
    let hashtag_module=
        document.querySelectorAll('.hashtag-profile .hashtag-module__item__text');
    if(hashtag_module[0]){
        hashtag_module[0].textContent='****'; }
    if(hashtag_module[1]){
        hashtag_module[1].textContent='****'; }


    // ～さんをフォロー
    let snsReader=document.querySelector('.snsReaderModuleBlogNickname');
    if(snsReader){
        snsReader.textContent='Ameblo Userさんをフォロー'; }


    // アメンバーページの説明文
    let amemberWidget=document.querySelector('p[data-uranus-component="amemberWidget"]');
    if(amemberWidget){
        amemberWidget.textContent=
            "この記事はAmeblo Userさんのアメンバーに参加している方のみご覧いただけます。"; }




    // 以下は個人的な特別な設定 🟢
    let Avatar_base=document.querySelector('.skin-profileAvatar');
    if(Avatar_base){
        Avatar_base.style.background='none'; }
    if(profileAvatar){
        profileAvatar.style.opacity='1'; } // ブログユーザー アイコン

    let bar_icon=document.querySelectorAll('.bar_icon'); // バー追加 機能アイコン
    for(let k=0; k<bar_icon.length; k++){
        bar_icon[k].style.display='none'; }


    // トップページへのマーク 🟢
    let pagetop=document.querySelector('#pageup');
    if(pagetop){
        pagetop.style.zIndex='2000'; }



    // HOMEページでのプロテクト
    if(location.pathname.includes('/home')){

        // ユーザープロフィール
        let PcProfile_Image=document.querySelector('.PcProfile_Image img');
        if(PcProfile_Image){
            PcProfile_Image.setAttribute('src', Avatar);
            PcProfile_Image.style.filter='hue-rotate(90deg) saturate(4)'; }

        let PcProfile_Name=document.querySelector('.PcProfile_Name');
        if(PcProfile_Name){
            PcProfile_Name.textContent='Ameblo User'; }

        // ブログのタイトル
        let BlogTitle_Link=document.querySelector('.HomeBlogModule_BlogTitle_Link');
        if(BlogTitle_Link){
            BlogTitle_Link.textContent='Ameba Blog Sample'; }}


    // コメント欄
    let commentAuthor=document.querySelectorAll('[data-uranus-component="commentAuthor"] a');
    for(let k=0; k<commentAuthor.length; k++){
        let author=commentAuthor[k].textContent;
        if(author=='personwritep'){ // 個人的な設定 🟢
            commentAuthor[k].textContent='PersonWritep'; } // 個人的な設定 🟢
        if(author=='Amb User'){ // プライベート設定 🟠
            commentAuthor[k].textContent='Ameblo User'; }} // プライベート設定 🟠

    let commentText=document.querySelectorAll('[data-uranus-component="commentText"]');
    for(let k=0; k<commentText.length; k++){
        commentText[k].innerHTML=
            commentText[k].innerHTML.replace('personwritep', 'PersonWritep'); // 個人的な設定 🟢
        commentText[k].innerHTML=
            commentText[k].innerHTML.replace('Amb User', 'Aemblo User'); } // プライベート設定 🟠


    // コメントダイアログ  ：コメント対象の記事
    let CommentWebEntry_blog_title=document.querySelector('.CommentWebEntry_blog-title__j7Xgd');
    if(CommentWebEntry_blog_title){
        CommentWebEntry_blog_title.textContent='Ameblo User'; }

    let comment_user_icon=document.querySelector('.CommentWebForm_image__m65qw img');
    if(comment_user_icon){
        comment_user_icon.src='https://stat.profile.ameba.jp/profile_images/20200525/18/d6/PJ/p/'+
            'o03000300p_1590399247329_rw286.png'; }


} // main()

スクリプトツールの最新バージョンについて 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Page Sample 🔵」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

最新バージョン・リンク一覧表 　　　　　　　　　/ スクリプトツールのリンク集