むぎ茶を飲みながら のんびりブログ

予告なしで分けわからないよねｗｗｗｗ



青〇部分のところ。
ココを好きな画像にしてみよう！！
因みに、この部分を『ヘッダー』と言いますので覚えておいてね♪

これは、ここだけではなく後の自分だけHP作りにも役立ちますので、覚えて損はないです。


そもそも変えられるのかってことですよね〜。
先日からずっと勉強しているのはこのためだったのですよ？ｗｗｗ
たしかに、ブログを日記として書くだけなら前回までのお勉強は必要ないかな…
でも、面白かったでしょ？

でね、今回の勉強はCSS。
すなわち、存続スタイルシートを改造するわけです。
車もパソコンも、部品を変えれば性能は変わりますよね？
スタイルシートも、内部プログラムを弄られるとプログラム内容が変わってくるのです。







まぁ、やってみましょうｗｗｗ
ちなみに、これ自体は A8.net でも やり方を説明してますので…
私の方が優しく教えるもん…

まずは、画像サイズなのですが1000px×170px
pxは単位ですが、画像ソフト開くと単位が一緒ですのでご心配なく。


今回使ったのは、Windows標準の『ペイント』ソフトになります。

では、いきますよ〜♪



左上の『ファイル』から『開く』で挿入したい写真を選んでください。
下にある青〇の数字が画像全体のサイズです。
同じように今回の1000×170が大体、赤〇部分だけになります。

ですので、画像によっては旨味を全て出し切れないかもしれません…
一応『今はね♪』と伝えておきますｗ



方法は、上側赤〇の『選択』より緑〇の『四角形選択』を選びます。
画像に戻り、使いたい部分をドラッグし青〇部分の『トリミング』をクリック♪



出来たかな？

出来たら、画像を壊す前に左上の『ファイル』から『名前を付けて保存』を選択しましょう♪
※間違っても、『上書き保存』はしないでください。元の大事な画像や写真が消えてしまいますので…
私が、画像関係の説明しないのはコレの為ですｗｗｗ

さて、いよいよ改造しますよ〜



『画像管理』より、先ほどの画像をアップロードします。
アップロードが完了しましたら、指定画像のタイトル(赤〇)部分をクリック。
すると別タブが開きますので、緑〇の英数字がある部分を右クリックで青〇の『リンクアドレスをコピー』をクリック♪



次に、『デザイン』から『CSSの編集』をクリック！
下の方に行くと『header』の文字があると思いますが、画像の緑部分が『ヘッダー』部分のプログラムになります。
最初に、赤部分の『(〇〇〇〜.jpg)』文字部分を消して、その部分に『右クリックから貼り付け』を選んでください♪



出来たかな？
でね、青部分なんだけど…これが縦幅の調整なんです。
こんかい、私の画像は187pxにて加工したので187pxにしましたが…
あんまり縦長にすると、見栄えがカッコ悪くなるので気を付けてね♪

さぁ、完成したら下側の『プレビュー』をクリック♪



お疲れさまでした♪


あとは、『保存』を忘れずにして　思うがままに好きなモノを使ってください…

昨日も話しましたが、『著作権』には御注意くださいね！！！
私が今回使ったのは『FF14』内の自分で撮ったスクリーンショットですが、これにもちゃんと『使用条件』が設定されてます。
詳しくは、著作者の条件でお調べください。


次回は何しようかな〜♪ｗ

では、本日はこの辺で！