Webデザ素人の自己鍛錬、自己啓発＆自己満足
まだまだひよっこです。
このページはカテゴリ「ブログカスタマイズ」の一覧です。
2007/07/09 20:11
ブログ作りの忘れ物
あっちの方でプリンタに対応させるのを忘れてたから、それをさっきちょこちょこっと修正。
修正といっても中身はこことほとんど変わらないから、ほんの数箇所だけ、所要時間約5分。うは。
あとファビコンも作り忘れてたから、カブの画像を縮小させただけの手抜き作品をうｐ。
それに伴ってこっちの方もいくつか修正。別にやらなくてもいいような細かいところだけど、あっちを直したんだからこっちも直さないと、ってそんな気持ちに駆られてしまってやむなく。
なんだろう、ライバルがいると負けてたまるか！って思う気持ちから良い相乗効果になってるのかな～って全然違うかｗ
今日はこんなところで終了。
明日からは・・CSSを勉強するためだけのブログを作るかもしれない。若しくはつくらないかもしれない。
断言はしない。そんな適当人生。
修正といっても中身はこことほとんど変わらないから、ほんの数箇所だけ、所要時間約5分。うは。
あとファビコンも作り忘れてたから、カブの画像を縮小させただけの手抜き作品をうｐ。
それに伴ってこっちの方もいくつか修正。別にやらなくてもいいような細かいところだけど、あっちを直したんだからこっちも直さないと、ってそんな気持ちに駆られてしまってやむなく。
なんだろう、ライバルがいると負けてたまるか！って思う気持ちから良い相乗効果になってるのかな～って全然違うかｗ
今日はこんなところで終了。
明日からは・・CSSを勉強するためだけのブログを作るかもしれない。若しくはつくらないかもしれない。
断言はしない。そんな適当人生。
2007/07/08 21:59
MT Smileysと無料ライセンス
あっち用に新しい顔アイコンを描き描き。
で、早速コメント部分に適用させたんだけど、エントリ側にも適用させようとしたらちょっと問題が。
っていうのも、コメントの方にアイコンを適用させるにはテンプレに記述してあるアドレスを変更するだけでいいんだけど、エントリ投稿画面の方に適用させるにはMTのファイル自体を書き換えないとダメ。
そしてそのMTのファイルは1つだけ。
このWebデザインブログも、まだ残してあるWebデザインSubブログも、全て1つのMTの中にあるもの。
だからコメントの方はブログ毎にアイコンを変える事ができるけれど、エントリ側は全て共通のものになってしまう、っていう訳。たぶん。
これを解決する方法は恐らく
金払って複数のMTを使えるライセンスを買え！！
ってことなのかなｗ
ここは無料の個人ライセンスだから、MTは1つしかインストールできないからね。
参った参った、まぁ向こうかこっちのどちらかでアイコンを使わなければいいだけの話なんだけど
で、早速コメント部分に適用させたんだけど、エントリ側にも適用させようとしたらちょっと問題が。
っていうのも、コメントの方にアイコンを適用させるにはテンプレに記述してあるアドレスを変更するだけでいいんだけど、エントリ投稿画面の方に適用させるにはMTのファイル自体を書き換えないとダメ。
そしてそのMTのファイルは1つだけ。
このWebデザインブログも、まだ残してあるWebデザインSubブログも、全て1つのMTの中にあるもの。
だからコメントの方はブログ毎にアイコンを変える事ができるけれど、エントリ側は全て共通のものになってしまう、っていう訳。たぶん。
これを解決する方法は恐らく
金払って複数のMTを使えるライセンスを買え！！
ってことなのかなｗ
ここは無料の個人ライセンスだから、MTは1つしかインストールできないからね。
参った参った、まぁ向こうかこっちのどちらかでアイコンを使わなければいいだけの話なんだけど
2007/07/02 22:28
ブログリニューアル完了！
移行完了～！
できて・・るよね？たぶん。
細かいところは確認してないけど、向こうもこっちも同じMTだからテンプレをコピペするだけで問題はないはず。
これにてリニューアル終了～！やっほい。
さてさて、さっきいくつかログを漁ってたんだけど、そういやこんなんあったんだなぁ。
すっかり忘れてた。
若干作りかけで放置中。
どうしよ
できて・・るよね？たぶん。
細かいところは確認してないけど、向こうもこっちも同じMTだからテンプレをコピペするだけで問題はないはず。
これにてリニューアル終了～！やっほい。
さてさて、さっきいくつかログを漁ってたんだけど、そういやこんなんあったんだなぁ。
すっかり忘れてた。
若干作りかけで放置中。
どうしよ
2007/07/01 21:22
ブログリニューアル-その12
終わったー。
index.ページの時点でもうほとんど出来上がってたみたいで、その他のページは修正する部分は数箇所しかない状態。
総作業時間15分！
昨日今日と忙しかったからなかなかこっちにまで手を回せなかったけど、別にまわさなくても良かったぐらいやる事が無くｗ
明日の夜、こっちのブログがヒヨコになってるかも
index.ページの時点でもうほとんど出来上がってたみたいで、その他のページは修正する部分は数箇所しかない状態。
総作業時間15分！
昨日今日と忙しかったからなかなかこっちにまで手を回せなかったけど、別にまわさなくても良かったぐらいやる事が無くｗ
明日の夜、こっちのブログがヒヨコになってるかも
2007/06/29 23:38
印刷用CSSでバグ連発
ブログリニューアル-その11
今日はトップページの印刷用CSSだけ制作。
そしてIE6，fx2，Opera9，NN7で問題が無い事を確認。
ただ制作中にはプレビュー画面においていくつか問題が出てこられたので、全てを書きとめさせてたも。
1．IE6で背景画像が表示されない
2．fx2で1ページしかプレビューできない
3．NN7でページ全体が左側に移動していて、右半分しか表示されない
まず1から。
参考：AIRE-PROJECT BLOGさんのIE6で背景を印刷するより
これは背景画像にrepeat以外を指定して、尚且つwidthやheightを指定しないと起こるIE6でのバグとのこと。相変わらずIE6は厄介だ
まぁ印刷用だから極力画像を減らしたほうがいいだろうし、背景画像は全部 display: none; で消しちゃったい。
続いて2。
参考：もじら組さんのトピックより
position:absolute; を使ってると起こるfirefoxのバグ、ということで position を static に変えたら無事に全ページプレビューできた。
Ver1時代からあるバグみたいだから早く直して欲しいねぇ。
最後は3。
これは結局原因が分からず。
ただページ全体のマージンを左にいくらか取ったら解決できた（他のブラウザでも問題なし）から、まぁいいやーってそんな感じ。
いつも一番厄介な存在だったOperaが今回は大人しかったなぁー。
これからもこのままでいて欲しいｗ
今日はトップページの印刷用CSSだけ制作。
そしてIE6，fx2，Opera9，NN7で問題が無い事を確認。
ただ制作中にはプレビュー画面においていくつか問題が出てこられたので、全てを書きとめさせてたも。
1．IE6で背景画像が表示されない
2．fx2で1ページしかプレビューできない
3．NN7でページ全体が左側に移動していて、右半分しか表示されない
まず1から。
参考：AIRE-PROJECT BLOGさんのIE6で背景を印刷するより
これは背景画像にrepeat以外を指定して、尚且つwidthやheightを指定しないと起こるIE6でのバグとのこと。相変わらずIE6は厄介だ
まぁ印刷用だから極力画像を減らしたほうがいいだろうし、背景画像は全部 display: none; で消しちゃったい。
続いて2。
参考：もじら組さんのトピックより
position:absolute; を使ってると起こるfirefoxのバグ、ということで position を static に変えたら無事に全ページプレビューできた。
Ver1時代からあるバグみたいだから早く直して欲しいねぇ。
最後は3。
これは結局原因が分からず。
ただページ全体のマージンを左にいくらか取ったら解決できた（他のブラウザでも問題なし）から、まぁいいやーってそんな感じ。
いつも一番厄介な存在だったOperaが今回は大人しかったなぁー。
これからもこのままでいて欲しいｗ
2007/06/28 21:33
マルチディスプレイっっ
無事に！
無事にマルチディスプレイになれたー！
片方でdreamweaverやfireworks、もう片方でブラウザでの確認、って便利だなぁ。
これはもう元の環境には戻れないかもしれん。
そいでこっちはビデオカード。
今までオンボードの865Gだったから、そこら辺で売ってるのならどれを買っても性能Upって感じだったんだけど、350Wっていう電源が心許ないのと、ゲームとか殆どやらないから3Dとか別にいいし、なにより安く済ませたいってことで条件を絞っていったら最後に残ったのがこの6200A。
ただ立ち上げ時に若干不安定な感じがあるんだよなぁ、やっぱ電源が足らないのかな
ブログリニューアル-その10
さて、さりげなく↑でアイコンを使ってるように、エントリーのほうでもアイコンを使えるようにテンプレを修正。
さぁ、残すは印刷用のページを作るだけっラストスパートいきまっせ！
無事にマルチディスプレイになれたー！
片方でdreamweaverやfireworks、もう片方でブラウザでの確認、って便利だなぁ。
これはもう元の環境には戻れないかもしれん。
そいでこっちはビデオカード。
今までオンボードの865Gだったから、そこら辺で売ってるのならどれを買っても性能Upって感じだったんだけど、350Wっていう電源が心許ないのと、ゲームとか殆どやらないから3Dとか別にいいし、なにより安く済ませたいってことで条件を絞っていったら最後に残ったのがこの6200A。
ただ立ち上げ時に若干不安定な感じがあるんだよなぁ、やっぱ電源が足らないのかな
ブログリニューアル-その10
さて、さりげなく↑でアイコンを使ってるように、エントリーのほうでもアイコンを使えるようにテンプレを修正。
さぁ、残すは印刷用のページを作るだけっラストスパートいきまっせ！
2007/06/27 21:07
ブログリニューアル-その9
今日もヒヨコのアイコンをいくつか追加。
エントリーページでのバグはちょっとやる気が出なかったから後回しｗ
っていうかそんなこたーどうでも言いのだ今日は。
待ちに待った液晶モニタ到着～！しかも2台！アーンドVGA！
マルチディスプレイに挑戦でぃ！
ただ電源が足りるか微妙だから、もしかしたら電源ユニットも買わんといけないかなぁという不安もありつつ、これからPCケースご開帳～！
エントリーページでのバグはちょっとやる気が出なかったから後回しｗ
っていうかそんなこたーどうでも言いのだ今日は。
待ちに待った液晶モニタ到着～！しかも2台！アーンドVGA！
マルチディスプレイに挑戦でぃ！
ただ電源が足りるか微妙だから、もしかしたら電源ユニットも買わんといけないかなぁという不安もありつつ、これからPCケースご開帳～！
2007/06/26 21:10
ブログリニューアル-その8
モニタが見づらいから長い事画面を見続けるのもキツイんで、今日は細かいところを少しだけ。
まずはコメントフォームにアイコンの追加。
ちょっと前からコツコツ書いていたヒヨコの画像がやっと日の目を見ることに！
細かいやり方は忘れたけど、このブログを始めるずっと前にムーバブルタイプを弄り倒してたときがあって、その時のプラグインがそのまま残ってたからあとは画像へのアドレスを変えるぐらいの簡単な作業。
とりあえずリンクを載っけとこ。
本家
MT Smileys
参考：21世紀のアフィリエイト通販生活さん
コメントとエントリー投稿で画像（絵文字）を使う
このMT Smileysはエントリー投稿画面（いわゆる管理画面）でも使うことができるんだけど、いや、できてたんだけど、何故かバグってるからそのまま放置中ｗ
これは明日のお仕事にしようかしら。
今日の弄りどころもう一つは検索フォームの追加。
場所はどこにしようか～って迷ったけど、やっぱりこういうのって上に置くのが基本だろうし、ってことで空白ありまくりの真ん中・・を避けて敢えて右上に。
このムーバブルタイプ3.xデフォの検索テンプレって内容がさっぱり分かんないから、削りに削ってたらかなりシンプルなものになってしまた。
さーて明日か明後日にモニタが届くらしい～楽しみ！
まずはコメントフォームにアイコンの追加。
ちょっと前からコツコツ書いていたヒヨコの画像がやっと日の目を見ることに！
細かいやり方は忘れたけど、このブログを始めるずっと前にムーバブルタイプを弄り倒してたときがあって、その時のプラグインがそのまま残ってたからあとは画像へのアドレスを変えるぐらいの簡単な作業。
とりあえずリンクを載っけとこ。
本家
MT Smileys
参考：21世紀のアフィリエイト通販生活さん
コメントとエントリー投稿で画像（絵文字）を使う
このMT Smileysはエントリー投稿画面（いわゆる管理画面）でも使うことができるんだけど、いや、できてたんだけど、何故かバグってるからそのまま放置中ｗ
これは明日のお仕事にしようかしら。
今日の弄りどころもう一つは検索フォームの追加。
場所はどこにしようか～って迷ったけど、やっぱりこういうのって上に置くのが基本だろうし、ってことで空白ありまくりの真ん中・・を避けて敢えて右上に。
このムーバブルタイプ3.xデフォの検索テンプレって内容がさっぱり分かんないから、削りに削ってたらかなりシンプルなものになってしまた。
さーて明日か明後日にモニタが届くらしい～楽しみ！
2007/06/25 21:26
モニタのスペックを意識したサイト作り
液晶モニタがお亡くなりになりました。
代わりに今はむかーし使ってたCRTを引っ張り出してなんとかやってるけど、解像度が1024＊768（液晶は1280*1024）だったりサイズが2インチ小さかったりで全く別の世界を見ているよう・・。
特に何このブログ。
黒バックに白文字って。
見にくいったらありゃしない！作った人出てきなさい！
へぃ。
そっかー。見る人みんな環境が違うわけで、そういうこと考えるとホント大変な世界だね。正解ってモンがない。
今までブラウザの違いだけ意識してたけど、解像度とかコントラストとかも意識していくべきなんかなぁ。
サイトの横幅は800px辺りが適当、ってなんかの本に書いてあったけど確かにそうかもしんない。
いままで900～1000を目安に作ってたからそこも考えていかないとだ。
ただーしリニューアル後のブログが1100pxだったりするのは秘密。
ブログリニューアル-その7
今日は月別アーカイブページの制作。
これもコピペでほぼ終了。
あとはその月別ページと昨日作ったカテゴリページで、センター上部の「このブログについて」ってのをはずして、各月orカテゴリ名を表示するように変更。
なーんかこのモニタじゃやる気でないなぁ～贅沢覚えると碌な事ないね。
代わりに今はむかーし使ってたCRTを引っ張り出してなんとかやってるけど、解像度が1024＊768（液晶は1280*1024）だったりサイズが2インチ小さかったりで全く別の世界を見ているよう・・。
特に何このブログ。
黒バックに白文字って。
見にくいったらありゃしない！作った人出てきなさい！
へぃ。
そっかー。見る人みんな環境が違うわけで、そういうこと考えるとホント大変な世界だね。正解ってモンがない。
今までブラウザの違いだけ意識してたけど、解像度とかコントラストとかも意識していくべきなんかなぁ。
サイトの横幅は800px辺りが適当、ってなんかの本に書いてあったけど確かにそうかもしんない。
いままで900～1000を目安に作ってたからそこも考えていかないとだ。
ただーしリニューアル後のブログが1100pxだったりするのは秘密。
ブログリニューアル-その7
今日は月別アーカイブページの制作。
これもコピペでほぼ終了。
あとはその月別ページと昨日作ったカテゴリページで、センター上部の「このブログについて」ってのをはずして、各月orカテゴリ名を表示するように変更。
なーんかこのモニタじゃやる気でないなぁ～贅沢覚えると碌な事ないね。
2007/06/24 19:45
head内をlink要素で飾る
昨日はだらだらと長文を書いてホンマもんの素人ということを露呈させてしまったわけですけども、いやはや失敗から学ぶ事ってのは大きいもんですなぁ。
ところで！
コーディングコンテストの最優秀作品を見させてもらったんだけど、<head>内に<link>要素がわらわら書いてある。
今までなんとなくCSSのファイル指定とかで使ってたけど、そういやこのlink要素って何の意味があるのかってのを全然知らない。
ちなみにリニューアル後のブログのlink要素は（昨日現在）
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
の5つ。
一番上はファビコン、次がCSSファイルのアドレス。
その下の3つはMovableTypeにデフォで記述されているもの。あんまり意味がわかんないけどRSSとかで配信するためのものだとおもふ。
一応調べます。検索大好き。いざぐぐれ！
参考は
しらぎくさいとさんの
rel属性/rev属性(リンク先/リンク元との関係)。
relで指定されているalternateは代替文書。
RSSもAtomもそれぞれのページで更新情報を配信してるから、って意味でこの属性を使ってるのかな？
最後のEditURIに関しては他も調べたけど良く分からず。そもそもRSD自体分かってないｗ
さて話は戻って最優秀作品のlink要素。
<link rer="chapter"～ />
というのを多用している。
チャプター？
しらぎくさいとさんに書かれている内容からすると“章”とのことだけど、章ってなんだろう。
で、またぐぐる。
glas-gatherさんのlink要素
The Web KANZAKIさんのlink要素によるナビゲーション
によれば、このchapterにサイト内の各アドレスを記述する事で、対応するブラウザでそのサイトを見ればツールバーから一発で該当ページへジャンプすることが出来る、ということかな？
まだあまり理解は出来てないけど、分かったつもりで新しいlink要素を書いてみた。
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="author" href="http://hobbyblog.biz/design/69/index_3.html" title="自己紹介" />（追加）
<link rel="index" href="http://hobbyblog.biz/design/" title="素人のWebデザイントップページ" />（追加）
<link rel="chapter" href="http://hobbyblog.biz/design/2007/03/000087.html" title="このブログについて" />（追加）
<link rev="made" href="mailto:design△hobbyblog.biz" title="管理人へのメールはこちらから" />（追加）
こんな感じかなぁ。
別に趣味のサイトでここまでやる必要ないじゃんという気がしないでもないけど・・他にもいろいろあるから覚えようとすると大変だこりゃ。
ブログリニューアル-その6
前置き（というかどっちがメインかわかんなくなってるｗ）が長くなったけど、今日はカテゴリのページを制作。
エントリーページ同様コピペメインだからあっちゅーまに完成。
ただしfirefoxやoperaで見ると、エントリーが少なくて縦に短いページの場合、右に10pxほどズレるバグ？が出現。でも長くすると戻る。
よくわかんないけどコリャ放置でいいやｗ
明日はアーカイブページ、あとは検索と印刷用で終わりかなー。
ところで！
コーディングコンテストの最優秀作品を見させてもらったんだけど、<head>内に<link>要素がわらわら書いてある。
今までなんとなくCSSのファイル指定とかで使ってたけど、そういやこのlink要素って何の意味があるのかってのを全然知らない。
ちなみにリニューアル後のブログのlink要素は（昨日現在）
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
の5つ。
一番上はファビコン、次がCSSファイルのアドレス。
その下の3つはMovableTypeにデフォで記述されているもの。あんまり意味がわかんないけどRSSとかで配信するためのものだとおもふ。
一応調べます。検索大好き。いざぐぐれ！
参考は
しらぎくさいとさんの
rel属性/rev属性(リンク先/リンク元との関係)。
relで指定されているalternateは代替文書。
RSSもAtomもそれぞれのページで更新情報を配信してるから、って意味でこの属性を使ってるのかな？
最後のEditURIに関しては他も調べたけど良く分からず。そもそもRSD自体分かってないｗ
さて話は戻って最優秀作品のlink要素。
<link rer="chapter"～ />
というのを多用している。
チャプター？
しらぎくさいとさんに書かれている内容からすると“章”とのことだけど、章ってなんだろう。
で、またぐぐる。
glas-gatherさんのlink要素
The Web KANZAKIさんのlink要素によるナビゲーション
によれば、このchapterにサイト内の各アドレスを記述する事で、対応するブラウザでそのサイトを見ればツールバーから一発で該当ページへジャンプすることが出来る、ということかな？
まだあまり理解は出来てないけど、分かったつもりで新しいlink要素を書いてみた。
<link rel="shortcut icon" href="<$MTBlogURL$>image/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/import.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="author" href="http://hobbyblog.biz/design/69/index_3.html" title="自己紹介" />（追加）
<link rel="index" href="http://hobbyblog.biz/design/" title="素人のWebデザイントップページ" />（追加）
<link rel="chapter" href="http://hobbyblog.biz/design/2007/03/000087.html" title="このブログについて" />（追加）
<link rev="made" href="mailto:design△hobbyblog.biz" title="管理人へのメールはこちらから" />（追加）
こんな感じかなぁ。
別に趣味のサイトでここまでやる必要ないじゃんという気がしないでもないけど・・他にもいろいろあるから覚えようとすると大変だこりゃ。
ブログリニューアル-その6
前置き（というかどっちがメインかわかんなくなってるｗ）が長くなったけど、今日はカテゴリのページを制作。
エントリーページ同様コピペメインだからあっちゅーまに完成。
ただしfirefoxやoperaで見ると、エントリーが少なくて縦に短いページの場合、右に10pxほどズレるバグ？が出現。でも長くすると戻る。
よくわかんないけどコリャ放置でいいやｗ
明日はアーカイブページ、あとは検索と印刷用で終わりかなー。
