Webフォント の使いどころ

記事内に気の利いたマーク「  」などを表示したい時に、Webフォントが必要です。 昨今はSVG描画が身近になり少し後景化したものの、記事の文字数が節約できて捨て難いものです。 また、新しいページはSVGに置換えても、以前のページのWebフォント表示を確保するため、呼込みの設定が外せないという事も生じて来ます。

 

私の場合は、スマホ画面でも「Font Awesome」のフォントを表示させたいので、記事の末尾に、呼込み指定の「styleタグ」を書き込んでいます。 これは数行のコードですが、記事ごとに書込むのは手間なので、「Auto Style Attach ⭐」というツールに、その作業をさせています。

 

一般的には、「フリースペース」「フリープラグイン」等に同様の「styleタグ」を書き込む事でWebフォントが使えますが、スマホ表示ではWebフォントが非表示になります。「Auto Style Attach ⭐」はスマホ記事にも「Font Awesome」を表示させることができます。

 

 

 

「Auto Style Attach ⭐」の仕事と更新 

 

「SNSボタン」の非表示機能 

このツールは、PCブログ画面の「SNSボタン」を記事単位で非表示にするアルバイトもします。 もっとも、アメーバアプリで参照した場合は、適用したCSSが無効で、「いいね」を押せてしまう残念仕様ですけど。^^;

 

この「SNSボタン」の機能に関しては、以下のページで説明しています。

 

 

 

ブログページのWebフォント設定 

さて、このツールの主要な仕事は、先に書いた「Font Awesome」の呼込み指定コードを、記事本文に書き込む事です。

 

<style class="asa" type="text/css">
@import url("https://use.fontawesome.com/releases/v5.8.2/css/all.css");
body { font-family: Meiryo,sans-serif; }
</style>

 

上はこれまで書き込んで来たコードですが、今春からアメーバブログが「MS Pゴシック」を卒業してくれたので、3行目の「Meiryo」の指定は不要になりました。

 

また、2行目の「Font Awesome」の呼込みコードで、現在のフォントは ver. 6 以上に更新されています。 新しいフォントで使いたいデザインもあり、もちろん過去のフォントは継承されるので、最新の呼込みコードに更新しました。

 

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

 

このツールは、「class名:asa」で記入した「styleタグ」を管理していて、旧い記事を再編集すれば、自動的に更新します。 更新をしなくても、昔の記事は別に困りませんが。

 

下は、新しい「Auto Style Attach」ver. 1.2 が書き込んだ「styleタグ」です。

 

 

 

 

参考 

Webフォント「Font Awesome」で、利用可能なフォントデザインは、何千種とあります。 その中で、求めたデザインの絵文字があるかどうかは、以下のページで自分で検索して探す必要があります。(以下は ver. 6.1.2 の無償版です)

 

 

下は、絵文字の検索画面です。

 

 

欲しいデザインの文字を、英語で上手く検索する必要があり、そこが要領が要るところです。

 

実際に「Font Awesome」をブログ記事中に書き込む方法は、次のページに纏めますので参考にしてください。

 

 

 

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

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

 

❶「Tampermonkey」を導入します

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

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

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

 

 

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

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

 

 

 

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

 

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

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

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

 

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

 

 

〔 Auto Style Attach ⭐ 〕 ver. 1.3

 

// ==UserScript==
// @name        Auto Style Attach ⭐
// @namespace  http://tampermonkey.net/
// @version      1.3
// @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 c_label=add_comm.querySelector('label');
                c_label.setAttribute('for', 'allFlg');
                c_label.textContent='Close';

                l_comm.insertBefore(add_comm, p_comm); }

            let label_commFlg=l_comm.querySelector('label[for="commentFlg"]');
            label_commFlg.textContent='Close';

            let label_reblogFlg=l_comm.querySelector('label[for="reblogFlg"]');
            label_reblogFlg.textContent='Close';

            let ame_comm=document.querySelector('#amemberFlg').closest('.p-communication');
            let ame_title=ame_comm.querySelector('h2');
            ame_title.textContent='公開';

        } // 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.1.1/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()



 

 

〔追記〕2023.02.17
編集画面終了時の処理コードを修正しました。 これに伴い、上記コードはバージョン数を更新しています。
〔 Auto Style Attach ⭐ 〕 ver. 1.2 ➔ ver. 1.3

 

 

 

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

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

 

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