チカゴロのワシ

未定

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ありがとう2008

2008年にお世話になった全ての方々にお礼申し上げます。

お世話になった全てのモノに感謝します。

ありがとうございます。



今年もかわらず、心の支えになってくださった方に感謝。

今年もあえて厳しい言葉で指導して下さった方に感謝。

今年、新たな機会やきっかけを与えてくださった方に感謝。

今年も豊かな時間を共有してくださった方に感謝。

今年知り合い、新たな活力を与えてくださった方に感謝。

今年、このブログを読んでくださった方に感謝。



今年も身の回りで役に立ってくれたモノに感謝。

今年、新たにワシの元にやって来てくれたモノに感謝。

今年、ワシの手元から去って行ったモノに感謝。

今年、新たな知識やアイデアを与えてくれたモノに感謝。



今年、大病もせず、大事故にも遭わず、

無事でいてくれた自分のカラダに感謝。



2008年という、二度と来ない年に感謝。



ほんとうにありがとうございます。

心の底からお礼申し上げます。



スポンサーサイト

アメブロカスタマイズ講座(8)

年末だろうがなんだろうが、進んじゃいます(^^;



前回までに#sub_bに背景画像を設定しました。





今日は#sub_bにsub_bヘッダ画像、sub_bフッタ画像を設定し、

#sub_bの内容を調整します。



STEP1

まず、自分の#sub_bの内容を見て、

一番先頭にあるコンテンツ、一番下にあるコンテンツを

確認します。



私の場合は、#sub_bの先頭のコンテンツは#calendar、

最後のコンテンツは#rssという名です。





デフォルトでは、#sub_bの最後のコンテンツは#rssですが、

先頭のコンテンツは、アメブロカスタマイズ講座(3)のSTEP3

で設定した内容によって異なりますので、

ご自身の#sub_bの先頭コンテンツの名を調べる必要があります。



コンテンツの名前(ID)の調べ方は

予備講座(2)を参照してください。



ちなみに、先頭コンテンツのタイトルが「カレンダー」

である場合、HTMLファイルの「カレンダー」という文字列を

探し出し、直前の"id="という記述を探し出します。

これが、「カレンダーの名前(ID)」です。



以下、先頭コンテンツが#calendar、最後のコンテンツが

#rssである場合を例に記述を進めます。



/*

2009年のペン

そういえば、モノにあまりこだわらなくなった。

「オッサン化現象」かもしれない。



20代の頃は、バブルという時代もあったのかもしれないけど

ジーパンはコレでなきゃイヤだ、とか、

今考えるといちいち細かいことにこだわっていたような

気がする。



20代後半になってユニクロのジーパンをはいてみて

「なんだ、コレで充分じゃん」

と思った。



30代ごろ、バブルが崩壊して「価格破壊」が起きた頃、

「最低限の機能が果たせればじゅうぶん」

という考え方が広がった。

ワシ自信もそうゆう考えが進んだのかもしれない。



ペンも、「書けりゃいいんだから、もらいもので充分」

てな感じ。

だから数年、ペンなんて買わなかった。

そこらへんに転がっているのを使ってた。



2008年、書く機会が増えたので、シャープペンを何本か買った。

最初は「百均でじゅうぶん」と思って、

百均のシャープペンを買ったんだけど、はやくダメになるし、

(数ヶ月で百均のシャープペンを二本潰した)

大量に文章を書いていると書きにくい。



そこで、さほど高くはないものの機能性の高い、

話題のシャープペン



を買って使ってみたところ、

やっぱり、それなりにいい。

愛着が湧くほどの質感は無いが、

なんと言っても書きやすい。



特に毎日使うものであれば、使うたびに

「使いにくいな」

と思うより、

「使いやすいな」

と思ったほうが気持ちがいい。



値段とかブランドということではなく、

毎日繰り返し使うようなものは、

自分にとっての使いやすさにはこだわったほうがいいなぁ~

と思った。



今、探しているは、新しい手帳用のボールペン。

これまではクロス社製のボールペンを使っていた。



むかーし、海外旅行に行ったときに買ったもの。

細身で、手帳用に向いているかな、と思ったから。

高級筆記具メーカだけあって、確かに質感はとてもいい。

しかし、この書きにくさはどうゆうことだ。

・ノック式ではなく、ペン軸を捻って芯を出すこと

 (書き始めるまでにモタモタする)

・細身の上に軸がツルツルしていてグリップがよくない

等の理由で、買い替えを検討中。



これまた数年前に買った、トンボ鉛筆のZOOM



は、カッコイイし、

書き味も申し分なくて、お気に入りのペンなんだけれど、

・軸が手帳のペン差しに入らないほど太い

・水性ボールペン(乾く前に手帳を閉じるとインクが写る)

・キャップ式(水性なのでしかたがない)

ということで、手帳に向かない。



細身で書きやすいペン、ないかなぁ~

高いものでなくてもいいから。

クロスなんかじゃなくて、

パイロットやコクヨ、ぺんてるで充分。

でもそれなりに愛着の湧くもの。

デザイン性と、書きやすさ、書き味が大事。



仕事で使うモノにはこだわらなきゃいけないんだな。

包丁人が包丁にこだわるようなものかな。



アメブロカスタマイズ講座(7-2)

================

アメブロのサイドバーにある、

広告の削除方法についての記事です

ヘッダ部分にある「ユーザナビ」の消し方はこちら

================




ここまで「表示確認」で示していたサンプルの確認画面に

間違いがあったので、訂正します。

今の段階では、以下のように#sub_bの中に広告が

表示されているはずです。







非常に目立つ場所にあって(広告なんだから当たり前か)、

邪魔ですので、これを抜いてしまいましょう。

やっていいものかどうか考えてしまいますが、

できるんですから、やっちゃいましょう。



この広告は、ヘッダの説明文を消したときのような

displayの設定では消えません。

そこで、画面の外に飛ばしてしまいます。

CSSの「広告/アメブロ特有コンテンツ」部分に

以下を追加します。



#defaultAd{

position: absolute;

left: -9999px;

height: 1px;

float: left;

display: none;

}




表示確認





広告は画面の左の遥か彼方、

9000ピクセル向こうに飛ばしてしまいました。



ここまでのCSSを一通り示しておきます。

コピペして利用してください。

URLやピクセルなどは、各自の設定に合わせて調整してくださいね。



/*

アメブロカスタマイズ講座(7)

ヘッダ部分が終わりましたので、

ヘッダ部よりも下の部分の調整していきます。



ここまでの内容でコツを掴んだ方は、

どんどん先に進んでいっちゃってくださいね。



ステップ1

まずはヘッダより下の部分を大きく囲む

#wrapの調整をしましょう。





#wrapは、上記の(4)の部分です。

この部分の幅を、ベース画像の、以下の部分の幅に合わせます。







私の場合は#mainが465ピクセル、#sub_aと#sub_bがそれぞれ

170ピクセルですので、

465+170+170+余裕分=820ピクセルとします。



ヘッダ画像の幅が800ピクセルですので、

これよりも大きくなり過ぎないように、画像の幅を調整します。



#wrap{

width: 820px;

margin-right: auto;

margin-left: auto;

}




表示確認





先に指定したCSSの「基本レイアウト」部分を調整します。



/*

楽しい忘年会



ケータイを構えているのはkotatsu_mrさん。

楽しい時間をありがとうございます。







I/O

I/Oとは、Input/Outputの略で、

コンピュータの世界で使われる言葉。(今はあまり使わないかな)

まだPC(パソコン)が「マイコン」と呼ばれていた頃、

I/Oという名の雑誌がありましたが、

今日はそれとは違う話。

人間のI/Oです。



ワシはお笑いが大好きで、昨日もM-1グランプリの決勝を

見ていたんだけど、お笑いもI/Oの世界なんじゃないかな?

と思った。



一発ギャグや、顔芸の芸人は別として、

話が面白い芸人の多くは、圧倒的にInputが多いように思う。

大御所では北野武氏、島田伸介氏など。

ベテランでは爆笑問題など。

たぶん、読書量も多いんじゃないかと思う。

発想が豊かで、普通の人が思いもしないような言葉が出てくる。



Inputが多いと、

「コレとコレを組み合わせたら、面白いんじゃないか」

「この方法を別の分野に取入れたら、成果が出るんじゃないか」

という選択肢そのものが広がるので、

ただ単に「がんばる」というのとは違った可能性が広がる

と思う。



Inputが少ないと、

がんばっても出来上がるものがソコソコで

(それでも何もしないよりは100倍マシだが)

頑張ってる割にはイマイチ、ということになるのかな。



また、Inputとは単なる「お勉強」とも違う。

アンテナを張ることと、そのアンテナから

多くの情報とか考え方を吸収するってことなのかな???



ただ、Inputが多いだけではダメで、

Outputが伴わなければそもそもInputの意味がない。

お笑い芸人で言えばネタ作りや、練習がOutputに当たる。



一般の人で言えば、Outputは「実行」「行動」というところか。

ワシはInputはソコソコかもしれないが、

このOutputが圧倒的に足りない。

いわゆる「頭デッカチ」だ。

このブログもOutputのひとつだけど、

もっともっとOutputが必要だな~、と感じる。



Inputが10で、100%のOutputをしている人と、

Inputが100で、10%のOutputをしている人とでは、

パフォーマンスが同じという理屈になる。

いや、結果が同じなだけで、

パフォーマンスは圧倒的に前者のほうがいいってことか。



いくらInputが多くても、Outputが0%であれば、

パフォーマンスは当然、ゼロ。



あ、これいいな、と思ったら、すぐにやろう。

最初はマネでもいいので、やろう。

それがOutputだ。と思う。

マネもたくさんしていれば、それらが相互に結びついて

マネで無くなる。

芸人が人マネではいただけないが、

一般の人であれば、そもそもマネかどうかなんて、

どちらでもいい。

いい結果が出れば。





アメブロカスタマイズ講座(6)

今日は、ヘッダ部分をいじってみましょう。

「ブログデザインに挑戦しよう」では、ヘッダ部分を調整したので、

このあたりはもう慣れたものですよね?(^^



ステップ1

ブログへの訪問者が見て、

「あ、これはアメブロだ」とわかる部分は、

ページの上部にある「アメブロバー」と「ユーザナビエリア」

です。

これ、邪魔ですね。







邪魔なので消えていただきましょう。

前回までのCSSの最後に、以下の記述を追加します



/*

the river

Bruce Springsteen "the river"





I come from down in the valley

where mister when you're young

They bring you up to do like your daddy done

Me and Mary we met in high school

when she was just seventeen

We'd ride out of that valley down to where the fields were green



We'd go down to the river

And into the river we'd dive

Oh down to the river we'd ride



Then I got Mary pregnant

and man that was all she wrote

And for my nineteenth birthday I got a union card and a wedding coat

We went down to the courthouse

and the judge put it all to rest

No wedding day smiles no walk down the aisle

No flowers no wedding dress



That night we went down to the river

And into the river we'd dive

Oh down to the river we did ride



I got a job working construction for the Johnstown Company

But lately there ain't been much work on account of the economy

Now all them things that seemed so important

Well mister they vanished right into the air

Now I just act like I don't remember

Mary acts like she don't care



But I remember us riding in my brother's car

Her body tan and wet down at the reservoir

At night on them banks I'd lie awake

And pull her close just to feel each breath she'd take

Now those memories come back to haunt me

they haunt me like a curse

Is a dream a lie if it don't come true

Or is it something worse

that sends me down to the river

though I know the river is dry

That sends me down to the river tonight

Down to the river

my baby and I

Like a rolilng stone

以前にも日記で紹介した記憶があるけど。

やっぱり好きなので。



Once upon a time you dressed so fine

You threw the bums a dime in your prime, didn't you?

People'd call, say, "Beware doll, you're bound to fall"

You thought they were all kiddin' you

You used to laugh about

Everybody that was hangin' out

Now you don't talk so loud

Now you don't seem so proud

About having to be scrounging for your next meal.



How does it feel?

How does it feel?

To be without a home

Like a complete unknown

Like a rolling stone?



You've gone to the finest school all right, Miss Lonely

But you know you only used to get juiced in it

And nobody has ever taught you how to live on the street

And now you find out you're gonna have to get used to it

You said you'd never compromise

With the mystery tramp, but now you realize

He's not selling any alibis

As you stare into the vacuum of his eyes

And ask him do you want to make a deal?



How does it feel?

How does it feel?

To be on your own

With no direction home

Like a complete unknown

Like a rolling stone?



You never turned around to see the frowns on the jugglers and the clowns

When they all come down and did tricks for you

You never understood that it ain't no good

You shouldn't let other people get your kicks for you

You used to ride on the chrome horse with your diplomat

Who carried on his shoulder a Siamese cat

Ain't it hard when you discover that

He really wasn't where it's at

After he took from you everything he could steal.



How does it feel?

How does it feel?

To be on your own

With no direction home

Like a complete unknown

Like a rolling stone?



Princess on the steeple and all the pretty people

They're drinkin', thinkin' that they got it made

Exchanging all kinds of precious gifts and things

But you'd better lift your diamond ring, you'd better pawn it babe

You used to be so amused

At Napoleon in rags and the language that he used

Go to him now, he calls you, you can't refuse

When you got nothing, you got nothing to lose

You're invisible now, you got no secrets to conceal.





How does it feel?

How does it feel?

To be on your own

With no direction home

Like a complete unknown

Like a rolling stone





アメブロカスタマイズ講座(5)

ここから、実際のCSSをいじり始めます。

ここまでは進め方や考え方でしたが、

ここからはステップごとに劇的に「見た目」が変わっていきますよ。



ところで「ブログデザインカスタマイズ講座」を

「アメブロカスタマイズ講座」に変えました。



では、ローカルのCSSを直接いじっていきましょう。



ステップ1

最初に「スタイルを素っ裸にする」です。

既存のデザイン(スタイル)を全て剥いでしまって、

一旦「何もデザインされていない状態」にします。



アメブロの場合、独自にいじれるCSSはひとつだけでしたよね?

(例:10005750477.css)

この中のCSSを全て削除して、

以下の内容だけにしてしまいます。





/*

アメブロカスタマイズ講座(4)

今日のブログデザインカスタマイズ講座アメブロ)は

「アメブロページの論理構造を知ろう」です。



「論理的な構造」についてのお話は以前の記事をご覧下さいね。



アメブロの場合、HTMLをいじることはできないので、

論理的な構造は不変です。

この論理的な構造に、CSSによってどのような「スタイル」を

与えていくかによって、デザインを進めていきますので、

まずはこの「アメブロのページの論理的な構造」

を押えておきましょう。







これは非常に大雑把ではありますが、

アメブロページの論理構造を視覚的に表したものです。

実際はもっと複雑なのですが、まずはコレくらいを

押えておきましょう。

各名称をお伝えします。



1)#overHeader

2)#userNaviArea

3)#header

4)#wrap

5)#main

6).entry

7)#sub_b

8)#sub_a



ここで、.entryだけ「#」ではなく「.」ではじまっている

ことにお気づきかと思います。

一般的に、そのページで一度しか使われない定義は「#」

そのページで何度も使われる可能性のあるものは「.」

で定義されます。



CSSで"#"ではじまるものはIDと呼ばれ、HTMLでは"id="という

記述に対応します。

CSSで"."ではじまるものはclass(クラス)と呼ばれ、

HTMLでは"class="という記述に対応します。

覚えておくと便利です。




.entryは、日記の外側をあらわしています。

日記は、1ページにいくつも表示される可能性があるので、

「.」になっています。



さらに、.entryの中を覗いてみましょう。





1).entry

2).entry_head

3).title

4).theme

5).contents

6).foot



.entryの中にあるものは、全て同じページで繰り返される

可能性があるので、「.」ではじまっています。



たとえば、日記部のタイトルの背景や文字の色を

変えたい場合には、CSSの



#main .entry .title{



で始まる記述を探すか、自分で記述をするなりして、

設定するわけです。

#main .entry .title

は「#mainの中にある.entryの中にある.title」

という意味です。



以降は「日記部」「日記のタイトル」などという言い方は

どこを指しているのか解りにくいので、

直接、「.entry」だとか「.entry .title」という

指し示し方をしたいと思います。





値段に疎い

アマゾンで、間違えて同じ本を二冊、注文してしまいました。

あわてて返品手続き。



さすがアマゾン。

返品手続きもシステマチックで、Webでの案内もわかりやすい。

書籍であれば、

送料は客持ちで、ゆうパックか宅配便での返送が可能とのこと。



こうゆう面倒な作業は早めに済ませてしまうに限る、

ってんで、

サクサク梱包して、コンビニで宅配手続き。



1,500円の本を返品するのに640円かかった(>_<)

まぁ小額ではあるが、自分のウッカリが情けない。



そういえば、ゆうパックでも返送可能だったな。

帰ってからWebでゆうパックの利用料金を見ると・・・

書籍であれば、なんと宅配の1/3の送料。



これはしたり。

輸送料の値段に疎かった。



注文ミスのウッカリに加え、返品時にもウッカリ。

もう間違えないぞ。



来年の手帳

来年の手帳を決めました。

「手帳は高橋」でおなじみの、高橋書店の手帳。

「ニューダイアリーミニ1」

この手帳、以前にも使ってたことがあるんです。





2006~2008の最近の三年間、

バイブルサイズのシステム手帳を使ってみた。

当然、カスタマイズ性が高く、

自分の気に入った構成にできる。

主に使っていたのは、ダヴィンチの「週間3」





・いわゆるレフト式

(左が一週間のスケジュール、右がメモ)であること

・スケジュールには、時間軸がないこと

・土日だけが狭くないこと



という、ワシが望む条件を満たしている。



ほかにも

・豊富なメモ欄

という条件があるが、この条件はもちろん、

システム手帳であればメモリフィールを買って来て

追加すればいいだけの話。



・・でも。

デカいんです。重いんです。かさばるんです。

わかってはいるんですよ。もちろん。

でも、根がナマカワ(名古屋弁でいいかげん、適当、という意味)

ワシは、便利なシステム手帳にいろいろと挟み込み、

大きくなってしまう。

もちろん、カバンも同じ。

だから、ギュウギュウのカバンに、ギュウギュウな手帳を

詰め込むことになる。

そんなに小さなカバンではないはずなのに、

カバンの中身の1/4くらいを手帳が占めているような感覚になる。



取り出すときも「よっこいしょ」という感覚になり、

手軽に取り出し、メモする、という手帳に求める機能が

スポイルされる。

だんだん手帳に書き込み、取り出して確認する、

という作業が面倒になる。



デカイ、重い、かさばる以外に不満は無かったのだが、

(それでも結構な不満か)

今回、切り替えてみることにした。



ミニ六穴は、以前につかったことがあるが、

リングが邪魔になって左ページに書き込みにくいので、パス。



となると、「綴じ手帳」しかない。

結局、システム手帳を使う前に使っていた、

「高橋のニューダイアリーミニ1」

に戻ることにした。





大きさが、こんなに違う。

でも、棄てなくてはいけない機能も多い。



・名刺やプリントアウトした書類などを

 気軽に挟み込むことはできない

・メモ欄が少ない



結局、システム手帳に切り替えた原因を、

またしても背負ってしまうことになる。

そしてまた、綴じ手帳の欠点が気になり、

システム手帳に切り替える、という振り子現象を

繰り返すんだろうか。



ダイゴーのハンディピックのように、

システム手帳と綴じ手帳の「いいとこどり」をしようという、

意欲的な製品もあるが、まだまだ不完全というか、

中途半端な印象がある。

(実際に使ってみたが、ワシにとってはとても使いにくかった)



手帳って、大好きなのに、なかなか自分のスタイルが

決まらなくて、もどかしい。

ひょっとして、こういった感覚を抱いている人は

少なくないのかもしれない。



というわけで、とりあえず来年はコレでいきます。

手帳どの。よろしくお頼み申しますぞ。





50万円の言葉

来年の手帳を高橋書店のモノにしたから、

というワケではないが、

「高橋の手帳」のCMが、結構好きだ。

こちら



「2009年の高橋は、大サービス。

GWが5連休、秋も5連休、ついてきます」

なんて、なかなか面白いコピーだと思う。



ほかにも「高橋をうならせたら50万」という企画がある。

心に沁みた名言に賞をあげる、という企画。



この中で、気に入ったものがあるので、ご紹介。



アメブロカスタマイズ講座(3)

「デザインできました~」という声を聞きませんが、

ぼちぼちはじめましょうか。

ここからはアメブロの話題です。



STEP1

作業を開始する前に、現在のデザインは保存しておいてください。

以降、実際のブログ(みんなに公開しているブログ)を本番ブログ、

PC上で操作しているものをローカルと呼びます。

前回お伝えしたように、テキストとしてCSSさえ保存しておけば、

作業の途中でも現在のデザインに戻したり、

作業途中の状態を保存しておくことが出来ます。



STEP2

現在のデザインを保存したら、

管理画面からいったんスキンを「ベーシック」にもどし、

「カラムを変更」して、基本的なレイアウトを決定します。

私は「3コラム-左」を選択しました。



STEP3

その後、「サイドバーの配置」で、メニュー内の配置を

決定します。

この決定は、後で変更すると、デザインが崩れる

可能性がありますので、サイドバーの配置は

この段階で決定しておきます。



決定したら、前回の記事に基づいて、

ブログページをローカル(PC)に保存します。



STEP4

ページをローカルに保存したらSTEP1で保存しておいた

デザインに戻します。

これで本番ブログのデザインはSTEP1の状態に戻っているはずです。



以降、ローカルPCで作業を進めますが、

作業の節目には作業途中であっても本番ブログで

表示テストを行います。





アメブロカスタマイズ講座(2)

今日は「ローカルで編集しよう」です。

アメブロ/ソネブロ共通の話題です。



インターネット上で何か操作をする場合「ネット上で~する」

というのに対し、自分のPCの中のファイルをいじる場合、

「ローカルで~する」

という言い方をします。



これまで、ブログの管理画面から

CSSやHTMLを操作されてきたかもしれませんが、

今後はステップ数も多くなりますし、失敗も増えてくると

思います。

そのたびにブログのレイアウトがぐちゃぐちゃになったり、

最初からやり直すのは、ホネが折れますよね。



そこで、ブログの内容をいったんPCに保存し、

「ローカルで」作業をして、

うまくいったら実際のブログのCSSを更新する、

という方法で進めます。



そうすれば、ブログは今の状態のまま、

いろいろとデザインを試したり、

試行錯誤をくりかえしたりすることができます。



自分のブログのトップページを表示し、

ブラウザから



ファイル>名前をつけて保存(IE)

ファイル>名前をつけてページを保存(FireFox)



とし、PCの任意のフォルダ(新規フォルダ)内に保存します。

このとき、「ファイルの種類」は「Webページ、完全」を

選択します。



保存したら「~htm」もしくは「~html」という

名前のファイルを開いてみましょう。

ブログページがブラウザによって開かれます。

これによって、

ブログのページが、PCに保存されたことがわかります。



ソネブロの場合、この~htmlの内容を

テキストエディタで直接編集します。



テキストエディタは、Windowsであれば「ノートパッド」などの

ものが最初から付属してありますが、

TeraPadなどの

フリーのソフトもあります。



アメブロの場合は、ローカルに保存した際に作成される

index_filesまたはindex.filesというフォルダ内にある、

10005750477.css

などの数字のついたcssファイルを、

同じくテキストエディタで編集します。

(他のcssファイルを編集することはありません)

(アメブロではHTMLは編集しません)



HTML、CSSともに、テキストエディタで編集するほか、

DreamWeaverなどのWebページ編集ソフトをお持ちの方は、

そちらを使ったほうが効率がよいと思います。



(ソフトの操作法については、ここでは触れません)



~htmlまたは~cssファイルを編集し、

編集した結果を~htmlファイルをブラウザで開いて確認、

という操作を繰り返します。



「とりあえず、ここまではうまくいった」

という節目では、htmlファイルまたはcssファイルを

別名で保存し、世代管理を行います。

こうすれば、どこかで大失敗しても、

最初まで戻らなくても済みます。

とりあえず、編集を始める前に現状のhtml、cssを

別名保存しておきましょう。

そうしておけば、少なくとも「今の状態」に戻すことはできます。



まずは、「ローカルで操作する」、すなわち



・ファイルをローカルに保存する

・ローカルでHTML、CSSの編集を行い、表示チェックを行う



という操作に慣れましょう。

アメブロの広告を見えなくする

アメブロに勝手に表示される広告を、

完全に見えなくすることに成功しました。



http://ameblo.jp/basaranet/



方法はこちら



ただし、この行為は、アメーバブログの利用規約に

反する可能性もあります。



ソネブロ完成

ソネットブログのカスタマイズも完了しました。



http://basaranet.blog.so-net.ne.jp/



やっぱり、こっちのほうがラクだったなぁ。



ちなみに、比較用のワシのアメブロ



ソネブロとアメブロでは、日記部とメニュー部が

入れ替わっていますが、これは同じにできます。



つまり、アメブロでもソネブロでも、

やろうと思えば自分の(ほぼ)思ったとおりに

改造できる、ということなんですね。



お付き合いいただき、ありがとうございました。

手法については、ゆっくり紹介していきます。





ふたつの”復活”

久しぶりにフツーの日記です。



ふたつのうれしい「復活」がありました。







ひとつは、メインPC。(写真1)

やっと退院してきました。

電源を交換して、修理費21,000円。

うーん。痛い。



さっそくつないで点検。

今のところ問題なさそうです。

また働いてもらわないとね。



もうひとつは、ミニ観葉植物の「ガジュマル」。(写真2)



10月終わり頃から葉が落ち始め、

最後は残りの葉がたった一枚になりました。



最後の一枚が落ちたら、コレはもう処分しよう、

と思っていたところ、12月になって、新芽が!



うーむ。すばらしい生命力。たくましさ。

これは見習わねば。



そして写真3。

これは「復活」ではないのですが、

感謝の意を込めて。



ワシのノートPCです。

主役のメインPCが不在の間、文句も言わず(当然ですが)

がんばってくれました。

ありがとう。

何かメダルかトロフィーでも贈りたいくらいです。



メインPCが不在の間、

ずいぶんとノートPCに更新したファイルや

新規ファイルが増えました。



今からしばらく、メインとノートの間の

ファイルの同期をとる作業をしなくてはなりません。



それにしても、ヨカッタヨカッタ。

ヘコんでなんか、いられませんよ。



PCががんばって、ガジュマルが復活しているというのに、

ワシがヘタレてる場合じゃありませんからね。



アメブロカスタマイズ講座(お知らせ)

ワシのアメブロのデザインカスタマイズが、

ほぼ終了しました。



http://ameblo.jp/basaranet/



苦労しました・・・(@_@;



これをどのようにみなさんにお伝えしようか、

考えています。



IEでは、ブラウザのバグのため、

広告部分の表示がおかしくなることがありますが、

その他のブラウザでは正常です。



ところで、ソネブロ(so-netブログ)のほうも、

いじりはじめています。

http://basaranet.blog.so-net.ne.jp/



ソネブロ特有の上部のバーを消したり、

広告を消したりするのは、アメブロの場合に比べると、

はるかにラクです。



でも、ソネブロは日記のテキストに広告がリンクされるのが

いただけませんね。

アメブロカスタマイズ講座(1-2)

昨日の「ブログデザインカスタマイズ講座(1)」

でお伝えするのを忘れていたことがあるので、

そのことについて記します。



・・・というか、参加いただいてますでしょうか??(^^;不安です



今日お伝えするのは「シームレス画像」についてです。



「シームレス」とは、「継ぎ目のない」という意味です。

以下の画像をご覧ください。





縦横に繰り返されても違和感のない、xyシームレスもあります。





このように、縦または横に繰り返して表示した場合、

画像が一枚に繋がって見えるような画像のことを

「シームレスな画像」といいます。

ブログデザインの、このような部分に使用します。



xとあるのはx軸シームレス、

yとあるのはy軸シームレスな画像を使います。



なぜ、このような画像にする必要があるのでしょう。



ブログを見るとき、ブラウザのサイズは人によってまちまちです。

また、日記の本文の量も、日によってまちまちですね。

「伸びたり縮んだりする画像」が必要になります。



百聞は一見にしかず。

この画像でその役割がお分かりいただけると思います。



作るのは、さほど難しいことではありません。

ラインやグラデーションなど、

単純な模様はシームレスであることが多いのです。



図20081210-01の画像も、よく見ると単なるグラデーション

であることがお分かりいただけると思います。



それでもシームレス画像を作るのは難しい、

という場合は、所定の部分をベタ(単色塗りつぶし)で

作成されるのが、後々ラクです。



デザイン性が多少落ちるのと、

画像を駆使してブログをゴリゴリカスタマイズする、

という楽しみは薄れますが、

初心者の方にはベタのほうがよいかもしれません。



以上のような点に留意をされて、

ページデザインを作成されるのがよいと思います。



アメブロカスタマイズ講座(1)

ではいよいよ、

ブログデザインのフルカスタマイズに入ります。



============================

この記事からブログのデザインを始められる方は、ぜひこれまでの

「ブログデザインに挑戦しよう」と「予備講座」

の記事も予めご覧ください。

これまでに掲載したステップや操作は、今後省略していきます。

また、今後も、一度掲載したステップは省略しますので、

よろしくお願いします。


============================



最初から、いきなり大きな壁が現れますが、

がんばりましょう。



第一回は「全体のページデザインを考える」です。



私はこのようなデザインを作ってみました。(原寸大)

これで今回の講座のデザインを進めてみようと思います。

途中で気が変わるかもしれませんが(^^;



今回のデザインは、先に紹介した

こちらのブログからアイデアを

参考にしつつ、オリジナルの要素を加えてみました。



原寸大で、ページ全体のデザインを作成します。

ページのメインとなる部分が800ピクセル程度

収まるようにします





毎回、部分ごとに必要なパーツ画像を作ってもいいのですが、

せっかく「フルカスタマイズデザイン」をするのですから、

このように一気にページ全部をデザインしてしまったほうが

全体のバランスを見てデザインすることができます。



「ページのメインとなる部分が800ピクセル程度」

である以外、他の部分のサイズは、

この段階ではさほど気にしません。



必要に応じて、画像に合わせてCSSの設定を変えたり、

CSSの設定に合わせて画像を作り変えます。

この段階では、「全体のイメージを作る」ことを

目的とします。



私はFireWorksでこの画像を作成しました。



実際に作業を進めていく上で

不可能であることが判明したり、

私にも方法がわからなかったりする場合には

そのつどデザインを変更する場合があります。



この画像が、全体のデザインのベースとなります。

(以降の作業の途中で修正も可)

ブログのデザインに必要なこまごまとした画像のパーツは、

このベースの画像から切り出して作成します。



ここでは日記本文などの文字を乗せていませんが、

実際に掲載されることになる日記などの

文字の色もこの時点である程度考えておきます。



デザインが完成されましたら、一度アップして、

このブログのコメントでお知らせいただくか、

ご自身のブログで公表してください。



ここでみなさんにページのデザインを作成していただくため、

かなり時間が必要だと思います。

しばらく(数日程度)このブログでは他の日記を書いたり、

ブログに関するコラムや予備講座を記したいと思います。





アメブロカスタマイズ講座(予備講座:2)

今回は

「”仮説”と”検証”でブログのデザインを変更してみよう」

という話題です。



これまでの内容に比べると少々レベルが高いので、

読んでもよくわからない場合は読み飛ばしていただいても

構いません。




これまでの「ブログデザインに挑戦しよう」や

今回の講座でも



「講座に記載された部分の変更はできるけど、

講座に書いてない部分を変更するにはどうしたらよいのか?」

という疑問が湧くと思います。



そこで

「ある特定の部分を変更するには?」

へのヒントをお伝えします。



どんなブログにも応用できますので、

アメブロ以外の方も参考になさってください。



たとえば、アメブロでこの部分を変更したいと思ったとします。





次のように操作します。



ステップ1

ここには「アメブロランキング」と書かれています。

この文字をコピーします。



ステップ2

ページを表示した状態でブラウザの

表示>ページのソース(FireFox)

表示>ソース

を選択しますと、HTMLのソース(このページのHTML文章)が

表示されます。



キーボード操作

「Ctrl」+「F」

で「文字列検索」をします。

先ほどの「アメブロランキング」を入力して、

この文字列が書かれている部分を探し出します。







見つかりました。

この記述の直前に、何が書かれているか、見てみます。



<h4 class="menu_title">



とあります。

このmenu_titleによって、

「アメブロランキング」の記述部分が定義されているらしい、

つまり、

CSSではmenu_titleという記述の部分で

この部分「アメブロランキング」のスタイルが

記述されているらしい、

という仮説を立てます

ソネットやアメブロ以外では、

別の名前で定義されていますので、

別途ご自身のブログのHTMLを検索してみてください。

なお、class=は、id=と記述されている場合もあります。

この違いについては別途記載します。



ステップ3

ブログの管理画面から、CSS編集

(ソネットの場合にはHTML編集)

を行います。



この中からmenu_titleと書かれている部分を検索します。



さて、こまったことに複数箇所に出てきました



.menu_title,

.mainMenu ul,

.mainMenu dl,

.mainMenu p,

.list,

.link_blog,

#archives select,

#theme_list select,

#search form{

margin-left: 6px;

margin-right: 6px;

}



という部分と



h4.menu_title{

margin:0 0 10px 0;

padding:3px 6px;

color: #333333;

background-color:#EFEFEF;

font-size:1.17em;

font-weight: bold;

}



という部分です。

前者は、menu_titleを含めた複数の定義を一気に行っています。

(カンマ”,”でつながっているのは、複数の定義を一度に

行っていることをあらわします。つまり、この部分の定義を

変更すると、menu_title以外の定義の部分のデザインも

変わってしまうことになります)


後者はmenu_titleだけの定義を行っています。



そこで、後者に目をつけ、

ここの



background-color:#EFEFEF;



という記述を



background-color:#ff0000;

(#ff0000は赤)

と変更してみます。



今は、

「menu_titleのCSS情報を変更することによって

”アメブロランキング”という部分のデザインを

変更できるはずだ」

という仮説を検証するための操作ですので、

できるだけ「変化」がわかりやすくなるように

定義を変更します。

そのために「背景を赤にする」ということにしています。



この変更を行って、ブログの表示を確認してみます。



「アメブロランキング」の部分が変わりましたね。

どうやら仮説は正しかったようです。



ただし、「アメブロランキング」以外の、

メニューのタイトル部分も変わってしまいました。

menu_titleは、

サイドメニューにあるタイトル部分のデザインを

定義している部分だったようです。



menu_titleがサイドメニューのタイトルを定義している部分だ、

ということがわかったので、後は自由にデザインします。



サイドメニュータイトル用の背景画像を用意し、

この部分を変更してみます。



h4.menu_title{

に、

background-image: url(背景画像のURL);

background-repeat: no-repeat;

を追加します。

no-repeatは「背景画像を繰り返さない」という意味です。

先に追加した背景色の設定は削除します。

CSSまたはHTMLを保存し、表示を確認します。







思ったとおりの変化ですね。

こうすることによって、自分が変えたい部分の「アタリ」をつけ、

変化させることができます。



必ずしも「仮説」が正しいとは限りませんので、

実際には試行錯誤が必要です。

ワシもスイスイとアメブロのデザイン変更を

しているわけではなく、

試行錯誤を繰り返しながら微調整を繰り返しています。



また、どうにもうまくいかないときはデザインを修正したり、

諦めたりすることもあります。



CSSの指定の仕方の細かい内容については

こちらに詳しく掲載されています。

もしくはCSSなどでググってみましょう。



=======

so-netの場合は、サイドメニューのタイトルは

sidebar-title

で定義されています。

so-netの場合には、自分でCSSの定義を追加する必要があります。



.sidebar-title{

background-image: none;

color:#ffffff;

background-color:#000000;

}

という記述を追加して、試してみましょう。



アメブロカスタマイズ講座(予備講座:1)

「ブログデザインに挑戦しよう」から発展して、

完全なるオリジナルのデザインに挑戦します。



実際の操作に入る前に、どうしても押さえておきたい知識を

紹介します。

一部の方は既にご存知のことかもしれませんが、

お付き合いください。



「ブログデザインに挑戦しよう」では、

とにかく「オリジナルのタイトル画像に変更する」という

ことを優先させたため、HTMLやCSSといった

テクニカルな説明については極力避けていました。



ブログデザインカスタマイズ講座では、

多少、前提知識として

HTMLとCSSの役割について

押さえておいていただきたいと思います。



歴史や経緯、細かい理屈まで抑えていただく必要は

ありませんし、

必要であればそのつど解説します。



「ブログデザインに挑戦しよう」では、

アメブロ編とソネット編を掲載しましたが、

アメブロ編では「CSSを編集」という画面を操作したのに対し

ソネット編では「HTMLを編集」という画面を操作しました。



この違いは何でしょう?



いろいろと歴史的な(といっても短いですが)経緯がありますし、

一概には言えない部分もありますが、

おおよそ次のようなものだと考えてください。



=======================

HTML

ページの論理的な構造と、ページの内容を記述する



CSS(スタイルシート)

ページのデザイン(スタイル)を記述する

=======================



ここでいう、「論理的な構造」とは、何でしょう?



どんなブログにも「タイトル」があり、

日記が複数件あり、

日記の中に日付や本文などがありますね。



タイトルの中にも主題と副題があったりします。



これが、論理構造です。



「タイトル領域」の中に「タイトル」と

「リーダ(ブログ解説文)」がある。

ですとか、



「日記領域」の中に「日付」「日記タイトル」「日記本文」

がある。

というような「入れ子」構造の定義の仕方をします。



HTMLでは

「タイトル領域とはどのようなものか」や、

「日記領域とは何ぞや」

ということはどうでもよく、

とにかく

「タイトル領域というものの中にタイトルがある」

「タイトルの内容は”バサラなブログ”である」

という構造そのものが重要です。



そしてCSSでは、具体的に

「タイトル領域とはどのようなものか」

「タイトルとはどのようなものか」

を記述して、スタイル(見た目)を決定します。



たとえば



タイトル領域とは、高さが200ピクセルで、

背景画像がXXXX.jpgである。



タイトル領域の中にあるタイトルとは、

文字の大きさが12ピクセルで、

文字の色は白で、

縦横の余裕は0ピクセルである



というようなカンジです。



HTMLからCSSを呼び出し、HTMLの文章構造をCSSでデザインする

ことによって、ページの「見た目」が決定されます。



きちんとした「作法」に則れば、

HTMLとCSSは別のファイルに記述します。



ファイル名は通常、

HTMLの場合はXXX.html、

CSSの場合はXXX.css

となります。



しかしCSSの記述はHTMLの中に含めてしまうこともできます。

「ブログデザインに挑戦しよう」のソネット編で

行ったのがこの方法で、

ソネットではHTMLファイルしか編集できないため、

HTMLの中に直接CSSの情報を記述しました。



裏を返せば、

ソネットではHTMLしか編集できないと言うものの、

HTMLの中にCSSを記述することができるため、

HTML、CSSの両方をいじる(編集する)ことができる。

ということになります。



逆に、アメブロではCSSファイルしか編集することが

できません。

CSSの中にHTMLを記述することはできないため、

アメブロではHTMLを編集することができません。



となると、

ソネット・・・HTMLとCSSの両方を編集することができる

アメブロ・・・CSSしか編集できない



ということになり、

アメブロよりもソネットのほうがデザインカスタマイズしやすい、

ということになります。



今回はHTMLとCSSの関係と役割を理解していただいたところで

終わりにします。



さらに詳しくは

HTML

CSS

(いずれもWikipedia)

をご覧ください

アメブロでここまでできるらしい

アメブロ(アメーバブログ)で、

ここまでデザインのカスタマイズができる、

という好例。



http://ameblo.jp/ameba-custom/



うーむ。

これはすごい。

アメブロであることが、ほとんどわかりませんね。



こうゆうのを見ると、燃えてきます。

いっちょやったる?

ってカンジで。



もし連載したら、どなたか付き合ってくれるかな~。

「なにも苦労してここまで・・」

ってカンジになっちゃいます?



ホントのフォント

今日はフォントのお話にします。



年賀状ソフトなどを買うと、フォント(書体)が

たくさん付属していて、

思わず、いろいろと試してみたくなってしまいますね。



年賀状や、個人的な文書であれば、

楽しみとしていいと思いますが、

商売等に使う場合は、書体の選択は慎重に行う必要があります。



まずは、この画像をご覧ください。



同じ「好評分譲中」ですが、

Aは

「売れ残った物件が安くなっているのかな?」

という印象で、

Bは

「また都心に高級マンションでも建ったのかな?」

という印象になりませんか?



・・なりません?

なってください(=_=;



この場合、フォントの選択をはじめ、

色の使い方や余白の採りかたで、

印象を変化させることができる、

ということがわかりますね。



何も「高級/安売り」の印象を左右させるだけではありません。



本の表紙として、こんな二冊があったら、どうでしょう



ここではタイトルを変えていますが、

Aは

「ジャンジャン売って、稼ごうぜ!」

という勢いを感じるのに対して、

Bは

「どうやって売れる仕組みにするか、考えてみましょう」

という、落ち着いた印象になると思います。



たぶん、Aは叩き上げの創業社長が書いた本で、

Bはコンサルタントか学者が書いた本なんじゃ・・・

というところまで、ワシの場合は想像しちゃいます。



Bの場合は、細めのゴシックでも、似たような印象を

与えることができます。



他にも



のように、

フォントの選び方で与える印象を左右させることが可能です。



また、変わったフォントや太字のフォントは、

タイトル文字などに限定して使うべきで、

本文に個性的なフォントを使うと、

読むのに疲れてしまいます。



ご自身の商材や、サービスの内容、

訴求ポイントなどを勘案して、

書体も慎重に選ぶと、

送り手の「訴えたいこと」と

受け手の「受ける印象」の

ギャップを避けることができます。



画像処理ソフト

「ブログデザインに挑戦しよう」のコーナーは、

とりあえず当初の目標の

「タイトル画像を入れ替える」を成し遂げ、

一区切りついたので、

今回はここまでにします。



また小ネタを思いついたり、リクエストをいただたら、

ボチボチ追加していくつもりです。



ところで、「ブログデザインに挑戦しよう」では

”何かしらの画像処理ソフトを持っていて、使えること”

という条件で進めていましたが、

この条件のために前に進めない方もいらっしゃるようです。



そこで、画像処理ソフトについての案内をします。



まずは、手持ちのPC(パソコン)に予めインストールされている

画像処理ソフトが無いか、確かめて見ましょう。



NEC製や富士通製などの国内有名メーカのPCや、

DELLのPCの一部の機種には

PaintShopProやPhotoShopElementという、

一般向けとしてはかなり高機能な画像処理ソフトが

バンドル(付属)されていることがあります。



また、デジカメやフォトプリンターなどに

こういったソフトがバンドルされていることもあります。



ただ、最近はデジカメやプリンタに付属しているソフトは、

デジカメ等のメーカのオリジナルソフトであることも多く、

それらのソフトが「ブログデザインに挑戦しよう」の

企画に適しているかどうかは、私にはよくわかりません。



次にフリー(無料)の画像処理ソフトを探してみましょう。

Windowsユーザがフリーソフトを探す場合、

Vector



窓の杜

というサイトで探すのが、定番です。



このサイトで画像処理ソフトを見てみますと

Vectorの画像処理ソフト

窓の杜の画像処理ソフト

など、

無料で使える画像処理ソフトがたくさん登録されています。



これらをダウンロードして、

試してみてはいかがでしょうか?



ただし、これらのサイトに登録されているソフトの中には

シェアウェアや製品版(いずれも有料)のソフトが

含まれていますので、ダウンロード前によく表示を

確認してくださいね。



私は有料の画像処理ソフトを持っていますので、

これらのフリーソフトを試したことはありません。

フリーソフトはやはり機能的にかなり限定されていたり、

単機能のソフトを組み合わせなくてはならないなど、

不便であることは確かだと思います。



やはり、それなりの画像を作ろうと思った場合、

有料ソフトの力を借りたほうがよいと思います。



さきほども紹介したPaint Shop Pro



や、PhotoShopElement



などは、1万円台という、

画像処理ソフトとしてはお買い得な値段で買うことができます。



1万円台は高い?

確かに高いですが、プロ向けは4~9万円しますからね~・・



一応、プロに愛用されているソフトも紹介します



画像処理(ビットマップ、フォトレタッチ)ソフトの

定番中の定番です。

印刷物や広告関連業界の方々には、おなじみのソフトです。

非常に高度な機能が搭載されていますが、

使いこなすのは大変です。





ウェブデザインに特化された画像処理ソフトです。

使い勝手がよく、私も愛用しています。



一度フリーソフトで試されてから、

有料ソフトを検討されるのがいいと思います。



ここで紹介したサイトやソフト以外で、

他によいサイトやフリーの画像ソフトなどをご存知の方が

いらっしゃいましたら、ぜひコメントを通じて

教えてください。







ブログデザインに挑戦しよう(アメブロ編:3)

「ブログデザインに挑戦しよう」のアメブロ編、その3です。



ここらへんから、少々複雑になってきます。

「ギブアップ!」

の方が出てくるような気がしています・・・



また、ここからの作業は、特に必要の無い方も

いらっしゃると思いますので

「できました!」

というコメントが少なくなるような気がしています。



今日のステップに入る前に、「色コード」のことについて

お伝えします。

(少々乱暴な説明ですが、初心者の方には以下のような

理解で充分だと思います)



HTMLやCSSなどのウェブデザインの世界では、

色を「コード」で設定します。

たとえば、白は#FFFFFF、黒は#000000

というように表します。



色コードについては、こちらをご参照ください

もしくは「色 コード」でググるといいと思います。



では、今日の説明に入ります。



前回、ヘッダ画像に「タイトル文字」を入れた方は、

実際のブログをご覧になると、

画像のタイトル文字と、ブログのタイトル文字が

被ってしまっていると思います。



こんなカンジです。





ところで、このブログ(今ご覧になっている「バサラなブログ)

のヘッダ画像にマウスカーソルを持っていってみてください。



ヘッダ画像全体が、ブログのトップページに

リンクされていますよね。



今回のステップでは、

このように、画像のタイトル文字とブログのタイトル文字の

「被り」を解消するとともに、

画像のタイトル文字をクリックできるようにします。



結構大変ですよ。



ステップ5



まずはタイトル文字の大きさと色を変えてみます。



アメブロ管理画面>デザインの変更>スキンCSSの編集



から、以下のような記述を探し出します。



div#header h1{



よく似た記述がありますので、

間違えないようにしてくださいね。



div#header h1{

から、その下の

}



までの間では、タイトル文字の大きさなどを指定しています。

この



div#header h1{

margin:0;

padding:0 5px 8px 5px;

font-size:3em;

font-weight: bold;

line-height:1.2;

}




(選んだスキンによっては内容が異なる場合があります)

を、以下のように編集します。



div#header h1{

margin:0;

padding:0;

font-size:12px;

font-weight: bold;

}




ここで一旦「保存」し、

表示を確かめてみましょう。



ずいぶんとタイトル文字が小さくなりましたよね?



ちなみに上記の意味は

「タイトル文字の大きさは12ピクセルの太文字で、

上下左右の余裕は0ピクセル」

という意味です。



ステップ6



次に、タイトル画像の「クリックできる位置」を

おおまかに決めます。







クリックできる位置の高さ(A)と、

サイト紹介文章を入れる位置の高さ(B)を

ピクセル単位で計っておきます。



私の場合はAが143ピクセル、

Bが57ピクセルでした。

高さを200ピクセルでタイトル画像を作った場合には、

A+Bは200になるはずです。



しかし、これは大まかでかまいません。

ただし、合計がタイトル画像の高さを超えないことが大事です。



・・・ついて来てますか??



ステップ7



「スキンCSSの編集」から、以下の記述を探し出します。

先ほど編集した部分の下です。



div#header h1 a{



この部分の



div#header h1 a{

color:#333333;

}




を、以下のように編集します。



div#header h1 a{

color:#FFFFFF;

height: 143px;

display: block;

}




ここでの

height: 143px;

は、さきほど計った図6-1のAの高さを入力します。

また

color:#FFFFFF;

は、「タイトル文字の色を白にする」という意味で、

この色を背景画像とよく似た色にすることで、

タイトル文字を隠してしまうことも可能です。

お好みの色をコードで設定してください。



ここで一旦「保存」し、ブログを確認してみます。

タイトル画像がクリックできるようになっていますか?



ステップ8



ここまでできた方は、だいぶコツを掴んでいらっしゃると

思います。



今日の最後は、「ブログの説明文章を配置する」です。

ブログの説明文章は



アメブロ管理画面>アメブロの設定>概要



に入力されている文章です。

ブログサービスによってはこの文章を消してしまうことも

できるのですが、アメブロではできなようですので、

うまく配置を考えます。



「スキンCSSの編集」から、以下の記述を探します。





div#header h2{

margin:0px;

padding:0 5px 45px 5px;

font-size:1.0em;

font-weight: normal;

line-height:1.2;

}





この文章を、以下のように編集します。



div#header h2{

margin:0px;

padding:0;

font-size:12px;

font-weight: normal;

color: #FFFFFF;

height: 57px;

line-height: 150%;

}




もうおわかりですね?

height: 57px;

は、図6-1のBの高さ、

color: #FFFFFF;

は「文字の色を白に」という意味です。

ご自身で調整してみてください。



ここで一旦「保存」し、表示を確認してみましょう。

文字が出てくれますが、左側にピッタリとくっついて、

なんだかバランスがイマイチですね。







右方向に400ピクセルほど移動させます。

先ほど編集した記述を、以下のように書き換えます。



div#header h2{

margin: 0 0 0 400px;

padding:0;

font-size:12px;

font-weight: normal;

color: #FFFFFF;

height: 57px;

line-height: 150%;

}




この中の「400」という数値は、ご自身のタイトル画像によって

調整してみてください。



さて、どうでしょう!



ワシのアメブロ



タイトル文字の被りが無くなり、

タイトル画像がクリックでき、

説明文章の位置が調整できましたね!



どうでしょう、「できました!」

ってコメント、いただけるかな・・・

楽しみにしています。



あ~、ツカレタ・・・(^^;



====

追記



ワシのアメブロでは、背景の色も変えました。

「スキンCSSの編集」の中の

body {

・・

}



の中にある

background-color: #ffffff;

という記述を

background-color: #000000;

に変更しただけです。

周りを黒くするだけで、全体がグッと締まりますね。



色コードを変更すれば、いろんな色にして

楽しむことができます。

ぜひお試しを。

Do they know it's Christmas?

80年代に洋楽狂いしていた人にとっては、

「奇跡の出来事」と言っても差し支えないでしょう。



1984年、

Do they know it's Christmas?

という曲が発表され、

当時人気だったミュージックビデオ番組で

放映されました。



BAND-AIDという名の下、

80年代を代表するイギリス・アイルランドのミュージシャン達が

レーベルやジャンルの壁を乗り越えて集まり、

曲を制作したのです。



当時の音楽シーンを知る者にとっては、

信じられないほど豪華なメンバーが揃っています。







今でもミュージシャンによるチャリティなどが

よく行われています。

60年代にもウッドストック・フェスティバルという、

伝説的な音楽フェスティバルが開かれたことがあります。



でも、この「Do they know it's Christmas?」は、

ワシ自身が洋楽狂いだった時期に発表されたため、

衝撃はハンパなものではありませんでした。



当時のワシは学生で、財布が寂しかったため(今もですが)

曲の発表から5年以上たってから

この曲のCDを買おうとしました。

しかし、これだけの名曲だったにも関わらず

すでに廃盤になっており、

手に入れるのにとても苦労しました。



当時はまだネットショッピングも発達しておらず、

CDショップを探し回ったのです。

新品を見つけた場合、多少の出費を覚悟していましたが、

定価で新品を見つけたときには、わが目を疑いました。



・・そして10年以上。

今もそのCDは手元にあります。



ワシの宝物です。



今では、最近のアーティスト達による

リメイク版などが出ているものの、

オリジナル版は10年以上前でさえ手に入れるのに苦労したので、

今では非常に入手が困難だと思います。



今でもクリスマスシーズンになるとFMでこの曲が流れることが

多いのですが、クリスマスソングの中では

マイナーな部類に入るでしょうね。



でも、この高尚な歌詞や

当時の音楽シーンを髣髴とさせるメロディは

いまでも聴いていてシビレます。



There's a world outside your window

あなたの窓の外側には別の世界がある



pray for the other ones

他人のために祈ろう





It's Christmastime; there's no need to be afraid

At Christmastime, we let in light and we banish shade

And in our world of plenty we can spread a smile of joy

Throw your arms around the world at Christmastime

But say a prayer to pray for the other ones

At Christmastime



It's hard, but when you're having fun

There's a world outside your window

And it's a world of dread and fear

Where the only water flowing is the bitter sting of tears



And the Christmas bells that ring there

Are the clanging chimes of doom

Well tonight thank God it's them instead of you

And there won't be snow in Africa this Christmastime



The greatest gift they'll get this year is life

Oh, where nothing ever grows, no rain or rivers flow

Do they know it's Christmastime at all?



Here's to you, raise a glass for everyone

Here's to them, underneath that burning sun

Do they know it's Christmastime at all?



Feed the world

Feed the world



Feed the world

Let them know it's Christmastime again

Feed the world

Let them know it's Christmastime again

 | HOME |  »

Recent Entries

Recent Comments

Recent Trackbacks

Appendix

koji2009

koji2009

FC2ブログへようこそ!

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。