スキンの背景画像の設定を調べる
スタブロのコメント欄に書き込まれるユーザーの要望に、「ヘッダー画像を変えられる様にして欲しい」というのがありました。 CSS編集用デザインのスキンなら、「ヘッダー画像」「ページ背景画像」などはスキンに直接CSSを書き込んで指定できますが、一般の公式スキンの場合は、「フリースペース」にCSSを「styleタグ」の形で書き込んで、アレンジを実現する必要があります。
そこで問題になるのは、ユーザー自身のスキルです。 DevToolsの使い方を少し覚え、グラフィックアプリで必要なサイズの背景画像を作るといった事が、最低限出来ないと、難しいと思われます。
それでも、画像さえ用意すれば背景画像を差替えできるツールは作れないかと考えました。 そもそも「Tampermonkey」とツールのインストールも、難しいかも知れないし。 でもまあ、やるだけやってみます。 ツールで敷居をできるだけ下げれば、中には「できた!」というユーザーが現れるかも知れませんから。
少し考察
殆どのユーザーは、最初は既成デザインの公式スキンを使ってブログを始めます。 公式スキンの選択や変更については、簡単に出来る良いシステムが提供されています。
しかしその後に、スキンの一部を改造したいと言う考えは、多くのユーザーが持つものでしょう。 その中でも「ヘッダー背景画像」「ブログ全体の背景画像」等の変更は、CSSやHTMLコードに慣れないユーザーには、とても難しく感じると思います。
アメブロがこういった背景画像を自由に変更できるタイプのスキンとシステムを提供すれば良いのですが、それは「素」のデザインに近くなり、結局はCSS編集用デザインのスキンに近いものになります。
公式スキンは、ページ全体に総合的なデザインが施されています。 ユーザーにより異なるでしょうが、使っているスキンの細部を気に入っている場合があります。 それを残した上で「ヘッダー画像」を変えたい場合は、「ヘッダー画像」を変更が出来るスキンを示されても、納得しないでしょう。
そう考えると、公式スキンを全て「CSS編集」できる形で提供すれば良いということになります。 まあ、技術的には簡単でも、フォローの問題を考えてか、アメブロはこの方式を採らなかった様です。 アメブロ以外のブログでは、ほぼ編集可能になっているブログシステムもありますが。
そして、たとえ全スキンが編集可能だとしても、ユーザーはCSSやHTMLの編集なしで、「ヘッダー画像」の変更できる機能を求めるでしょう。 それに応えるには、更に大変なスキンとシステム構成の変更が求められます。 まあ、これは無理でしょうね。 やはり、差替えアレンジを簡単にするツールしかない様な気がして来ました。
「背景画像」の設定されている場所を調べる
背景画像が設定されている要素は、スキンによって何種類かのパターンがあります。 これを自動的に調べる事は困難で、ユーザー自らが調べるツールを作りました。 背景画像が設定された要素を調べ、定番の要素なら簡単にチェック出来る様にしました。
現在、公式スキンは「新タイプ 141」「旧タイプ 157」ありますが、今回はページャーの大きな「新タイプ」のスキンの調査で力尽きました。 とりあえず、この「新タイプ」を対象に、制作を進める事にします。
調査ツールで背景画像が設定されている要素を調べ、それに画像を設定するコードを作り、仮差替えで背景画像の配置やサイズの調整をし、更にその調整値をコードに出力し、最終的に「フリースペース」にコード登録という流れになります。
気が遠くなる様な長い道のりですが、やってみないと判りません。 失敗して、どうにもならなくても、それが経験になるというものです。
調査ツール「Skin Coordinate」の操作方法
「Skin Coordinate」は「ブログページ」または「管理画面 / デザインの変更」の「ブログデザインの表示確認」画面で、実行可能です。「Tampermonkey」にこのツールをインストールしてONにしておくと、
●「Alt + F6」でツールが起動して「コントロールパネル」が表示されます。
● もう一度「Alt + F6」を押すと「コントロールパネル」が消えます。 このツールの操作によってページの背景画像の表示が変化しますが、これは一時的で、ページをリロードすると元に戻ります。
以下、スタブロのページを例にしてテストします。
現在のコントロールは、以下ボタンが並びます。 下側はボタンを押した状態です。
このボタンを押すと、以下の ❶～❺ の各要素に設定された背景画像・背景色が非表示（透過）になります。また、❻ の html に設定された背景画像・背景色は、特別な白黒の格子のマスク画像に変ります。
| ボタン名 | 背景画像が設定された要素 |
| ❶ header 1 | .skin-bgHeader |
| ❷ body 1 | .skin-page |
| ❸ body 2 | .skin-page::before |
| ❹ body 3 | .skin-blogBody |
| ❺ body | body |
| ❻ html | html |
最初に「❻ html」を押します
操作の一番最初は「❻ html」を押します。 ONの状態は、ボタンに枠線が表示されますが、これで背景の一番底の「html」がマスク画像になります。 その上の他の要素が非表示になればマスク画像が露出して、背景画像・背景色の重なり方が判ります。
左側の ❶ → ❺ の順にチェックして行く
次は、左側の「❶ header 1」を押します。 これは「ヘッダー背景画像」のチェックです。「header 2」も予定していたのですが、「新タイプ」は上表の要素に統一されている様で、「header 2」は不要でした。
〔追記〕2020.06.03
「headet 2」のタイプを追加しました。
スタブロのスキンは、❶ のONで「ヘッダー画像」が非表示になり、下図の様に底の「html」のマスク画像が露出しました。
これで、「ヘッダー画像」が「.skin-bgHeader」に設定されている事が判りました。
続いて、❷ → ❸ → を ON/OFFしながら進むと、❷ ❸ では変化がなく、❹ のONで本文の左右の部分が抜けて、底が露出しました。
これで ❹「.skin-blogBody」に、下部の背景色（白）の設定がある事が判ります。
❺ を ON/OFFしても変化はなく、最後に確認のために ❻ をOFFにすると、下の様になりました。 つまり、htmlにも（白）の背景色の設定がある事が判ります。
以上のチェックから、❶ の「.skin-bgHeader」の背景画像を差し替えれば、「ヘッダー画像」を変更できる事が確認できたわけです。
背景画像・背景色の設定はスキンによって様々
上のスタブロのスキンは素直な構成ですが、「新タイプ」の半分以上は同様にシンプルです。 このツールを使うことで、簡単に背景画像・背景色が設定されている要素が判ります。
下は「ブログデザインの表示確認」の画面で、公式スキンをテスト設定した状態で、この「Skin Coordinate」を起動しています。
このスキンは、ブログ背景全体が大きな固定した画像で、本文部分が半透過で背景画像上をスクロールするタイプです。 このタイプの多くは ❸「body 2」に背景画像が設定されているので、❸ を押すとページ全体の背景が無くなります。
いずれにせよ、殆どの公式スキンは ❶～❻ のどれかに背景画像・背景色が設定され、ブログ画面がデザインされています。
但し、以下のスキンに関しては設定要素が例外的で、このツールは非対応です。 これらのスキンをアレンジする事は可能ですが、他のスキンに変更した上で、好みの背景画像を設定した方が楽です。
| 背景の設定要素が特殊で非対応のスキン名 |
| アメコミ |
| Sweets Factory |
| シンカイゾク |
| FASHION DOG |
| green wood |
| さくら舞う |
| 猫と魔法のランプ |
| 夜空 |
| Natural |
〔追記〕2020.06.03
上記の消し線を付けたスキンに関しては、「headre 2」の追加で対応しました。
今後の方針
背景画像・背景色を設定した要素を調べる部分は出来たと思います。 次はそれらの要素に、こちらで用意した画像を差替えて設定するインターフェイスが必要です。
「Skin Coordinate」のコード
以下のスクリプトコードは Chrome / 新Edgeで動作を確認しています。 ツールは未だ開発の最初の段階です。
◎ ページャーの細い「旧タイプ」のスキンでは、正しく動作しません。
◎ テスト段階で、編集画面などの不適切な画面でも起動するので、配慮ください。
以下のコードを「Tampermonkey」に登録する事で、ページ背景設定の調査ツールとして動作させる事が出来ます。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Skin Coordinate 〕ver. 0.1
// ==UserScript==
// @name Skin Coordinate
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 「ヘッダー背景画像」のチェック
// @author Ameba Blog User
// @match https://ameblo.jp/*
// @match https://blog.ameba.jp/*
// @noframes
// @grant none
// ==/UserScript==
let task=0;
let h1=0;
let b1=0;
let b2=0;
let b3=0;
let bo=0;
let ht=0;
let target=document.querySelector('head');
let monitor=new MutationObserver(catch_key);
monitor.observe(target, { childList: true });
catch_key();
function catch_key(){
let sp=document.querySelector('.skin-page');
if(sp){ // ページ表示エリアの取得が条件
document.addEventListener("keydown", check_key);
function check_key(event){
let gate=-1;
if(event.altKey==true){
if(event.keyCode==117){
event.preventDefault(); gate=1; }} // ショートカット「Alt＋F6」
if(gate==1){
event.stopImmediatePropagation();
event.preventDefault();
act(); }} // ツールの実効関数
}} // catch_key
/*
panel_disp();
coordinate();
*/
function act(){
if(task==0){
task=1;
panel_disp();
coordinate(); }
else if(task==1){
task=0;
panel_remove(); }}
function panel_disp(){
let panel=document.createElement('div');
panel.setAttribute('id', 'skin_panel');
panel.innerHTML=
'<input id="h1_type" type="submit" value="header 1">'+
'<input id="b1_type" type="submit" value="body 1">'+
'<input id="b2_type" type="submit" value="body 2">'+
'<input id="b3_type" type="submit" value="body 3">'+
'<input id="body_type" type="submit" value="body">'+
'<input id="html_type" type="submit" value="html">';
let css=
'#skin_panel { position: fixed; bottom: 40px; left: calc(50% - 300px); '+
'width: 600px; padding: 15px 0 15px 20px; background: #005f56; '+
'border: 2px solid #fff; border-radius: 4px; z-index: 10; }'+
'#skin_panel input { font: normal 16px meiryo; color: #000; '+
'margin-right: 20px; padding: 4px 8px 2px; }';
let style=document.createElement('style');
style.innerHTML=css;
panel.appendChild(style);
let skin_panel=document.querySelector('#skin_panel');
if(!skin_panel){
document.querySelector('body').appendChild(panel); }} // panel_disp()
function panel_remove(){
let skin_panel=document.querySelector('#skin_panel');
skin_panel.remove(); }
function coordinate(){
let h1_type=document.querySelector('#h1_type');
let b1_type=document.querySelector('#b1_type');
let b2_type=document.querySelector('#b2_type');
let b3_type=document.querySelector('#b3_type');
let body_type=document.querySelector('#body_type');
let html_type=document.querySelector('#html_type');
h1_type.onclick=function(){
if(h1==0){
h1=1;
h1_type.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
h1_show(); }
else{
h1=0;
h1_type.style.boxShadow='none';
h1_hide(); }}
b1_type.onclick=function(){
if(b1==0){
b1=1;
b1_type.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
b1_show(); }
else{
b1=0;
b1_type.style.boxShadow='none';
b1_hide(); }}
b2_type.onclick=function(){
if(b2==0){
b2=1;
b2_type.style.boxShadow='0 0 0 2px red, 0 0 0 4px #fff';
b2_show(); }
else{
b2=0;
b2_type.style.boxShadow='none';
b2_hide(); }}
b3_type.onclick=function(){
if(b3==0){
b3=1;
b3_type.style.boxShadow='0 0 0 2px #2196f3, 0 0 0 4px #fff';
b3_show(); }
else{
b3=0;
b3_type.style.boxShadow='none';
b3_hide(); }}
body_type.onclick=function(){
if(bo==0){
bo=1;
body_type.style.boxShadow='0 0 0 2px #0b8, 0 0 0 4px #fff';
bo_show(); }
else{
bo=0;
body_type.style.boxShadow='none';
bo_hide(); }}
html_type.onclick=function(){
if(ht==0){
ht=1;
html_type.style.boxShadow='0 0 0 2px #000, 0 0 0 4px #fff';
ht_show(); }
else{
ht=0;
html_type.style.boxShadow='none';
ht_hide(); }}
} // coordinate()
function h1_show(){
let sp=document.querySelector('.skin-page');
let css='.skin-bgHeader { background: transparent; '+
'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }';
let style=document.createElement('style');
style.setAttribute('id', 'skin_style_h1');
style.innerHTML=css;
if(!document.querySelector('#skin_style_h1')){
sp.appendChild(style); }}
function h1_hide(){
if(document.querySelector('#skin_style_h1')){
document.querySelector('#skin_style_h1').remove();}}
function b1_show(){
let sp=document.querySelector('.skin-page');
let css='.skin-page { background: transparent; '+
'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }';
let style=document.createElement('style');
style.setAttribute('id', 'skin_style_b1');
style.innerHTML=css;
if(!document.querySelector('#skin_style_b1')){
sp.appendChild(style); }}
function b1_hide(){
if(document.querySelector('#skin_style_b1')){
document.querySelector('#skin_style_b1').remove(); }}
function b2_show(){
let sp=document.querySelector('.skin-page');
let css='.skin-page::before { background: transparent; '+
'box-shadow: red 0 0 0 10px inset, #fff 0 0 0 12px inset; }';
let style=document.createElement('style');
style.setAttribute('id', 'skin_style_b2');
style.innerHTML=css;
if(!document.querySelector('#skin_style_b2')){
sp.appendChild(style); }}
function b2_hide(){
if(document.querySelector('#skin_style_b2')){
document.querySelector('#skin_style_b2').remove(); }}
function b3_show(){
let sp=document.querySelector('.skin-page');
let css='.skin-blogBody { background: transparent; '+
'box-shadow: #2196f3 0 0 0 4px inset, #fff 0 0 0 6px inset; }';
let style=document.createElement('style');
style.setAttribute('id', 'skin_style_b3');
style.innerHTML=css;
if(!document.querySelector('#skin_style_b3')){
sp.appendChild(style); }}
function b3_hide(){
if(document.querySelector('#skin_style_b3')){
document.querySelector('#skin_style_b3').remove(); }}
function bo_show(){
let sp=document.querySelector('.skin-page');
let css='body { background: transparent; '+
'box-shadow: #0b8 0 0 0 10px inset, #fff 0 0 0 12px inset; }';
let style=document.createElement('style');
style.setAttribute('id', 'skin_style_bo');
style.innerHTML=css;
if(!document.querySelector('#skin_style_bo')){
sp.appendChild(style); }}
function bo_hide(){
if(document.querySelector('#skin_style_bo')){
document.querySelector('#skin_style_bo').remove(); }}
function ht_show(){
let sp=document.querySelector('.skin-page');
let css='html { background: #fff; '+
'background-image: linear-gradient(45deg, #aaa 25%, transparent 25%, '+
'transparent 75%, #aaa 75%, #aaa), '+
'linear-gradient(-45deg, #aaa 25%, transparent 25%, transparent 75%, '+
'#aaa 75%, #aaa); background-size: 10px 10px; }';
let style=document.createElement('style');
style.setAttribute('id', 'skin_style_ht');
style.innerHTML=css;
if(!document.querySelector('#skin_style_ht')){
sp.appendChild(style); }}
function ht_hide(){
if(document.querySelector('#skin_style_ht')){
document.querySelector('#skin_style_ht').remove(); }}
「Skin Coordinate」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Skin Coordinate」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
