蒼井プレ之進のブログ一覧

８月になったら、気分一新して毎日ブログ書くぞ～!!
と、ひそかにはりきっていたのに
気付いたら2日になってますた…
…こんばんは、プレ之進です（ノд｀）








そんなこんなで、大変お待たせしておりますスタイルシート動画。
本日は1カ月ぶりの更新で、第3回です!

今回はついに、png画像を使った透過に挑戦しています。
コレがやりたかったので、動画でスタイルシートの説明をしてきたんで
めちゃくちゃ気合が入ってましたが、
編集のめんどくささにしり込みしてましたｗ

文字で書いた説明は
こちらのブログと
こちらの整備手帳でチェックしてください♪

★png画像を作るために使っているのは、
「AzPainter2」というフリーのペイントソフトです
フリーのソフトなのに、必要十分な機能がそろっていて動作も軽く
ちょっとしたお絵かきに向いています！持っていても無駄にはならないでしょう。
こちらをダウンロードしておいてください。

では、さっそくどうぞ♪
タイトル：スタイルシート研究室第3回



詳細について今回は、
文章でやり方を書くと長くなってしまうので動画を見てください。
やっていることは上記の整備手帳
「透過.pngを使って半透明背景を作る」に
載っているものがほぼすべてです。

「スタイルシートの詳細編集」→「コンテンツ共通」→「コンテンツ表示」の画像を
AzPainterで（透過）png画像に変換して、
再度「コンテンツ表示」に戻しているだけです。

文字で書くと難しいけど、やってみると5分程度の作業なんだよなぁ…
ちなみに編集は半日以上かかってます（ノд｀）ﾂｶﾚﾀﾖ...


今回のブログがみなさんのお役に少しでも立てればと願っています…
※何かわからないことがあればコメントしてください。わかる限りこたえますので♪
※間違いの指摘をしてくださる方には毎回非常に感謝しています。
今回も何かあれば、優しく教えてくださいませｍ(_ _；)ｍ

こんばんは～!!
先週は事務の担当者が休んでしまったばっかりに
仕事に追われまくり外回りが全く出来ずに、
ＰＣの前で苦しみまくり、もう嫌だ!!
と、心底思ったんですが…
結局、この週末ほとんどＰＣの前で動画作ってましたｗ
そんな矛盾を抱える、プレ之進です♪




思ったほど反響が無かったんですが、
途中でやめるわけにもいかず意地で完成させた、
「スタイルシート研究室」第２回目の今回は…
フィルタアルファを使って
ブログのコンテンツを透過させる方法についてです

タイトル：スタイルシート研究室２


やり方は
6/3のブログに詳しく載っているんですが
追記追記でゴチャゴチャしてるんで、再度書いておきますね！
（動画内で出てくるメモ帳と同じ内容です）


filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;

…を元からある文字列の最後に追加する。
数字は不透過率。0で透明、100で不透明

「詳細編集」→「コンテンツ共通」→「コンテンツ領域」
「詳細編集」→「サイドメニュー」→「サイドメニュー領域」
「詳細編集」→「プロフィール」→「左カラム領域」
「詳細編集」→「プロフィール」→「右カラム領域」
「詳細編集」→「タブ」→「タブ（通常）のスタイル」

※注意※
この方法でコンテンツを透過させられるブラウザは、
ＩＥ（インターネットエクスプローラー）であれば７以上になります。
「FireFox」「Safari」は古くても透過可能なようです。
何度やっても透過しないという方は、ブラウザをご確認ください


一応、次回が最終回です（笑）
できない、やり方がわからないと質問の多かったpng画像の作り方。
うまく説明できればいいなぁ…。
車載より先にやっていますので水曜日くらいまでには終わらせたい!!
最後まで意地のパワーで頑張ります（笑）
興味のある方はお楽しみに♪

こんばんは♪
久しぶりに連日ブログを書いてます。
プレ之進です（*^o^）ノ


ちょっとまえに書いた
スタイルシート系のブログですが
自分でも思っていなかったほどの反響をいただき
本当にありがとうございました!!

とても嬉しかったのですが、一部コメントをいただいた方から
うまくできないという声をいただきました。
その際に出来る限り説明はしたんですが
結局、うまくできているのかは分からずじまい
文字で説明することの限界を感じたりしていました…orz

そこで今回新たな試みとして
スタイルシート弄りを動画にしてみました。
車載動画を作っていく中で学んだ技術を使ってみたかった
といったところも大きいのですが（笑）
↓とりあえず見てやってください。

タイトル：スタイルシート研究室１


一度に全部は動画に収まらないので、何回かに分けるつもりです。

今回は、
「背景を１枚絵にする方法」と「背景の固定化」について
技術的な詳細に関しては当該日のブログを見てやってください
（6/3に書いたブログの上半分の内容です）

次回は撮影は終わってるんで、できるだけ早めにあげたいと思います
みなさんがうまくできないという「.png画像」を作るところまで
早くできたらいいなぁ、と思っています

※スタイルシートの変更は自己責任でお願いします
質問にはわかる範囲ではお答えしますが、戻せなくなったりした場合
私は一切責任を負えませんのでご注意ください

こんばんは♪
すっかり夜更かしグセのついたプレ之進です。

最近の仕事といえば、
営業なのにPCの前で売上分析ばかりしてるのに
帰ってきたらスタイルシートいじりで
またPCの前…
今晩も眼をショボショボさせながら
まとめブログ書いてます（笑）




さて、先日のブログにて
背景の固定方法や、ページコンテンツの透過を扱ったんですが
思いのほか反響がありまして、非常にありがたかったです!!

そこでその時にご教授いただきました
png画像を使って、コンテンツの背景を透過させる方法について
独自で研究（ただググりまくっただけですがｗ）し
なんとか成功しましたので、ブログにあげておきます。
もしよろしければ参考にしてみてください♪
（間違いがあればご指摘いただけると助かります…）


まずはおさらいも兼ねてますが下の３つの画像を見てください
（画像をクリックすると別ウィンドウで開きます）


左から何もないブログの背景、
アルファフィルタで70％透過させたもの、透過pngです
よく見れば分かるようにアルファフィルタでは、
ブログなどのコンテンツ自体を透過させるため、
文字や写真なども色が薄くなって見えずらくなってしまいます…。
それとは逆に透過pngを使った画像は、コンテンツ部分の背景のみが
透過して文字や写真に影響はありません。
コレが最大の特徴です!!

透過pngの作り方はこちらの整備手帳に詳しく書いておきました
みんカラブログの検索では、透過pngで作るとは書いてあっても
どのソフトでどうやって作るかまでは書いてなかったので
けっこう苦労しましたｗ
素人が独学でやってみてなんとかできたという方法ですが
もしよかったら使ってみてください
…質問などには答えられないかもしれません（ノд｀）ｺﾞﾒﾝﾖ..

ここで作った画像をもとに
スタイルシートを弄っていきます。

まずは
スタイルシート「詳細編集」→「コンテンツ共通」→「コンテンツ表示」で
margin:0px;
padding:10px 20px 8px 20px;
background:url(画像のURL) repeat-y;
width:580px;
の
上から３番目の「画像のURL」に、透過pngのアドレスを貼ってください。
プレビューでブログページなどが半透明化していれば成功です
灰色や白で塗りつぶされるのは失敗ですので、
画像から作り直してください。

同様に、
コンテンツ上部表示・コンテンツ下部表示でも
background:url(画像のURL) の「画像のURL」に、透過pngのアドレスを貼ってください。

ブログ部分は半透明化できても、コメント部分が不透明のままでしたら
「詳細編集」→「コメント」→「コメントテーブル」
vertical-align:top;
background:url(画像のURL);
に
透過pngのアドレスを貼ってください

余計なプロパティが残っていてアップできないときは
指摘されたものを全部消すといいかもしれません（自己責任で…）

また、コメント欄は意外と複雑な構造をしているので
ほかの場所のbackground～は
消去しておくといいと思います。

私自身もまだ把握してないことが多いのですが
ブログの写真が透けるのが嫌で、
せっかく背景が１枚絵の写真だったり絵画だったりしても
ブログは透過させてない方が多いようなので
急いでアップしてみました！

わかりにくくて申し訳ありません…
ぜひ、皆さんのスタイルシート弄りにお役立てください…（*^o^）ノ

6月10日のブログに
透過png(半透明背景)に関する
追記を書きました。
↑これを使うと文字・写真が透けないコンテンツが
作れます。　ぜひ、上記ブログもご参照ください。

★スタイルシート透過に関して追記しました★
下の方にあるのでチェックしてみてくださいね（*^o^）ノ

こんばんは♪
昨日は夜間巡回の仕事だったので朝に帰宅して爆睡。
昼起きて爆笑くんとランチデート帰ってきて爆睡。
そして、いま起きて頭が冴えわたってます(｀･ω･´)ｼｬｷｰﾝ
そんな体内時計狂いまくりのプレ之進です♪

さて、6/1に新スタイルシートへの強制移行実行ということで
旧スタイルシートを最後まで貫いていた方々のページも
テンプレデザインになってしまいました…。

そこで、お友達の皆さんの中でも
またスタイルシートを弄ってみようかな♪
と、いう方いらっしゃると思います。

そんな方のために、
私が知ってることのいくつかをアップしておきます。
よかったら、参考にしてみてくださいね～（*^o^）ノ

スタイルシートの基本的な形は
旧CSSよりかなりわかりやすくなっていると思います。
「簡易編集」を使えば、
背景画像やヘッダ画像、アイコンなどがアップできるので
自分好みに変えちゃってください♪
[保存]のボタンを押さなければ保存されないので
気に入ったページになるまで、プレビュー＆戻るを繰り返すといいと思います。
詳しい方法はみんカラサポートブログを読んでチェックしてください♪


★今回は詳細編集のほうを使います★

○背景の固定化
通常、背景画像をアップすると連続してても、１枚絵でも
スクロールをするとブログなどのコンテンツと一緒に動いてしまいますよね
それを動かなくさせて、コンテンツのみをスクロールさせる方法です
「マイページのスタイルシート」→「詳細編集」→「ページの基本」→「ユーザー領域」

　　clear:both;
　　background-color:#000000;
　　color:#eee;
　　display:block;
　　background-image:url(画像のアドレス);
　　background-repeat:repet;
　　background-position:50% 50%;

上のような記述になっていると思います。
１．７番目の記述の下に↓を追加します。
　background-attachment:fixed;　　←コレ

２．２番目の記述の　#000000　を　transrate に変更

これで背景が固定されます。
（※注意　簡易編集を変更する度に再度やり直す必要があります。）

背景の位置に関しては上記のCSSの下から２行目を
　　background-repeat:no-repet;
にすることでアップした画像１枚だけの表示になります
一番下の　background-position:50% 50%;　は位置決めになりますので
数値をいろいろいじって一番いい場所に決めてください。


○背景画像が見えるようにコンテンツを透明化させる
私のブログで言うとブログの部分は透けてませんが
右のカレンダー部分は透けてますよね？（PC環境によります。）
そういう状態にする設定の仕方です。
「マイページのスタイルシート」→「詳細編集」→「コンテンツ共通」→「コンテンツ領域」

　　overflow:hidden;
　　display:block;

上のような記述があります。
１．２番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ

数字の90を小さくすれば透明率が高くなり背景が見易くなります。
反対に文字は薄くなります。


同様に…

◎右側のサイドメニュー欄（プロフ画像、カレンダー、お友達、カテゴリー等）の透明化
「マイページのスタイルシート」→「詳細編集」→「サイドメニュー」→「サイドメニュー領域」
　　width:300px;
　　padding-bottom:10px;
　　background:#333;
上のような記述があります。
１．３番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ


◎プロフィール画面の左側（プロフ画像、友達、ファン）の透明化
「マイページのスタイルシート」→「詳細編集」→「プロフィール」→「左カラム領域」
　　display:block;
　　overflow:hidden;
　　background:#333;
上のような記述があります。
１．３番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ


◎プロフィール画面の右側（自己紹介、最新ブログ等）の透明化
「マイページのスタイルシート」→「詳細編集」→「プロフィール」→「右カラム領域」
　　display:block;
　　overflow:hidden;
上のような記述があります。
１．２番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ


◎タブ（ブログ、愛車紹介、おすすめスポット、掲示板、プロフ）の透明化
「マイページのスタイルシート」→「詳細編集」→「タブ」→「タブ（通常）のスタイル」
　font-size:12px;
　　width:19.5%;
　　height:30px;
　　float:left;
　　display:block;
　　text-align:center;
　　background:#666;
　　margin:0 0.6% 0 0;
　　line-height:2.5;
上のような記述があります。
１．９番目の記述の下に↓を追加します。
　filter:alpha(opacity=90);　←コレ

上記のすべての場合において
数字の90を小さくすれば透明率が高くなり背景が見易くなります。
反対に文字は薄くなります。


…えらいごちゃごちゃしてしまいましたが
やってみれば意外と簡単なことです。
せっかくブログやってるんですから、
個性のあるステキなブログにしていきましょう!!

間違ってるとこあれば教えてください…


★追記★
当ブログにコメントをいただきました、
あるまじろうさんからIE以外でのブラウザでも
透過をかけられる方法を教えていただきました。
あるまじろうさん本当にありがとうございます!!

filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity:0.9;

緑色が前回までの付け足す分水色がさらに付け足す分です♪
初めて弄られる方は３行まとめて付け足せばOKです

なお、この方法で透過させると
写真や文字も色が薄くなって透けてしまうため
（ページの表示も重くなり遅くなります…（汗））
「透過png画像」というものを使って、
コンテンツの背景のみを透過させる方法を勉強中です。
またできたらご報告いたしますので、よろしくお願いいたします!!

★追記の追記★
ブログ内追記部分の３行をコピペして使った場合
「プロパティは半角英数で入力してください」と出てしまうのは
私の余計なスペースの問題です…
修正しておきましたので再度チャレンジをお願いします…（汗）
今後ともよろしくお願いします
何度もｺﾞﾒﾝﾈ（ノд｀）ｳｳｳ..

◎追記の追記の追記◎
6/10のブログ：背景の透過についての研究結果（透過.pngを使ってみる♪）
整備手帳：透過.pngを使って半透明背景を作る