ikusion13trのブログ一覧

え～タイトル見ても意味分かりませんねｗ

前回（もっと前？）、背景だけの固定をして、日記をスクロールさせても背景と一緒に動かない様にしました。


その時にヘッダーの裏に背景が来るように

*ヘッダー画像の裏（後ろ）だと背景が隠れて背景が消えるので

日記をスクロールすると背景が出てくるように設定してたのです。


「どういうこっちゃ？」と云うと、ヘッダー画像と背景画像を同じサイズにしてたんです。

厳密に言えば背景画像の方が少し小さめなんですけどね（＾＾；


その背景画像をヘッダーの後ろに設置し、ヘッダーのタグの画像の部分だけを消すと

ヘッダーの画像はなくてもサイズで空間を開けてるので背景画像が見えるんです。

あたかも背景がヘッダー画像かな？と、訪問者に思わせられるんですよｗ



と、いう事でヘッダー画像変更と背景固定の応用編ですよ。


■背景固定■スタイルシート→詳細編集→ページBody

background-image:url(背景にしたい画像URL);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:表示する場所;

表示する場所については↑にリンクした日記を覗いてね♪


■ヘッダー画像■スタイルシート→詳細編集→ヘッダー領域

height:ヘッダーの縦サイズpx;
overflow:hidden;
float:center;
background-color:transparent;
background-image:url(ヘッダー画像URL);
display:block;

「ヘッダー画像URL」を消すと背景画像のみになりますが、タグを全部消さないように注意してね☆

ヘッダーの縦サイズは背景の縦のサイズに合わせてあげてね♪


■画像UP■スタイルシート→詳細編集→スタイル用画像

オリジナル画像を作りたい人は画像の加工についてを見てね

ちなみに配布して下さってる方も、いらっしゃいますし自分も現在、配布用のを作成中です。

ずっと気になっていたカレンダーの当日の色。

アレが、ずっとオレンジ色で気に食わなかったんです。


スタイルシート→詳細編集→「サイドメニュー」→ブログカレンダー当日

ページ基本のブラックを選んでる方は

background:#CC3300;
color:#eee;

と、表示されてるはず。

そこのbackgroundの色を変えました。


本当は他のリンクの場所もページ基本と同じにしなければいけないんだろうけど

面倒なので触りません。（おい）

＋

関連記事（？）

ら～つ xoxさんのカレンダー画！（カレンダーの背景に画像を入れる方法）

・・・■重要■な事ですよ。
　
時々見かけるんですがプロフィールや日記等で車の画像をＵＰするさいに

ナンバープレート表示されたままで載っけてる方がいらっしゃるんですけど

目立ちたがり屋な方は良いですが常識的に消した方が身のためですよ（＾＾；

まぁ見えないサイズなので未加工で載せて怒られて前のみんカラを消すハメになった自分の落ち度の･･･orz

と言う事で、

これはヘッダーや背景・アイコンの加工にも使える事なので参考にしたい人はどうぞ

って書きながらウィンドーズの人限定ですが（Ｍａｃの人ゴメンなさい）

＋

まずは●ナンバープレートを隠す方法●

デジカメや携帯のメモリーカードに入ってる画像を、パソコン内に保存します。

パソコンに保存した画像を右クリック→編集を押すとパソコン内のソフト「ペイント」で出るはずです

そしたら左側にアイコンが、いくつか出てるので点線の☆の下の消しゴムでナンバープレートの文字を消します

それ以外の方法でペンまたは筆（ブラシ）のマークをクリックして左下の色をクリックし塗ってあげたり

自然な色にしたい場合はペンのマークの上のスポイトで

ナンバープレートの文字の無い部分を吸ってペンまたは筆（ブラシ）のマークで塗る方法があります

消したら左上のファイル→名前をつけて保存・または上書き保存して終了です。


文字書きやお絵かき出来ちゃいますが保存後に画像が悪くなったりするのでオススメしません。


●サイズを加工する方法●

ヘッダーやアイコンは特殊なサイズですよね、それを変える方法です。

↑と同じ方法で加工したい画像をペイントで出してあげます。

先に★画像を小さくする方法ですが、左上のファイルの並びの「変形」を使います。

縦に撮った画像なんかも「変形」→反転と回転→角度を指定→大体が９０度ですよね？

で、小さくするには「変形」→縮小と傾き→伸縮の縦と横の数字を同じで入れるとキレイに小さくなります

これは全体が小さくなるので今度は★画像を一部切り取る方法です。

ファイルの下の□の点線で切り取りたい場所を囲んで、編集→切り取り（コピー）で

ファイル→新規で前の画像を捨てます→編集貼り付けで切り取った画像が出ます。

周りの余白が気になる場合は変形→キャンバスの色とサイズで小さめにして、もう一度貼り付けをする。


その□の点線で切り取りたい場所を囲むさいに右下に横ｘ縦が出るので、好きなサイズにも出来ます。

それで保存すると出来上がりです・・・アイコンは、どんくらい小さいサイズが良いんでしょ？


これらを練習してって★ヘッダー（背景）画像を作ろう！

ペイントのある場所はスタート→全てのプログラム→アクセサリ→「ペイント」です。

ヘッダーの幅サイズは930と決まってるので変形→キャンバスの色とサイズ→幅930、高さは好きな数字で

キャンバスを作って保存しといてあげます。

ヘッダー用キャンバスを開いて↑で編集した画像を何個か作っとけば

ファイル→開く→出したらマウスで移動してあげるとゴチャゴチャ画像の出来上がり♪


ってな感じになります。

ペイントの左下の色が微妙だな～と思ったら、色をクリックすると作れるようになります。


ペイントからの保存のファイルの種類はＪＰＥＧが写真用で打倒。

みんカラもＪＰＥＧでＵＰされるのでキレイに保存できるＰＮＧもＵＰ時にオート変更されます

ただしＰＮＧは重い（ファイルの容量食べられます）ＧＩＦは軽いんだけど画像が悪くなる


＊ＢＭＰについて、パソコンによってはＢＭＰしか無いよって人が居るかもしれません

その場合は保存時の名前のあとに半角英語で 名前.jpg 名前.png 名前.gif　と入れると良いです

ＢＭＰってＰＮＧみたいにキレイなんだけど、更に上のフルカラーでの画像保存が可能らしい

他の画像形式と違って、無圧縮で保存するので画像を荒らさずに保持でき

（その代わり、ファイルサイズが大きくなる）

フルカラー以外にも減色での保存も可能だが、あくまでもWindowsの保存形式なので、

基本的にはMacには対応していません。その為、ネット上では使うことはありません（受け売り）




あぁそうだ■重要■な事が、もうひとつ

最近スタイルシートのお陰で、足跡が多く残るんですけど・・・

ゲームやマンガの画像、本家の画像を直接ＵＰしてる方が居ますよね？

あれって著作権は大丈夫なんですか？

自分でマネして描いた絵とかならともかく、拾ってきたものを直接ＵＰはマズいんじゃ？・・・と思う今日この頃。

日記枠やコメントの枠を変えたい！

タブって？　セレクタって？　なんじゃらほい！？

みんカラ　サポートブログの更新、止まりすぎてない！？

あぁ暑いせいかな･･･誰か助けて　orz









日記枠とコメントの枠の色を変えてる人がいたんだよね・・・羨ましい。

さっき、日記枠だろうと思われるところをイジったら日記の枠の下の線が消えたｗ

あ～あとね、スクロールバーも変えたいんだよね・・・これは共通かな？

課題は、どっさりですな・・・トホホ。

かなり奮闘したよ（疲）orz
え～上のマイページの右下のサーチで
みんカラに登録してる人のを色々検索出来るんだけど
日記が動かないようにするタグが知りたくて「背景固定」と検索したところ
背景と日記が一緒に固定されてるものばかり捕まりまして・・・
よくよく見てたら、前回の背景透視でタグが解らんって書いたけど
実は、そのままだったんですね（＾＾；

･･･で、↑これ見ても意味が解らんよって方へホームページで再現しました。

背景と日記が一緒に動く（嫌）　　背景と日記が別々だぞ（良）と、大げさに現してみました（羞）

＋

今回の「背景だけ固定」の変更箇所はスタイルシート→詳細編集→ページBody

ページBodyの説明ですが前も説明したけど一応ねｗ
　
text-align:？;
font-size:文字サイズ;
line-height:1.5;
color:文字色;
font-family:'フォント',Hiragino Kaku Gothic Pro,sans-serif;
background-color:背景色;

と、↑なってるハズ・・・その下にコレ↓追加します。

background-image:url(背景にしたい画像);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:表示する場所;

背景にしたい画像は詳細編集の右のスタイル用画像でアップロードしてね

fixedは・・・背景固定のタグｗ

no-repeatは背景画像を繰り返しませんよって意味。

表示する場所については、ど真ん中が良いなら　center か 50% 50%と入れてください。

他の箇所について自信は無いですが一応、載せときます。

左上　0% 0%
右上　100% 0%
真ん中だけど上　50% 0% ←？

これ↑はヘッダーの後ろに入りますスクロールで現れる感じ・・・
ナビゲーションバー（トップとか）の背景無視で、その上に持って行く方法がどこにあったかな？

左下　0% 100%
右下　100% 100%
真ん中だけど下　･･･ごめん不明。

見て解るけど％の位置が変わってるので　右% 縦%　で変えてあげられますよ。



*UPできる大きさ（サイズ）が決まってるので、頑張って、その大きさにしましょう。
２０１３年に時代の進化？として確認したところ、
　写真1枚のパターンだとパソコンで見るとちょうどイイですが
　タブレット確認では上下の隙間が出たので、ちと残念。
　敷き詰めタイプの背景は大丈夫です。