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」の呼込み指定コードを、記事本文に書き込む事です。
上はこれまで書き込んで来たコードですが、今春からアメーバブログが「MS Pゴシック」を卒業してくれたので、3行目の「Meiryo」の指定は不要になりました。
また、2行目の「Font Awesome」の呼込みコードで、現在のフォントは ver. 6 以上に更新されています。 新しいフォントで使いたいデザインもあり、もちろん過去のフォントは継承されるので、最新の呼込みコードに更新しました。
このツールは、「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()
編集画面終了時の処理コードを修正しました。 これに伴い、上記コードはバージョン数を更新しています。
〔 Auto Style Attach ⭐ 〕 ver. 1.2 ➔ ver. 1.3
「Auto Style Attach ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Auto Style Attach ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。