3月, 2011
テーマを変えてみました
お疲れ様です。パチャラです。
先日紹介したテーマはかなり面白いので、変えてみようと思いました
その結果こうなりました
修正しないといけないところが多過ぎるので、明日戻します。- -;
Fireworksで楽に連番のスライス名をつける
お疲れ様です、豊川です。
今回もFireworksのスライス関係の拡張機能について。
グローバルナビゲーションなど、同じ種類で複数のスライスが必要な場合に連番で名前をつけることが多いです。しかし、１つ１つ設定するのは時間がかかり面倒。
そういう時に便利な拡張機能があります。
SequenceNumSlice
http://www.kuma-de.com/program/2009-06-14/799
これを使うと簡単に img01、img02… のような連番のスライス名をつけることができます。
桁数や、共通の名前、開始番号も変更できます。
ワードプレスをＣＭＳに使う（続き）
お疲れ様です。パチャラです。
今日、ワードプレスのカスタムフィールド機能の使い方を紹介します。
カスタムフィールドの値をページに表示するのは3つのステップがあります。
1.カスタムフィールドを追加する
管理パネルの投稿編集のページでカスタムフィールドを追加します。
例：
2. テーマを募集
カスタムフィールドの内容を表示したいページに以下のコードを入力します。
<?php echo get_post_meta($post—>ID,’カスタムフィールドの名前’,true);?>以上の例のカスタムフィールドの内容を引きたければ、カスタムフィールドの名前は Product と Price です。
例
テーマの募集は「外見」のメニューにあります。
3. カスタマイズ
CSSで引いたデータをカスタマイズします。
例
HTML:<span class="custom-price"><?php echo get_post_meta($post--->ID,'Price',true);}?></span>
CSS:
.custom-price{font-weight: bold;color:#F00;}
結果は以下の投稿です。
ワードプレスをＣＭＳに使う
お疲れ様です。パチャラです。
ワードプレスではブログのプラットフォームだけではなく、ＣＭＳとして使うこともできます。ワードプレスのカスタムフィールド機能を使って、簡単な管理システムを作れます。
カスタムフィールドは管理画面の投稿編集のページの下の部分にあります。
(WP3.1の場合は、カスタムフィールドが表示されない可能性もあります。表示するのは右上の「表示オプション」で設定することです。）
詳しくはまた明日。
Fireworksでスライス名を簡単につける拡張機能
お疲れ様です、豊川です。
今日は、タイトル通り「Fireworksでスライス名を簡単につける拡張機能」について。
スライス名の変更、割とめんどくさかったりするのですが、
1 Slice Name Changer
http://d.hatena.ne.jp/zakira/20090612
これとショートカットを組み合わせると、サクサク名前を変更することができます。
ショートカットの変更の仕方は、編集メニューからキーボードショートカットを開き、この場合はコマンドから1 Slice Name Changerを選択。その後、好きなショートカットを追加します。
そうすると、スライスをクリック→ショートカット入力でスライス名が変更できます。
ただ、複数選択には対応していないので１つ１つ変更しなくてはいけません。
それでも、スライスとの格闘に使っていた時間がかなり短縮できます。
ワードプレスをポートフォリオに使う
ワードプレスはブログのツールと思われがちですが、実はすごく幅広いプラットフォームです。今日ワードプレスをポートフォリオに使う方法を勉強しました。
一番簡単な方法はテーマを使うことです。無料でダウンロードできるテーマも多いです。気に入るのを紹介したいと思います。
Viewport
タイムラインで作品を乗せるので、面白いです。
DEMO ダウンロード
Sharpfolio
デザインがシンプルデザインで使いやすいです。
DEMO ダウンロード
Creative by Nature
賑やかなデザインのテーマです。
DEMO ダウンロード
面白いテーマを見つけたらまた紹介します。
テキストの差分を表示
お疲れ様です、豊川です。
同じようなファイルが2つ以上あり、どこが違うのか分からない時ってたーまにありますよね。
そんな時に差分を見やすく表示してくれるソフトがあります。
Vectorで言うと、テキスト比較というカテゴリ。
http://www.vector.co.jp/vpack/filearea/win/util/text/diff/
丁度、今日テキストの差分を確かめたかった場面があったので、
Rekisaというソフトを使ってみました。
Rekisa
http://frozenlib.net/rekisa/
画面はこんな感じ。
色の付いている部分が相違部分になっています。
この場合だと、冒頭のあいさつ以外全部違うってことですね。
ファイルが３つ以上あっても、新たに色分け比較できるようです。
CSS3で丸み
お疲れ様です。パチャラです。
面白いサイトを見つけました。画像が全然なし、CSS3の機能だけで作られた太陽系です。
http://neography.com/experiment/circles/solarsystem/
この太陽系はCSS3の border-radius 機能を使って描いた図です。border-radius ブラウザーによって違う指定されるようになってます。Safari、Chrome では -webkit-border-radius、Firefox では -moz-border-radius です。IE9 と Opera は border-radius で大丈夫です。Chrome や Safari などの Webkit を使っているブラウザーで見ればアニメーションも見えます。
しかし、CCS3ができないブラウザーでみればこうなります：
CSSで丸いボタンやバナーを作れば、サイトの画像を減らすことができます。現在大体のブラウザーはCSS3を受け取れるので、今からCSS3をより使おうと思っています。
Dreamweaverの拡張機能
お疲れ様です、豊川です。
今日はDreamweaverの拡張機能の紹介を１つ。
iPhone site extension for Dreamweaver CS4/5
http://h2o-space.com/web/product/iphone_dw/
名前の通り、iphoneに対応したサイトを作るときに便利な
DreamweaverCS4とCS5用の拡張機能です。
新規作成する時に、Viewportと呼ばれるものがすでに設定されたものを呼び出せたり、
「iphoneっぽい」ボタンやリストなどが簡単に挿入できちゃいます。
googleマップへのリンクや、itunesへのリンクも作成できるみたいです。
デザインに関しては、
iPhoneサイトデザイン集のiPhoneデザインアーカイブ
http://iphonedesignarchive.jp/
CSSiphone
http://cssiphone.com/
などなど。
こうしてみると、対応しているサイトかなり増えましたよね。