WordPress3.0でマルチユーザー化するのには
多少の手順が必要だった要です。
そのやり方はここ
今までは2.Xでがんばっていたけど、
これからは 3.0でいけますね。
XAMPPでPEARが動かない
xamppでpearを動かす
だけなのに、ネットにある情報では動きませんでした。
私の場合は
C:\xampp\php\go-pear.bat
を実行しても動かず。 xamppのgo-pear.phar は結構駄目らしいです。 だからPEARのサイトから別の go-pear.pharをダウンロードして C:\XAMPP/PHP/PEAR内で上書き。 そのファイルはここにあるので、右クリックして保存 go-pear.phar
でも、C:\xampp\php\go-pear.bat とやっても
やっぱりうまくいきません。
よく見たら go-pear.bat というバッチファイルはありませんでした。 PHPフォルダ内にはpear.bat があるだけなのでc:\xampp\php\go-pear.bat で実行。install 画面がちょっと違っていましたが 下記をそのままコピペして、pearcheck.php とでもファイル名つけて 表示したらPEARがインストールされていました。<?php require_once "PEAR/Info.php"; $info = new PEAR_Info(); $info -> show(); ?> 参考となったサイト VISTA XAMPPでPEARをインストール XAMPPでPEARコマンドを使う
要素の中の要素 margin-topが効かない
CSSの話題
div要素の中にdiv要素を入れます。
中に入れた子のdiv要素にmargin-topを指定します。
でも、外側のdiv要素も一緒に引きづられて下に下がっています。
つまり、この状態から
以下の状態にしたいので、中のボックス要素に
margin-top:50px; としたとします。
するとこうなるのです。
中のbox要素に設定したmargin-topに引きずられてしまいます。
これを 『margin の相殺』 と言います。
詳しくはこちらを見てください。
解決策は、
この場合は、外側のボックスにpadding又はborderが設定する必要があります。
私はpaddingを設定して反応しなかったのと、
borderの設定がしたくなかったので、結局絶対配置にしました。
以上です。
html要素とbody要素で中央固定
ＣＳＳネタ
固定幅の中央揃えを、ＤＩＶ要素使わずに実現します。
html {
text-align : center;
}
body {
width : 880px;
margin-top : 0;
margin-bottom : 0;
margin-left : auto;
margin-right : auto;
text-align : left;
position : relative;
}
margin: 0 auto; では中央によらなかった。なぜだ？
position : relative; で bodyをその中の要素の基準にしました。
div#left {
position : absolute;
left : 0;
width : 50%;
}
div#rifht {
position : absolute;
left : 50%;
width : 50%;
}
ものすごい簡単！
GitHub 必要に迫られて
友人が次に始めるサービスのプログラムを作ってくれたようdesu.
Rubyで。
そのプログラムを共有する術が必要です。
こういうときはバージョン管理ソフトを使います。
PopulorなのはSubversion
でもここはGitHubを使うことにします。
それは友人にGitHubという指定を受けたから。
で、必要に迫られてGitHubを使ってみることにしました。
基本的にGitHubのサイトでアカウントを取得して、
クライアントソフトをインストールするというのが手順のようです。
Subversionはちょっと使っていたのですが、最近は本もでるくらい
Gitが人気です。 どこがどう人気なのかわかりませんが、きっと使っているとわかってくることでしょう。
まず最初に Git でアカウントを作ります。
とりあえずFreeアカウントでOK。
アカウント取得後、ログインします。
Dashboardが開くと思いますので、右にあるボタン
New repository をクリックします。
リポリトジ repository は、貯蔵庫の意味です。 アルク
特になにも無くてよいのでリポジトリを作っておくとよさそうです。
取り敢えずこんな感じの画面がでますが、プロジェクト名だけ入れたら
あとは特になにも入力しないで Create Repository ボタンをクリックします。
これで自分のダッシュボードにリポリトジが表示されるようになります。
とりあえずWeb上でのセッティングはここまで。
次はクライアントPCにGitHubをインストールします。
オンライン画像編集 Pixlr
オンラインで画像編集できるWebサービス
現在は非常に多くのオンライン画像編集サービスがありますが、
私はなんとなく Pixlr （ピクサー？） に落ち着いています。
他にも使いやすいサービスは沢山あるのですが、以下のサイトに
上手くまとめられていましたので紹介。
どれも便利です。 何を使っても簡単に目的を果たせそうです。
そんな中、
Pixlrにはさらに便利な機能が！
それは、FireFoxとChromeのAdd-onがあるところ。
Add-onを入れるとFireFox右下にこのような窓が。
Grab Entire Page：ページ全体を選択
Grab a defined area：エリア指定したところを選択
Grab visible part：見えているところ
たとえばエリア指定してみると、
こんな感じで、エリア指定する窓がでてきてます。
適当に選択したら Crop ボタンを押します。
すると以下のような選択画面が出てきます。
Editボタン：Pixlrに直接取り込まれて編集できるようになります。
Shareボタン：imm.io というファイルシェアサービスにUP。
Saveボタン：普通にセーブ
Copyボタン：クリップボードのコピーできるので他の画像編集ソフトにすぐに貼り付けられます。
という4種類。 べんりーーー。
しかし、どんだけ多いんだ“くじら”。
昨日も何気にクジラいたし、最近多いう噂。
ワールドカップだからしかたないですね。
Web デザイン Tips
Webデザインで使えそうなTipsをいくつかまとめてみました。
Photoshopのテクニック集などを紹介した書籍も数ありますが、
自分がイメージする「かっこいいデザイン」とか、「見やすいデザイン」 と
若干のズレがあります。 でも、だからといって、どういうものを
クールだと思っているかを人に伝達することはできません。
自分で出来ないから、言葉を知らないのです。
なので、自分で出来たらいいなーとおもったものをピックアップしてみました。
これらのチュートリアルを見ていくらまねしても、
もともとデザインを勉強していない素人がやっても、あくまで部分的な作業
でしかないのです。今まで何とか挑戦して挫折したのは結局そこのところ。
デザインの勉強をしていないからだとおもうのです。
でもデザインプロフェッショナル たとえば鮎！ とかが
こういったチュートリアルに目を通しておくと、きっとWebに適したデザインを
生み出せる気がします。そんな期待もこめてWeb用のチュートリアルをいくつか集めてみました。
写真を並べるときに使えそうなもの
リアルな紙を使ってつくるWebデザイン
エコ感だすときに使えそうな大自然が背景
これをフォトショップで作れるっていうんだから、本当に凄い！
で、木はどうやってつくるのかな？ とおもって調べてみたらあるある。
フォトショップで木を作る
なんか、木とか雑草もつくっちゃいます。
フォトショップの木ブラシ
フォトショップに木専用のブラシがあるようです。
Freeみたい。 すごいですね。
Second Lifeで雑草が欲しかったとき、雑草だけ作れるソフトを買ったなー。
あれ、どこいったか。。。
も一つ、木関連でおまけ。 よくわからないけど、すごそう。 Masking A Tree
バンのアイコン
VANのアイコン作成。
驚くべきは、バンを最初は手書きして。
それをスキャナーで取り込んで。。。
最近、火鉢屋デザイン部の鮎が手書きをスキャニングして
Photoshopで加工しているのを目にしているので、そういうものだと認識してはいるけど。
普通は知らないから、手書きがこうなるの？っていう単純な驚きしかない。
インスピレーション沸く、フォームページデザイン
Vanのアイコンから突然またWebレイアウトに話題はもどる。
フォームページも、こんなデザインなら間違いなく入力しちゃうかも？
つづきはまた今度。
背景画像を画面いっぱいにする方法CSS
CSSだけで背景の画像を画面いっぱいにする方法です。
ブラウザーの伸縮に合わせて画像を、縦横比は保ったまま伸縮させる方法です。
参考になるページがあったのですが、どこへ行ってしまった。
なのでコードだけ。
HTML部分
<img src=”images/bg.jpg” />
CSS部分
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* This is the only important rule */
/* We need our content to show up on top of the background */
position: relative;
/* These have no effect on the functionality */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}
body {
/* These rules have no effect on the functionality */
/* They are for styling only */
margin: 0;
padding: 20px 0 0 0;
}
——— ここまで ———-
そしてHTMLファイル内に
<div id=”content”></div>
を置いてあげれば、コンテンツ部分が白くなって背景の上にかぶさります。
まさにあれっぽい・・・？
同様の効果を引き出せるjquery
当然ながらjqueryでも可能です。
jqueryについて
ヤバイくらい判りやすい jquery を説明したサイトも紹介しておきます。
Thanks for saving us. ってくらい判りやすい！
BPオイル漏れマッシュアップMushUp
BPのオイル漏れは本当に酷いものです。
大昔、BPのオイルは好きでしたよ。
粘土が高くて砂漠でもOKなオイル。
夏場などはかなり重宝しました。
でもそれとこれとは別。
とおもったら、すでにBPオイル漏れのマッシュアップサイトが4つ。
1つ目はOilaholic: オイル・ア・ホリック
Facebook, Flickr, Twitter.Ustreamなどとのマッシュアップサイト。
2つ目はVisualizing the BP Oil Disaster: 目で見るBPの大惨事
GooleMapとのマッシュアップです。
現在地を基点に、どれだけオイル被害がひろがっているか視覚的に現します。
もう東京なんて余裕でスッポリですね。 これが下手したら8月までオイル漏れが続く
そうなので、もう信じられないくらいの大災害です。
BP Gulf Oil Spill – View in Google Earth: GoogleEarthで見るオイル漏れ
GoogleEarthのプラグイン・インストールを促されます。
Gulf Oil Spill – Latest YouTube Videos:最新のYoutubeビデオ
これも中々うまいアイディアです。
BPのオイル漏れ地点をGoogleEarthで表示し、
そこにYoutubeにUPされた最新の動画をリンクしています。
とりあえず1番上のoilaholicを見れば、今の漏れ状況がわかります。
正直、Ustreamのライブ映像に見える黒いもくもく（原油）は、
当初よりずっとずっと増えています。
素人目にもあきらかです。
そういえば高校生のころ、原油採掘施設の火災を消化する技術者に
なりたかったことがあります。原油が燃えると水では被害が広がるので
爆破して無酸素状態を作り出し消化する。はずです。
その技術者が当時世界に5人しか居なかったので、6人目になりたいとおもっていたことがありました。
とりあえずハイブリッドと風力発電や太陽電池の普及が
もっと広がるといいですね。
おっと。APIの話題でした。
時事問題に重ね合わせてすぐにマッシュアップサイトをつくる。
素晴らしいです。
私も是非トライしたいです！