Webフォント の使いどころ
記事内にリンクマーク「 」などを表示するには Webフォントが近道です。 昨今はSVG描画が身近になったものの、Webフォントは記事の文字数が節約でき、記事に書き込むのも簡単です。 また、以前のページの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」の呼込み指定コードを、記事本文の末尾に書き込む事です。
2023年5月現在で、以下のコードを書き込みます。
このツールは、「class名：asa」で記入した「styleタグ」を管理し、旧い記事を再編集すれば自動的に更新します。 更新をしなくても、昔の記事は別に困りませんが。
参考
Webフォント「Font Awesome」で、利用可能なフォントデザインは、何千種とあります。 その中で、求めたデザインの絵文字があるかどうかは、以下のページで自分で検索して探す必要があります。（以下は ver. 6 の無償版です）
欲しいデザインの文字を英語で検索する必要があり、少し要領が要ります。 実際に「Font Awesome」をブログ記事中に書き込む方法は、以下のページに纏めているので参考にしてください。
「Auto Style Attach ⭐」 ver. 1.4 の更新内容
2023年6月上旬に、アメブロのブログ編集画面（PC版）のHTMLの更新があり、このツールの設定ボタンが正常に表示されなくなりました。
下は、「Ameblo Writer Compact」のアレンジ下の編集画面ですが、下部のSNSボタン等がレイアウト崩れを生じています。
このツールは、デフォルトの「コメント」「リブログ」「アメンバー公開」のボタンに、「全SNS機能」の独自のボタンを追加していますが、そのアレンジが各所で無効になった状態です。 これを元通りに修正しました。 デザイン上の問題なので、基本コードに大きな変更はありません。
下は、元のデザインに修復した状態です。
「Auto Style Attach ⭐」を利用するには
このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Auto Style Attach ⭐ 〕 ver. 1.4
// ==UserScript==
// @name Auto Style Attach ⭐
// @namespace http://tampermonkey.net/
// @version 1.4
// @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';
let ame_comm=l_comm.querySelector('#amemberFlg').closest('.p-communication');
ame_comm.querySelector('h2').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 ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Auto Style Attach ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
