ショボーンなWEBディレクター目指し中!! -3ページ目

ショボーンなWEBディレクター目指し中!!

WEBディレクターとして毎日ショボーン(´・ω・`)としながら勉強しています。まだまだなりたてなショボーンディレクターから(`・ω・´)キリディレクターになるため日々精進中です☆

次回は画像の作成までを行いましたがいよいよ自分が作成したオリジナリティ溢れる画像をブログTOPにいれていこうじゃありませんか!

そもそもどこいじりゃーいいの


もっともです。簡単に言うと画像を配置する場所を見つけてしまえばいいのです(←とーぜんだろ!)

画像の配置はIDで設定されているので、該当するIDを見つけてしまってソースの書き換えを行います。

なのでIDを見つけましょう。

といってもどこがどこなのかわからないのでこんなときはゴキブ○・・・じゃなくFIREBUGを使用して該当IDをさくさくっと見つけちゃいます。

firebugのDW

$ショボーンなWEBディレクター目指し中!!


要素の検証をするとheaderエリア青枠がついているのでは


*classの右に***とありますがレイアウト崩れ予防です

この箇所だとわかります。

変更箇所がわかったので、あとはここを書き換えていけばいいだけです。

CSSの編集



場所がわかったらさっさと編集したいとこですが、はてはてどこにCSSはあるのでしょう。

・・・簡単ですよwww

1回目の時にすでにその場所は記載していましたし!w


【デザインの変更】→適用中のデザイン[ CSSの編集 ]→現在使用中のブログデザインCSS


ここにCSSが記述されているのでさくさくっと変更しちゃいましょう♪

$ショボーンなWEBディレクター目指し中!!


ソースを全コピしてテキストエディタにペーストします。
(直接いじっても問題ないですが、ドリを使用した方がやりやすいのでドリを使用しています)


ソースの変更



ゴッキーを使用したことによってヘッダーを制御しているのは
とわかりましたので「skinHeaderArea」これを検索してみましょう。

そしたらこんな記述があると思います。


/* (3-2) ブログヘッダー
--------------------------------------------*/


/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
}/* ←ブログヘッダーに背景画像を敷きたいとき */


ここを変更すればOK♪
エリアには何も記述されていないので自分の画像を配置してあげましょう。


今回記述したソースはこんな感じです。

/* (3-2) ブログヘッダー
--------------------------------------------*/

.skinHeaderArea{
width:980px;
height:250px;
background:url(http://stat.blogskin.ameba.jp/dummy-----) no-repeat;
text-indent:-9999px;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

画像の高さと幅を決めて背景画像としてパスをいれています。
このままではサブタイトルが表示されてしまうのでtext-indentを使用してブラウザの外に追放します。


$ショボーンなWEBディレクター目指し中!!

あとはソースをコピーしてアメの現在使用中のブログデザインCSSにコピペすればOKです

念のため「表示を確認する」から確認をしてみようか?

$ショボーンなWEBディレクター目指し中!!

無事画像表示完了ニコニコ

ん?でもこのままじゃタイトルとサブタイトルが昔のままになっている・・・
(text-indentで飛ばしたけどソースでは前のタイトルです)


次回はタイトルとサブタイトルの変更の仕方を書いて行きます☆
ご覧いただきありがとうございましたヾ(@°▽°@)ノ

5/31 追記

このやり方じゃTOPヘッダーからリンクできないと今朝きづきました。
ちょいと改良します。。。

クゥ

ノーマルのブログデザインにあきてきたのでちょっとデザインを変えていきます。

一気に全体を変更してしまうと時間がかかって更に途中であきらめて止める確立が高いので、少しずつカスタマイズをしていきます♪

今回はヘッダー画像・タイトルの変更です



作業自体は15分もかからずどちらかといえば説明に時間がかかってしまうので複数回に分けて説明します。

自分がこれから行うカスタマイズは本当に初歩の初歩です。
JSで何かしたりとかいうのはあまりやらないつもりです。「アメブロ カスタマイズ」で検索すれば沢山の方法がありますので僕のはあくまでもこういうやり方をする人間もいるんだ位に思ってください。

HTMLやCSSのコーディングにさまざまや方法があると同じに自分も自分流のカスタマイズをしているのでやり方が正しいか間違えているかというのは全然気にしていきません。
*備忘録という意味合いも兼ねておりますので


では、あめぶろのカスタマイズに必要なものを簡単に準備します。

・テキストエディタ


気合でメモ帳でやるのもいいですがsakuraエディタやテラパッドがいいと思います。
自分は使い慣れているのでDreamWeaverを使用していますが、、、

・ブラウザ


Firefoxを使用しています、というのもFirebugでID名、クラス名を簡単に見つけれるのでCSSのどこをいじればいいか直感的にわかるからです。
chromでもbugはありますが、自分はあまり操作性がなれないので狐愛用者です。


・根気


正直根気がない自分がこのブログを立てていき完成できるか非常に謎ですw

・Html・CSSの知識


HtmlはなくてもいいけどCSSの若干の知識は必要。
デザインをいじるのでプロパティの意味は理解している必要があります。


では、簡単にTOPの画像変更を説明します♪

とりあえず画像の作成



自分のこれからのブログの方向性を決めるために自分の職業であるWEBディレクターを入れた名前をタイトルにきめました。

画像自体はフォトショやフリーソフトでさくさくって作ってください。

$ショボーンなWEBディレクター目指し中!!


デザインは今回特に気にしませんw
3分で作成ですwww


画像のUPロード



画像のUPですが画像のUPなので

【記事の編集】→【画像フォルダ】

としそうですが、ここに置いたらダメです!
というのも画像を980PXで作っても圧縮され800PXまでしか表示できないのです・・・

デザインの変更なので今回はちゃんと適した場所に格納しましょう。

TOPの【デザインの変更】→【適用中のデザイン|CSS編集用デザイン>CSSの編集】

ここにheader,footerエリアの画像を格納する場所があります。

$ショボーンなWEBディレクター目指し中!!

ここに絶対パスが記述されているのでコピーして該当するIDにこのパスを入れればOK♪






どーやってこの画像入れればいいねん∑(´・ω・|||)



そーです。次はCSSをいじって自分が作成したオリジナルなメイン画像を入れるのです!
CSSの記述はまた次回ゆるーく書いて行きます^^


アメンバーの皆さん、このブログの主旨を変えていきます。
日常のことも書いていきますが自分の仕事柄の内容をアウトプットするような形で日記をつけていこうと思います。

ってな感じでよろしくーーー♪


最近はアプリを使って寝た時間を計測しております。

とりあえず計った分だけ公開

今月

7日 ねた 3:22 おきた 6:20 合計2:58
9日 ねた 2:21 おきた 4:40 合計2:19

はかり忘れ・・・

15日 ねた 1:25 おきた 5:10 合計3:45
17日 ねた 3:02 おきた 4:01 合計0:59
18日 ねた 23:33 おきた 04:06 合計04:06
19日 ねた 00:10 おきた 4:44 合計;4:34
20日 ねた 3:19 おきた 7:30 合計:4:11
21日 ねた 2:46 おきた 6:00 合計:3:14
22日 ねた 1:15 おきた 6:06 合計:4:06
23日 ねた 1:46 おきた 4:25 合計:2:39
23日 ねた 0:55 おきた 2:29 合計:2:34
24日 ねた 2344 おきた 7:23 合計:7:49
※眠り浅くてすぐ何度も起きるので実際はこの値より少ない

今日は寝ていない疲れが一気にでて遅刻しそうになりました。


ちなみに使ったアプリはこれ
寝るのに時間かかるのでボタン押してから30分後にタイマーが動くよう設定してますニコニコ


■GoodSleep Beta(android)
https://play.google.com/store/apps/details?id=net.florescer.goodsleep&hl=ja


はぁ。。。ストレスやら考え事が多いとすぐ眠れなくなる・・・
(あと寒さ・・・寒いので猫がほしい。禁煙していたタバコも買ってしまいました。。。ウゥ


なのでどーせねれねーならさっさと会社付近に行って勉強しよう!
という変に+思考になるというwww

ビバ!タウリン!10本入りを3日でなくしたぜ!


タウリンがあれば俺はどこまでも強くなれるさ!( ̄▽+ ̄*)




仕事やら考えるの疲れました。なので考えるのを止めました。
(↑いやいや。仕事は考えろよ!w)
気分・心機一転して月曜日からすっきり色々整理しよう!
今ははよ体調回復しないと仕事に影響でまくりだ!


前みんなに会ったときも色々大変なんだなぁって実感したよしょぼん

最近新たに知った修三さん名言

--------------------------------------------------------------
干されているあなたに

松岡修三名言 干し餅(もち)


お前ほされてんのか?
必要とされてねぇのかよ?

だったら干しもちみてみろ
ほしもちはな・・・ほされてんだぞ!
しかも風当たりも強いんだよ!

だけど冬場になって
保存食として 食料がなくなったときに
皆に必要にされるときがやってくるんだ!

だからこそ干しもちのように頑張りぬけよ

君も必ず必要とされるときが来る


今日から君は干しもちだ!


--------------------------------------------------------------

ん。俺干されてないけどいい言葉だなぁと思って耳コピしてみたw


大好きな修三さんのサイトに動画が掲載されているから良かったら見てみて♪
http://www.shuzo.co.jp/


何気にいいこというんだよなーこの人☆

うんうん。何か聞くと頑張れるよ。


今日から君は富士山だ!/o^o^\o


このフレーズめちゃくちゃ好き!www