見た目が読み易さを損なうスキン
ブログ本文の文字が読み難くなる様なスキンは、デザイン上で綺麗でも余り好ましいとは思いません。 特に、私が好ましいと思っているブログが、残念なことに「文字が読み難いスキン」の場合は、読みに行く度に目が疲れてしまいます。
下は、そんなスキンの例で「クロネコ」という公式スキンです。
このスキンは人気があり良く使われていますが、本文部分の背景が半透過で、ページ全体の絵が本文文字と重なります。 透過度が「0.6」で、文字が読み難いのです。
ウインドウ幅を拡げると背景画が左右に逃げ、文字と重ならなくなりますが、いつもウインドウを横いっぱいに拡げているわけではありませんし。
この問題については、以前に以下の記事を書きました。 デザインが気に入って透過背景のスキンを使う場合に、透過度を変更して使う方法をまとめたものです。
でも、スキンの選択はユーザーの自由で、読者側が注文を付けられません。 もし、気に入ったブログがこの種のスキンを使っていて読み難い場合は、読者側（読む側）で「ユーザースタイルシート」の機能を使って改善すれば、それで改善できます。
「Stylus」の出番
ブログページのデザインは、「ブログスキン」という「スタイルシート（CSS）」で指定されています。「ブログスキン」を変更すれば、服を着替える様にブログデザインを変更できる事は、殆どの方が理解されていると思います。
一方、「ユーザースタイルシート」は、ページを閲覧する側で、更に上に服を着せる様なもので、閲覧する側で自由にページデザインを変える事ができます。 これを可能にするのが「Stylus」というブラウザ拡張機能です。「Stylus」に登録した「スタイルシート（CSS）」は見る側だけで機能するサングラスの様なもので、他の読者やブログ主には全く影響を与えません。
透過タイプのスキンを読み易くする「Ameblo Readable」
下は本文部が透過する公式スキンです。 他にも僅かに透過するものはある様ですが、読み難いほどではないので、下表のスキンを対象にしました。
「Ameblo Readable」は、これらのスキンで本文部分の背景だけを、非透過に変更する「CSS」です。 これを「Stylus」に登録しておくと、これらのスキンのブログを表示した時に、自動的に背景透過が抑制されます。
以下は、「Ameblo Readable」が変更する公式スキンの名前の一覧です。
| 貯金大好き | ローソク足 | マークシート |
| デスクワーク | インテリア | わくわくお弁当 |
| あつあつラーメン | 森の中 | イースターのたまご |
| GALAXY | 金色の秋 | クロネコ |
| コーラルリーフ | ほかほかご飯 | 野菜＆フルーツ |
| 梅の花 ピンク | 富嶽三十六景神奈川沖浪裏 | PASTEL BANANA |
| Balloon | ANGLE | ビーチサンセット |
このページの最初の「クロネコ」のページの場合は、下の様に読み易くなります。
◎ 非透過に変更するのは、「記事本文」「サイドバー」の部分に限っています。
◎「Ameblo Readable」をON/OFFして、非透過を好きな時にON/OFFできます。
◎ 非透過で「255,255,255,1」となる場合は「252,252,252,1」にしています。
「Ameblo Readable」を利用するには
拡張機能「Stylus」を導入
「Ameblo Readable」は Chrome / Edge / Firefox など、拡張機能「Stylus」が対応する全てのブラウザで利用可能です。
● 先ず最初に、使用されているブラウザに拡張機能「Stylus」を導入します。 導入する手順は、以下のリンクを参照ください。 （EdgeはChrome版が使えます）
「Ameblo Readable」のコードを登録
●「Stylus」の管理画面を開き、左メニューの ❶「スタイルを作成」を押します。 右横の「Usercssとして」はチェックを入れず、OFFにしておきます。
●「スタイルを追加」の画面が開きます。 これはスタイルの編集画面です。
● 最初の ❷「スタイル名の入力枠」に「Ameblo Readable」と記入します。 ただしスタイル名は任意でよく、必要なら後で変更する事も出来ます。
● 下の「Ameblo Readable」のコードをコピーします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
〔 Ameblo Readable 〕 ver. 2021.06.01
/* Ameblo Readable ver. 2021.06.01 */
/* 貯金大好き */
[data-skin-code="ur_std_pf_saving_money"] .skin-blogBodyInner {
background: rgba(252,252,252,1); }
/* ローソク足 */
[data-skin-code="ur_std_pf_candlestick"] .skin-blogBodyInner {
background: rgba(0,0,0,1); }
/* マークシート */
[data-skin-code="ur_std_pf_marksheet"] .skin-blogMainInner {
background: rgba(252,252,252,1); }
[data-skin-code="ur_std_pf_marksheet"] .skin-widget {
background: rgba(252,252,252,1); }
/* デスクワーク */
[data-skin-code="ur_std_pf_desk_job"] .skin-blogBodyInner {
background: rgba(252,252,252,1); }
/* インテリア */
[data-skin-code="ur_std_pf_interia"] .skin-blogBodyInner {
background: rgba(39,41,54,1); }
/* わくわくお弁当 */
[data-skin-code="ur_tile_pf_wakuwaku_lunchbox"] .skin-blogBodyInner {
background: rgba(255,253,250,1); }
/* あつあつラーメン */
[data-skin-code="ur_tile_pf_ramen"] .skin-blogBodyInner {
background: rgba(0,0,0,1); }
/* 森の中 */
[data-skin-code="ur_std_pf_forest"] .skin-blogBodyInner {
background: rgba(252,252,252,1); }
/* イースターのたまご */
[data-skin-code="ur_tile_pf_easter_eggs"] .skin-blogBodyInner {
background: rgba(252,252,252,1); }
/* GALAXY */
[data-skin-code="ur_list_pf_galaxy"] .skin-blogMainInner {
background: rgba(4,10,22,1); }
[data-skin-code="ur_list_pf_galaxy"] .skin-widget {
background: rgba(4,10,22,1); }
/* 金色の秋 */
[data-skin-code="ur_list_pf_gold_autumn"] .skin-blogBodyInner {
background: rgba(255,238,222,1); }
/* クロネコ */
[data-skin-code="ur_std_pf_blackcat"] .skin-blogMainInner {
background: rgba(252,252,252,1); }
[data-skin-code="ur_std_pf_blackcat"] .skin-blogSubAInner,
[data-skin-code="ur_std_pf_blackcat"] .skin-blogSubBInner {
background: rgba(252,252,252,1); }
/* コーラルリーフ */
[data-skin-code="ur_std_pf_coralreef"] .skin-blogBodyInner {
background: rgba(21,36,56,1); }
/* ほかほかご飯 */
[data-skin-code="ur_tile_pf_whiterice"] .skin-blogBodyInner {
background: rgba(8,4,4,1); }
/* 野菜＆フルーツ */
[data-skin-code="ur_std_pf_vegetables_fruit"] .skin-blogMainInner {
background: rgba(252,252,252,1); }
[data-skin-code="ur_std_pf_vegetables_fruit"] .skin-widget {
background: rgba(252,252,252,1); }
/* 梅の花 ピンク */
[data-skin-code="ur_tile_pf_ume_flower"] .skin-blogBodyInner {
background: rgba(252, 252, 252, 1); }
/* 富嶽三十六景 神奈川沖浪裏 */
[data-skin-code="ur_list_pf_fugaku33_kanagawa"] .skin-blogBodyInner {
background: rgba(252,252,252,1); }
/* PASTEL BANANA */
[data-skin-code="ur_std_pf_pastelbanana"] .skin-bgMain {
background: rgba(252,252,252,1); }
[data-skin-code="ur_std_pf_pastelbanana"] .skin-widget {
background: rgba(252,252,252,1); }
/* Balloon */
[data-skin-code="ur_tile_pf_balloon"] .skin-bgMain {
background: rgba(252, 252, 252, 1); }
[data-skin-code="ur_tile_pf_balloon"] .skin-widget {
background-color: rgba(252, 252, 252, 1); }
/* ANGLE */
[data-skin-code="ur_list_pf_angle"] .skin-bgMain {
background: rgba(252,252,252,1); }
[data-skin-code="ur_list_pf_angle"] .skin-blogSubAInner,
[data-skin-code="ur_list_pf_angle"] .skin-blogSubBInner {
background: rgba(252,252,252,1); }
/* ビーチサンセット */
[data-skin-code="ur_tile_pf_palmtree"] .skin-blogBody {
background: rgba(252,252,252,1); }
●「Stylus」の画面に戻り、❸「Code 1 の編集枠」の中を右クリックして、メニューの「貼り付け」を押します。
● コードが ❸ 枠内に書き込まれたら、 ❹「適用先」の「＋」のボタンを押します。
● 適用先の入力枠が1列表示されます。
● ❺ のプルダウンメニューから「次で始まるURL」を選択します。
● ❻「適用先のURL」の枠内に、以下を記入します。
● 最後に「保存」ボタンを押して登録します。
以上で「Ameblo Readable」が「Stylus」に登録されます。 対象のスキンを使用したブログページを開くと、本文の背景が非透過になった状態で開かれます。