いけしのブログ一覧

おひさしゅう．


2年前，スタイルシートを出来合のものに替えてから，延々ほったらかしにしていたが，
ちょっと思い立って，やっつけ仕事でスタイルシートをいじくってみた．

方向性
１）黒い
２）背景を半透明
３）やっつけ仕事なのであまり手間をかけない

※ここで「背景」は，本来の意味の背景ではなく，「文字等表示部分の地の色」を指す．


というわけで，ご覧のとおりのものができた．（※執筆時現在）

手法を簡単に説明．
逐一細かいことは書いていないので悪しからず．


１）黒い
基本スタイルを黒いやつ（※「みんからブラック」だったと思う）にして，あとは上部のメニュー（？）とか，夜景写真とかで調整．
※以前の物の使い回し．


２）半透明　※今回のポイント．試験に出ますよ！
基にしたスタイルシートでは，ブログの一覧や本文などなど，背景色が「#333」などとなっていた．灰色ね．こいつを半透明にする．

２－１）文字が透けてはいけない
google先生に「みんカラ 半透明」などと聞いてみると，「filter:alpha(opacity=90);」を書きましょう云々という内容がぞろぞろと検索されてくるのだが，これに安易にとびついてはいけない．
この手法，背景と前景（文字・写真など）を合わせて透明にしてしまう．
よって，今回はこの手法は却下．

２－２）半透明画像を作る
上の手段がだめ，ということで，半透明画像を背景にすることに決定．ちょいと調べて（関連情報URL参照しました．），半透明のPNGファイルを作成することに．
ツールはGIMP2を使用．
適当な大きさで画像を作り，適当な灰色でべた塗り．※サイズは適当でよい．1x1でもよい．理由は後述．
その後，透明色の設定．GIMP2では，「色を透明度に」というメニュー名称．
ここで，どの色を透明にするかについての説明を少々．カラーはややこしい話になるので，白黒のみ．
#FFFFFFを透明にする：
明るいほど透明になる．白は透明．つまり，黒は不透明の真っ黒．
色の濃さによって，黒っぽい半透明シートを重ねたようになる．
#000000を透明にする：
暗いほど透明になる．黒は透明．つまり，白は不透明の真っ白．
色の濃さによって，白っぽい半透明シートを重ねたようになる．
説明終わり．
今回は，#BBBBBBベタ一色の画像を作成して，#FFFFFFを透明に設定．
画像を保存し，みんカラの「スタイル用画像」に保存する．
保存した画面に，画像のURLが表示されるので，コピーしておく．

２－３）半透明画像を背景に設定する
スタイルシートの「詳細編集」を見ながら，「background」の記述を探す．こいつが背景色（画像）の設定．こいつを書き換える．※行末は「;」←セミコロン
「background」で始まる行を行末まで削除，そこに
「background:url(http://carview-img途中省略.png) repeat;」
を挿入する．
※「http://carview-img途中省略.png」の部分は，さきほど保存した画像のURLを記載．
これを必要箇所の分だけ繰り返す．
以上．
ここでの注意点をいくつか．
ひとつめ．
「background:」の後に「http://carview～～～」があるが，その間に「#333」等と別の色指定が記載されているものが存在する．そんなものはまとめて消して書き換える．残っていると，その「別の色指定」が反映され，透明にならない．
ふたつめ．
上の例では最後に「repeat」と書いている．これは，画像をタイル状に敷き詰める指定で，枠の大きさ分だけ敷き詰められる．上で書いた画像作成時のサイズを問わないのはこのため．
ちなみに，「repeat-y」とすれば上下方向のみで縦1列，「repeat-x」とすれば左右方向のみで横1列に敷き詰める．
みっつめ．
ある枠の背景に半透明画像を設定し，その中にある枠の背景にさらに半透明画像を設定すると，透明度が上乗せ（積算）される．半透明フィルムを2枚以上重ねた状態を考えてもらえばわかりやすい．
※どの枠が画面のどの部分であるかは，プレビューと見比べながら各自で調べてほしい．全部説明するときりがないので．


３）手間をかけない
というわけで，枠の縁取りや文字色などはほとんど触っていない．
で，さっさと終わるつもりがこのエントリを書くので所要時間が倍になってしまった．まぁいいか．