「Blog」と一致するもの

Adobe Fireworks CSS3 Mobile Packがすごい！

先日の「CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校」で鷹野さんに教えていただいたAdobe Fireworks CSS3 Mobile Packを使ってみた。

fireworks_css3mobile_p1_100311.zxpをクリックしてExtension Managerにインストールする。

Fireworksで簡単なボタンを作ってみる

こんな感じ。とりあえず角丸とグラデーション

プロパティ

ウィンドウ>エクステンション>CSS propertiesを選択してCSS propertiesパネルを表示する。

ボタンを選択した状態で更新ボタンをクリック。

出力されたコード。

background-color:#3ab7f5;
/* Firefox v3.6+ */
background-image:
-moz-linear-gradient(20% 0% -90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%); 
/* safari v4.0+ and by Chrome v3.0+ */
background-image:
-webkit-gradient(linear,
20% 0%,
20% 75%,
color-stop(0, rgb(58,183,245)),
color-stop(1, rgb(51,153,204)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:
-webkit-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
/* Opera v11.10+ */
background-image:
-o-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
background-image:
linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
width:120px;
height:60px;
/* Firefox v1.0+ */
-moz-border-radius:5px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:5px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:5px;
filter:
	progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0)";

あとはクラスなんかを付けてブラウザで確認。CSS3のボタンが出来上がり！

参考にした記事：Fireworks CSS3 Mobile Packを使ってみよう

CSS
CSS Nite

スマートフォンオプションのブログをドメイン直下に移動

先日インストールしたスマートフォンオプション。

17日のセミナーで「ドメイン直下でスマートフォンオプションのブログが作れないか」をシックス・アパートの金子さんに聞いてみた。

「.htaccessがあるので面倒ですが、今までの通りの方法でOK」ということだったので、ちょこっといじってみた。ところが公開パス（ブログURLとブログパス）を書き換えた途端に500エラー。

FTPで.htaccessと.mtview.phpを削除。保存しておいた元々の.htaccessをアップロードしてとりあえずは管理画面にアクセスできた。DynamicMTML .htaccessテンプレートに元々の.htaccessの内容を追加記述し再構築。各ファイルのパーミッションを確認・変更。

できました！

スマートフォンオプション for Movable Typeがリリースされました

Movable Typeをスマートフォンで利用したい方向けの、ビジネス支援セット「スマートフォンオプション for Movable Type」を本日より発売開始します。

「スマートフォンオプション for Movable Type」を本日提供開始 : Movable Type News - Six Apart

早速インストールしてみた。今回は個人ブログ用のドメイン：atstyle.orgにインストール。

ウェブサイト配下のブログにスマートフォンテーマを適用することになっている。

PC向け

iPhoneでの表示

ウェブサイトを作成せずにドメイン直下で使いたいんだけど。

今日「【福岡開催】Movable Type で地方から攻めるWeb制作ビジネス戦略とスマートフォン対応サイト制作ノウハウ伝授セミナー」で聞いてみよう。

フォーム周りのCSSをいじってみた

7月にお問い合わせフォームを編集したが、今回はブログのコメントも一緒にいじってみた。

シンプルな印象を崩さないようにグレーのボーダー

ボタンも同様に極めてシンプル。CSSはこんな感じ。

.submit-button {
    padding: 3px 10px;
    border: solid 3px #d5d5d5;
    background-color: #f3f3f3;
    color: #000;
    text-shadow: 1px 1px 0 #fff;
    margin-right: 20px;
}
.submit-button:hover {
    border-color: #999;
    background-color: #e6e6e6;
    color: #000;
}
.submit-button:active {
    border-color: #333;
    background-color: #e6e6e6;
    color: #000;
}