透過タイプのスキンを読み易くカスタマイズする提案（1）

透過タイプのスキンは美しく魅力があるが

「透過タイプ」のスキンが公式スキンとして多数リリースされています。私は「透過タイプ」と言ってますが、ページ全体の背景画像はスクロールしない固定で、ヘッダー部、本文、サイドメニュー等の表示要素は「背景が透明もしくは半透明」で、これらは普通にスクロールするタイプです。デザインのトリッキーさや透明感が好まれ、実際に使っておられる方を良く見ます。

このタイプを調べて見ると、公式スキン288の中で、約20が「透過タイプ」でした。

下が「透過タイプ」の公式スキンです。（見落としがあるかも知れませんが）

「透過タイプ」は透明感のあるページの印象は良いのですが、透明度が強くて文字が背景画像にかかると読み難くなるものがあります。また、マウスが触れると「淡く霞む」デザインで写真が見にくくなる点や、本文フォントが「MS Pゴシック」で線が細く見づらい点は、アメブロの全スキンに共通した問題です。

これらはカスタマイズで改善できます。「透過タイプ」のスキンで、デザインは気に入ってるが読み難さが気になるという場合は、このぺージのカスタマイズ方法をお勧めします。

透過タイプのカスタマイズ方針

◎ ページのフォント指定を「Meiryo」優先にする。

◎ 記事本文・サイドメニューの背景の透明度を1に近付け、文字を読み易くする。

◎ 本文中の画像のマウスフォバー時に「opacity」変化をしない様に改める。

実際にカスタマイズした様子

スキンを私のページに適用して、コードを確認しました。サンプルにした「透過タイプ」スキンは公式スキンの「クロネコ」です。

◎デフォルト

◎カスタマイズ

デフォルトの本文・サイドメニューの背景は白の透過色で、コードは以下です。

　　background: rgba(255,255,255,0.6);

カスタマイズ側の本文は、読み易いが透過の良さも残す背景色の値を探しました。

　　background: rgba(245,236,215,0.95);

カスタマイズ側のサイドメニューは、透明感を残した背景色の値です。

　　background: rgba(247,240,225,0.85);

カスタマイズの手順

「透過タイプ」の公式スキンはCSS編集ができませんから、フリープラグイン機能を使ってアレンジコードを適用させます。

ブログの「管理メニュー」→「設定・管理」→「プラグインの追加」と進みます。

「プラグインの追加」の画面が出たら、下図の ❶「フリープラグイン」のタブを押して、❷ の編集枠を表示させます。

❷ 編集枠に以下のアレンジコードをコピーペーストします。

<style>body{font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;}</style>
<style>.detailOn:hover{opacity:1;}</style>
<style>.skin-blogMainInner{background:rgba(245,236,215,0.95);}</style>
<style>.skin-blogSubAInner,.skin-blogSubBInner{background:rgba(247,240,225,0.85);}</style>

コードが正しくコピー出来たら、❸「保存」を押して、ブログページに戻ります。

ブログページにコードが反映されたか確認します。一度ページをリロードしないとアレンジが反映しない場合があります。

〔注意〕

◎ 上記は「クロネコ」にのみ適したコードです。他のスキンを利用している場合は、3行目・4行目の透過背景の設定が無効または不適切になる可能性があります。他のスキンのカスタマイズに関しては提案（2）のページを参照ください。

◎ <style>～</style>の間に「改行」や「空白文字」が入ると、コードが正しく動作しない場合があります。とりわけコードを不用意に改行をしない注意が要ります。

アレンジコードの内容

上記コードは<style>～</style>が4行あり、各行がアレンジを分担しています。

◎ 1行目

ページ全体のフォント指定で、「MS Pゴシック」より「Meiryo」を優先します。従来の通り「MS Pゴシック」が良いなら、この行を削除します。

◎ 2行目

マウスが乗った時に、文中の画像が淡く霞む変化をさせない指定です。画像にポインタが乗ると手の形に変わるので、画像が霞む変化は不要と思います。

◎ 3行目

本文背景色の指定です。透明度や色を変えたい場合は行中の下の値を変更します。

　　rgba(245,236,215,0.95);

◎ 4行目

サイドメニューの背景色の指定で、透明度や色の変更は3行目の本文と同様です。

　　rgba(247,240,225,0.85);

背景色コードのカスタマイズ

上のアレンジコードの3行目・4行目の「背景色コード」の部分を書換えて、透明度を調整する事が出来ます。

白背景色の透明度は「rgba(255,255,255,0.60)」の「0.60」の値で調整します。下はこの透明度を 0.80～0.95 の間で変化させた様子です。

　　0.60 ：　rgba(255,255,255,0.60)

　　0.80 ：　rgba(255,255,255,0.80)

　　0.85 ：　rgba(255,255,255,0.85)

　　0.90 ：　rgba(255,255,255,0.90)

　　0.95 ：　rgba(255,255,255,0.95)

この変化のさせ方は基本ですが、透明度と同時に全体が明るくなります。

一方、元画面の印象はそのままに透明度だけを変化させるには、透過色の色も適当に変化させる必要があります。色は手探りの調整で完全ではありませんが、下はそれを試したものです。透明度の変化は 0.80～0.95 で上と同じです。

Default ：　rgba(255,255,255,0.60)

　　0.80 ：　rgba(248,242,230,0.80)

　　0.85 ：　rgba(247,240,225,0.85)

　　0.90 ：　rgba(246,238,220,0.90)

　　0.95 ：　rgba(245,236,215,0.95)

後者のグループは公式スキン「クロネコ」でしか使えませんが、元のページの印象を大事にするなら、後者の様な背景色に合わた透過色を探して使う必要があります。