「FontAwesome」が必須アイテム化

記事内の「svgタグ禁止指定」により、各種のアイコン画像などをブログ記事内で表示するには、「FontAwesome」が必須のアイテムになって来ました。 プログラム関連の記事を書く上では、「FontAwesome絵文字」が使えないととても困ります。

 

そして、PCとスマホの両方の閲覧環境で「FontAwesome」を表示するには、本文記事の適当な場所に「FontAwesome」の呼込み指定の「styleタグ」を書き込む必要があります。

 

「styleタグ」は簡単なコードですが、それを記事を書く度に書き込むのは手間です。 そこで、その書き込みを自動で行うツール「Auto Style Attach ⭐」を制作しました。 このツールは 2019年より使っていますが、シンプルなツールで大きな問題なく機能しています。

 

今回、「FontAwesome」関連ツールを紹介する機会が増えたので、このツールを再チェックをして更新しました。

 

 

 

「Auto Style Attach ⭐」の仕様  ①常設「styleタグ」の書込み

「FontAwesome」は「Tampermonkey」に登録して「ON」にしておくと、ブログ編集画面を開く度に自動的に機能します。

 

その主要な機能は「FontAwesome」の呼込みを指定する「styleタグ」を記事に書き込む事です。

 

 

 「styleタグ」を記入・更新するタイミング

◎「styleタグ」を記事に書き込むのは、新規作成のブログ編集画面で「下書き保存」「投稿する」のいずれかのボタンを最初に押した時です。

 

◎「styleタグ」は記事の末尾に書き込みますが、「通常表示」からは見えません。 また当然ですが、ブログ記事を参照した場合に表示されません。

 

◎ 記事の再編集の場合は、再編集して「下書き保存」「投稿する」のいずれかのボタンを押した時に、文末の「styleタグ」を更新します。

 

 

「styleタグ」の内容 

「styleタグ」は、以下のHtmlコードで「HTML表示」で確認できます。

<style class="asa" type="text/css">
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");
</style>

 

 

 「ver.1.5」での更新 

上記コードは「ver.1.5」のコードで、「FontAwesome」の呼び込みを指定です。 従来の「font-awesome/6.1.1」を「font-awesome/6.4.2」に更新しました。

 

▪このバージョンが旧いと、新しく追加された絵文字が使えません。 ただし、過去記事の作成時の絵文字は、その当時のバージョンで表示できた絵文字なので、過去記事の「styleタグ」を、遡って更新する必要はありません。

 

 

 

 「Auto Style Attach ⭐」の仕様  ➁「SNSボタン」の非表示機能

「いいね」「コメント」「リブログ」の「SNSボタン」を、記事の単位で非表示にする「styleタグ」を、①と同様に記事の末尾に書き込みます。

 

〔注〕

「FantAwesome」の環境付与が目的で「Auto Style Attach ⭐」を利用される場合は ➁は不要ですが、使わなければ書き込まれる「styleタグ」は ①のみになるので、全く邪魔にならないオマケと考えてください。

 

 

「SNSボタン」を非表示にするチェックボタン 

下は「Ameblo Witer(Compact)」のアレンジ下の編集画面ですが、このツールはこのアレンジが無くても使えます。 

 

「コメント」「リブログ」ボタンは、記事ごとに「表示/非表示」の選択が出来ます。 しかし「いいね」ボタンは、ブログ全記事で「表示/非表示」の設定が可能ですが、記事の単位での設定ができません。「いいね」ボタンも記事ごとに非表示にできたらと考え、この機能を作りました。

 

◎「全SNS機能」のチェックボタンにチェックを入れると、チェックを入れた記事のみ「SNSボタン」が非表示になります。(通常は PCから押せなくなります)

 

 

 

▪ ただし、スマホアプリにこの機能は無効で、SNSボタンが表示されてしまいます。

従って、この非表示機能は気休め程度と考えてください。

 

〔追記〕

▪ 2023年10月の時点で、スマホアプリのSNSボタンも、このツールで非表示にできる様です。 以前は無効でしたが、スマホアプリのシステム変更の結果と思われます。 スマホアプリは変更が頻繁で、今後も無効に戻る可能性はあり、このツールの非表示機能は、確実に有効でない事を御理解ください。

 

〔追記〕 2024.01

▪ 2024年1月の段階で、スマホアプリのSNSボタンは、このツールのコードでは非表示にならない事を確認しました。

 

 

下は、スタッフブログでこの機能を使ったサンプルです。

 

 

 

 「SNSボタン」の非表示の「styleタグ」の内容

以下は、「全SNS機能」にチェックを入れた場合に、記事末尾に書き込まれるコードです。 これは、新・旧・レトロの全タイプのスキンに対応するので、少しだけ長くなっています。

 

<style class="pts" type="text/css">
[data-uranus-component="entryAction"],
[data-uranus-component="feedbacks"], 
[data-uranus-component="entryShare"], 
[data-uranus-component="mainWidget"], 
.articleExLinkArea, 
.reblogArea, 
.commentArea, 
.pagingArea:nth-of-type(3), 
#exLinkBtn, 
#comment_module, 
._2UJLz0lB { display: none; }
</style>

 

 

「ver.1.5」での更新 

このツールは、「投稿設定」の枠内に「全SNS機能」のボタンを追加しますが、このバージョンから「公開▢アメンバー限定」➔「公開範囲▢アメンバー限定」に変更しました。

 

この2文字の追加で枠のデザインが崩れるので、「Ameblo Writer」の側も微調整しています。

 

◎「Ameblo Writer(Compact)」を「ver.73」に更新してください。◞(..)◟

 

 

 

「Auto Style Attach ⭐」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

 

❶「Tampermonkey」を導入します

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

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

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

 

 

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

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

 

 

 

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

 

〔コピー方法〕 軽量シンプルなツール「PreBox Button   」を使うと

  コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

  の操作で、掲載コードのコピーが可能になります。

 

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

 

 

〔 Auto Style Attach ⭐ 〕 ver. 1.5

 

// ==UserScript==
// @name        Auto Style Attach ⭐
// @namespace  http://tampermonkey.net/
// @version      1.5
// @description  文書末尾に常設 styleタグを自動記入する
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/entry/srventry*
// @exclude      https://blog.ameba.jp/ucs/entry/srventrylist.do*
// @grant         none
// ==/UserScript==

// 文書保存時(下書きを含む全投稿時)に常設 styleタグを書込みます。
// Auto Style Attach SNS の機能を統合し、SNSボタン非表示を設定できます。


let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
    retry++;
    if(retry>10){ // リトライ制限 10回 1sec
        clearInterval(interval); }
    let target=document.getElementById('cke_1_contents'); // 監視 target
    if(target){
        clearInterval(interval);
        main(); }}


function main(){
    let target=document.getElementById('cke_1_contents'); // 監視 target
    let monitor=new MutationObserver(catch_publish);
    monitor.observe(target, {childList: true}); // 通常・HTML編集切換による発火不能を防ぐ

    catch_publish();

    function catch_publish(){

        panel_add();

        let all_check=document.querySelector('#allFlg');
        if(all_check){
            report();
            all_check.onclick=function(event){
                if(report()==-1){ // HTML表示でチェック不可能
                    event.preventDefault(); }
                else{ // 通常表示でのみチェック可能
                    if(report()==0){
                        insert_ptag(1);
                        report(); }
                    else if(report()==1){
                        insert_ptag(0);
                        report(); }}}}


        function report(){
            let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
            if(editor_iframe){ // iframe読込みが実行条件
                let iframe_doc=editor_iframe.contentWindow.document;
                if(iframe_doc){
                    let iframe_body=iframe_doc.querySelector('body.cke_editable');
                    if(iframe_body){
                        let pts=iframe_body.querySelector('.pts');
                        if(pts){
                            all_check.checked=true;
                            return 1; }
                        else{
                            all_check.checked=false;
                            return 0; }}}}
            else{
                return -1; }}


        function insert_ptag(n){
            let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
            if(editor_iframe){ // iframe読込みが実行条件
                let iframe_doc=editor_iframe.contentWindow.document;
                if(iframe_doc){
                    let iframe_body=iframe_doc.querySelector('body.cke_editable');
                    if(iframe_body){

                        if(n==0){
                            let pts=iframe_body.querySelector('.pts');
                            if(pts){
                                pts.remove(); }}

                        if(n==1){
                            // style_ptext を編集して SNSボタンの非表示内容を変更出来ます ⭕
                            let style_ptext=
                                '<style class="pts" type="text/css">'+
                                '[data-uranus-component="entryAction"], '+
                                '[data-uranus-component="feedbacks"], '+

                                // 以下は 新タイプスキン対応で追加
                                '[data-uranus-component="entryShare"], '+
                                '[data-uranus-component="mainWidget"], '+

                                // 以下は 旧タイプスキン対応で追加(対応不要なら削除可)
                                '.articleExLinkArea, '+
                                '.reblogArea, '+
                                '.commentArea, '+
                                '.pagingArea:nth-of-type(3), '+

                                // 以下は レトロタイプスキン対応で追加(対応不要なら削除可)
                                '#exLinkBtn, '+
                                '#comment_module, '+

                                // 以下は スマホスキン対応
                                '._2UJLz0lB { display: none; }'+
                                '</style>';

                            iframe_body.insertAdjacentHTML('beforeend', style_ptext); } // style.ptsを追加

                    }}}} // insert_ptag(n)


        function panel_add(){
            let l_comm=document.querySelector('.l-communication');
            let p_comm=document.querySelector('.l-communication div:first-child');
            let i_input=p_comm.querySelector('#allFlg');

            if(!i_input){
                let add_comm=p_comm.cloneNode(true);
                let c_title=add_comm.querySelector('h2');
                c_title.textContent='全SNS機能';
                let c_input=add_comm.querySelector('#commentFlg');
                c_input.setAttribute('name', 'allFlg');
                c_input.setAttribute('id', 'allFlg');
                let allFlg_text=add_comm.querySelector('.spui-Checkbox-text');
                allFlg_text.textContent='Close';

                l_comm.insertBefore(add_comm, p_comm); }


            let commFlg_text=l_comm.querySelector('#commentFlg ~ .spui-Checkbox-text');
            commFlg_text.textContent='Close';

            let reblogFlg_text=l_comm.querySelector('#reblogFlg ~ .spui-Checkbox-text');
            reblogFlg_text.textContent='Close';

        } // panel_add()


        // 以下の style_text を編集すると 常設 styleタグ内容を変更出来ます ⭕
        let style_text=
            '<style class="asa" type="text/css">'+
            '@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"); '+
            '</style>';

        let submitButton=document.querySelectorAll('.js-submitButton');
        submitButton[0].addEventListener('mousedown', insert_tag , false);
        submitButton[1].addEventListener('mousedown', insert_tag , false);

        function insert_tag(e){
            let editor_iframe=document.querySelector('.cke_wysiwyg_frame');
            if(editor_iframe){ // iframe読込みが実行条件
                let iframe_doc=editor_iframe.contentWindow.document;
                if(iframe_doc){
                    let iframe_body=iframe_doc.querySelector('body.cke_editable');

                    if(iframe_body.querySelector('.asa')){
                        iframe_body.querySelector('.asa').remove(); } // 既に書込まれていたら削除して更新する
                    iframe_body.insertAdjacentHTML('beforeend', style_text); }} // 記事末尾に style.asaを追加
            else{
                e.stopImmediatePropagation();
                alert(
                    " ⛔ Auto Style Attach\n"+
                    "   常設 styleタグ の書込み・更新のため\n"+
                    "   通常表示画面から投稿をしてください"); }}

    } // catch_publish()

} // main()



 

 

 

「Auto Style Attach ⭐」最新版について 

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

 

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