カフェスクールも卒業となるので、そろそろこちらも準備中。
デザイン確定するまで、コロコロと変わる様をお楽しみくださいｗ。
- オープンに向けて準備中〜 (2011年09月15日)
- まずはファビコン (2011年09月18日)
- そしてテンプレートだけど…… (2011年09月20日)
- スタイル編集前の準備 (2011年09月20日)
- デザインが固まらない (2011年09月21日)
- 色を変えてみる (2011年09月24日)
- 近況報告 (2011年09月25日)
- 明日から (2011年09月26日)
- 働きつつも場所交渉 (2011年09月27日)
- 近くて遠い (2011年09月28日)
2011年09月15日
2011年09月18日
まずはファビコン
せっかくなのでしばらくは、ブログの設定をしながら何処をどうイジッたのか分かるように書いていきます。
ということでまずはファビコン。なんかこう、自分はけっこう細かいところから設定していく癖があるようです。
これがファビコンとか言われてるとこ。細かいとは言え、オリジナリティを出そうとするとそこそこ大事なポイントじゃないかなと思います。で、設定の仕方は、
１）16x16pxの画像ファイルを作って、拡張子を「ico」に変更。
２）ファイルマネージャーでアップロード。
３）HTMLの<HEAD>〜</HEAD>の中に、<link rel="shortcut icon" href="icoファイルの絶対アドレス">を挿入。
ってな感じですね。店名ロゴになるであろう羽マークを使うことにしますが、以前作ったときから、ちょっとだけデザイン変わりました。
左が前のデザイン、右が新しいデザインで、より羽っぽくなった？ まぁ、ほとんどの人は「どっちでもいいやん」って思うでしょうが。
以上のような感じで、今日はここまで。
むしろ、早くシーサーブログの管理画面に慣れないと……。
ということでまずはファビコン。なんかこう、自分はけっこう細かいところから設定していく癖があるようです。
これがファビコンとか言われてるとこ。細かいとは言え、オリジナリティを出そうとするとそこそこ大事なポイントじゃないかなと思います。で、設定の仕方は、
１）16x16pxの画像ファイルを作って、拡張子を「ico」に変更。
２）ファイルマネージャーでアップロード。
３）HTMLの<HEAD>〜</HEAD>の中に、<link rel="shortcut icon" href="icoファイルの絶対アドレス">を挿入。
ってな感じですね。店名ロゴになるであろう羽マークを使うことにしますが、以前作ったときから、ちょっとだけデザイン変わりました。
左が前のデザイン、右が新しいデザインで、より羽っぽくなった？ まぁ、ほとんどの人は「どっちでもいいやん」って思うでしょうが。
以上のような感じで、今日はここまで。
むしろ、早くシーサーブログの管理画面に慣れないと……。
2011年09月20日
そしてテンプレートだけど……
「２カラム／右メニュー／幅1000px」のテンプレート探してみたけど、この「超シンプル」しかないのん？ 本当にシンプルなんですけど……。
しょうがないから、こっからイジることにするけれども、元となるテンプレート選ぶときは、
１）全体のレイアウト（３カラムor２カラム、メニューの位置、各カラムの幅、等）
２）各コンテンツの構成（記事の枠、タイトル、メニュー見出しの大きさや形、等）
３）文字や段落のレイアウト（カラム間、枠と文字とのマージン、等）
……などの部分が、自分が作りたいページのイメージと合致しているか考えながら選んだほうが良いかなと思います。
パッと見、最初に表示されてる画像とか、全体のカラーとかに目が行きがちですけど、画像やカラーの変更は比較的カンタン。でも、上で書いてあるような、各コラムの幅とか枠と内容のマージンとかは、相互に関係する部分が出てくるので、HTMLとかスタイルシートとかある程度触ったことがないと「ハマる」可能性が高いです。
というのはもちろん初心者さん向けのアドバイス。「スタイルシートなんて自由自在だぜ！」とかいう人は、そんなん気にせずに自由にやっちゃってください。
それにしても、管理画面がある程度重たいのを承知のうえでシーサー選んだつもりだけど、テンプレート選ぶ画面が死ぬほど時間かかるよ……。まぁ、最初だけのガマンか。
しょうがないから、こっからイジることにするけれども、元となるテンプレート選ぶときは、
１）全体のレイアウト（３カラムor２カラム、メニューの位置、各カラムの幅、等）
２）各コンテンツの構成（記事の枠、タイトル、メニュー見出しの大きさや形、等）
３）文字や段落のレイアウト（カラム間、枠と文字とのマージン、等）
……などの部分が、自分が作りたいページのイメージと合致しているか考えながら選んだほうが良いかなと思います。
パッと見、最初に表示されてる画像とか、全体のカラーとかに目が行きがちですけど、画像やカラーの変更は比較的カンタン。でも、上で書いてあるような、各コラムの幅とか枠と内容のマージンとかは、相互に関係する部分が出てくるので、HTMLとかスタイルシートとかある程度触ったことがないと「ハマる」可能性が高いです。
というのはもちろん初心者さん向けのアドバイス。「スタイルシートなんて自由自在だぜ！」とかいう人は、そんなん気にせずに自由にやっちゃってください。
それにしても、管理画面がある程度重たいのを承知のうえでシーサー選んだつもりだけど、テンプレート選ぶ画面が死ぬほど時間かかるよ……。まぁ、最初だけのガマンか。
スタイル編集前の準備
昨日選んだ超シンプルなスタイルシートをいじっていきますが、実際はまだ具体的なデザイン案は無いんですよね……。
とりあえず前準備として、ブログの管理画面で表示させたスタイルシートの内容を、新規テキストファイルとして保存して、これを編集用のファイルにします。
拡張子が「.html」となっているのがHTML、「.css」となっているのがスタイルシートで、中身はただのテキストファイル（メモ帳とかで開けるファイル）です。いちお、慣例にならって拡張子変えましたが、ブログで必要なのは中身だけなので普通に「.txt」でも構いません。
わざわざこうやって編集用のテキストファイルを作るのは、ブログの管理画面で直接いじるのが重い……とかいう以前に作業しづらいから。それに、こうやってオリジナルのスタイルシートもきちんと残しておけば、いつでも元に戻せますしね。
ちなみに自分が使っているテキストエディタはTeraPad。基本、何でもシンプルなものが好きなんです。
ということで、何のデザインも変わってませんが今日はここまで。
接近中の台風15号に備えます（ここ最近、ワカヤマが超ヤバイんですけどー？）
とりあえず前準備として、ブログの管理画面で表示させたスタイルシートの内容を、新規テキストファイルとして保存して、これを編集用のファイルにします。
拡張子が「.html」となっているのがHTML、「.css」となっているのがスタイルシートで、中身はただのテキストファイル（メモ帳とかで開けるファイル）です。いちお、慣例にならって拡張子変えましたが、ブログで必要なのは中身だけなので普通に「.txt」でも構いません。
わざわざこうやって編集用のテキストファイルを作るのは、ブログの管理画面で直接いじるのが重い……とかいう以前に作業しづらいから。それに、こうやってオリジナルのスタイルシートもきちんと残しておけば、いつでも元に戻せますしね。
ちなみに自分が使っているテキストエディタはTeraPad。基本、何でもシンプルなものが好きなんです。
ということで、何のデザインも変わってませんが今日はここまで。
接近中の台風15号に備えます（ここ最近、ワカヤマが超ヤバイんですけどー？）
2011年09月21日
デザインが固まらない
ということで、本日の進展はなし。というか当分ないかも。
その代わりといっては何ですが、リアルのほうでちょいと動きましょう。
その代わりといっては何ですが、リアルのほうでちょいと動きましょう。
2011年09月24日
色を変えてみる
あまりにも白すぎてのっぺりしてたので、背景を「ラポラポオレンジ（注：ただのオレンジです）」に変更してみました。スタイルシートでいうと、こういうとこ。
body {
text-align: center;
margin: 0;
padding: 0;
color: #333333;
background-color: #FF9900;
}
中カッコ｛ ｝の外に書かれている中身がスタイルで、外に出ている（この場合はbody）が名前。「bodyの部分はこういうスタイルにしてくださいね〜」っていう表記です。で、bodyっていうのが、こういうホームページでいうところの、一番大元の要素、色だけで言えば一番うしろに表示される部分ですね。
まぁ、細かい部分はいいんですけど、色を表している部分は「color」と「background-color」。基本的な英語が分かればだいたい推測できますよね。前者が文字色で、後者が背景色。「#」以下の３桁or６桁の数字（カラーコード）で色を表現します。カラーコード表は探せばいろいろあるので（たとえばこちら）、どの色がどの数字とか覚える必要はないです。そして数は少ないですが、数字じゃなくてカラーネーム（「orange」とか「darkorange」とかありますね）でも表現できます。自分が思う色と同じコードを探して、書き換えればOKです。
ちなみに上のbodyの部分だけを書き換えると全面オレンジになってしまうので、メインの記事とか表示される部分（#container）の背景色は白（#FFFFFF）にしています。
#container {
width: 1000px;
text-align: left;
margin: 0 auto;
padding: 0 20px;
background-color: #FFFFFF;
}
……とか簡単そうに書いてみても、初心者からすると、上みたいなコードが出てきただけで拒絶反応が出て、理解しようとする意思が失せてしまうという現実（汗）。まぁでも、テキストエディタの検索機能で「color」とか「background」とか検索してジャンプしていけば、見たくない部分はスルーできますので、利用してみてください。
ま、今日はこの辺で。
body {
text-align: center;
margin: 0;
padding: 0;
color: #333333;
background-color: #FF9900;
}
中カッコ｛ ｝の外に書かれている中身がスタイルで、外に出ている（この場合はbody）が名前。「bodyの部分はこういうスタイルにしてくださいね〜」っていう表記です。で、bodyっていうのが、こういうホームページでいうところの、一番大元の要素、色だけで言えば一番うしろに表示される部分ですね。
まぁ、細かい部分はいいんですけど、色を表している部分は「color」と「background-color」。基本的な英語が分かればだいたい推測できますよね。前者が文字色で、後者が背景色。「#」以下の３桁or６桁の数字（カラーコード）で色を表現します。カラーコード表は探せばいろいろあるので（たとえばこちら）、どの色がどの数字とか覚える必要はないです。そして数は少ないですが、数字じゃなくてカラーネーム（「orange」とか「darkorange」とかありますね）でも表現できます。自分が思う色と同じコードを探して、書き換えればOKです。
ちなみに上のbodyの部分だけを書き換えると全面オレンジになってしまうので、メインの記事とか表示される部分（#container）の背景色は白（#FFFFFF）にしています。
#container {
width: 1000px;
text-align: left;
margin: 0 auto;
padding: 0 20px;
background-color: #FFFFFF;
}
……とか簡単そうに書いてみても、初心者からすると、上みたいなコードが出てきただけで拒絶反応が出て、理解しようとする意思が失せてしまうという現実（汗）。まぁでも、テキストエディタの検索機能で「color」とか「background」とか検索してジャンプしていけば、見たくない部分はスルーできますので、利用してみてください。
ま、今日はこの辺で。
2011年09月25日
近況報告
昨日はなにげにスルーしましたが、２日ほど空いていたところがあるので今日の分も含めて穴埋め。
■本日（9/25）
母親の希望があって家族写真の撮影とか。両親は無事に還暦を迎え、結婚生活もルビー婚を迎えたとのことでその記念です。あと、僕が実家に帰ってきて５人揃ったというのも理由らしいですけどね。
いちおう記念撮影なので、僕は普段着の中でもちょっとヨソ行きな感じのを選んだんですけど、親父と兄貴はフツーにフツーの普段着でしたわ。まーいいけど。
■一昨日（9/23）
小学５年生になる甥っ子の運動会。別に走ったりしてませんよ？ というか、めっちゃ天気が良くてめっちゃ日焼けした……。なので上で書いた写真は、腕とか鼻の頭が赤いです。
■一昨昨日（9/22）
エスプレッソマシン等購入のための最終商談完了。ということで、10月の頭には念願のエスプレッソマシンをゲットだぜ！
ちなみに、車のほうはまだまだ改造途中で、今はただのスズキのエブリィ。変身途中の写真くれるそうなので、ちょっとずつアップしていきます。
■本日（9/25）
母親の希望があって家族写真の撮影とか。両親は無事に還暦を迎え、結婚生活もルビー婚を迎えたとのことでその記念です。あと、僕が実家に帰ってきて５人揃ったというのも理由らしいですけどね。
いちおう記念撮影なので、僕は普段着の中でもちょっとヨソ行きな感じのを選んだんですけど、親父と兄貴はフツーにフツーの普段着でしたわ。まーいいけど。
■一昨日（9/23）
小学５年生になる甥っ子の運動会。別に走ったりしてませんよ？ というか、めっちゃ天気が良くてめっちゃ日焼けした……。なので上で書いた写真は、腕とか鼻の頭が赤いです。
■一昨昨日（9/22）
エスプレッソマシン等購入のための最終商談完了。ということで、10月の頭には念願のエスプレッソマシンをゲットだぜ！
ちなみに、車のほうはまだまだ改造途中で、今はただのスズキのエブリィ。変身途中の写真くれるそうなので、ちょっとずつアップしていきます。
2011年09月26日
明日から
お仕事です。と言っても本営業ではなくて……最後の資金稼ぎです。
だってまだ車も完成してないんだし、ちょうどいいんじゃね？ってことで……。
だってまだ車も完成してないんだし、ちょうどいいんじゃね？ってことで……。
2011年09月27日
働きつつも場所交渉
今日から働かせていただいているのは昨年末にもお世話になったところですが、実は近くに営業場所として狙っているところがあるので、明日の昼休みにでも交渉してみようとか思っている次第。
とにかく一箇所でもOK貰えると、だいぶ気がラクになる気がします。
とにかく一箇所でもOK貰えると、だいぶ気がラクになる気がします。
2011年09月28日
近くて遠い
今日、知り合いから「こんど三重に行くんだけど、ついでに和歌山にも寄ろうかと思って。予定空いてるー？」と電話もらったんですが、三重と和歌山って隣接はしてるけど実はすごく遠いんですよねー。まぁ、県境付近の市町村同士や飛び地の北山村とかはもちろん近いわけですが、たとえば県庁所在地の津市と和歌山市だと車使っても電車で行っても３時間以上はかかる道のり……。なので「ついで」には寄れない位置関係でございます。
……とか言いいつつ実際はそこが問題なのではなくて、来ると言ってきた日（Ｆ１があるらしい）が僕のほうもお出かけなのでちょっとゴメンナサイとなりました。
ということで来週末の土日、我が母校・会津大学学園祭「蒼翔祭」に出かけます。たしか去年は北海道から和歌山への移動の途中で立ち寄った気がしますが、そんな感じで今年も顔を出すので、関係者諸君でヒマな人はぜひお相手をしてください。よろしく〜。
……とか言いいつつ実際はそこが問題なのではなくて、来ると言ってきた日（Ｆ１があるらしい）が僕のほうもお出かけなのでちょっとゴメンナサイとなりました。
ということで来週末の土日、我が母校・会津大学学園祭「蒼翔祭」に出かけます。たしか去年は北海道から和歌山への移動の途中で立ち寄った気がしますが、そんな感じで今年も顔を出すので、関係者諸君でヒマな人はぜひお相手をしてください。よろしく〜。
