Posted: 2010.11.07 / Category: WordPress / Tag: テンプレートカスタマイズ Wordpress3.0に追加された目玉機能(?)としてカスタム投稿タイプというものがあります。 こちらの機能は通常のブログなら特に必要ない機能ですが、CMSとして使用する場合はかなり便利らしいです。 いまさらという感じはしますが、カスタム投稿タイプを使用してコーポレートサイトでありがちな「よくある質問(Q&A)ページ」の作成を行います。 カスタム投稿タイプとは 例えば「お知らせ」「よくある質問」などのページを作成したい場合、今までだったらカテゴリー分けなどでやりくりしていたと思います。 でもこれだと、しょせんブログでなんとかやってるって感じで、わかりやすいとは言えませんでした。 今までは投稿やページなど決まった項目にしか記事を書けませんでしたが、カスタム投稿タイプを使
ツイッター社が提供する、今風のウェブサイトを構築するための言語です。これを使ってHTMLとCSS、JavaScriptを簡単に拡張することができます。
<?php include_once(ABSPATH . WPINC . '/rss.php'); $rss_url = "http://blog.asial.co.jp/rss/rss2.0.php"; $limit = 10; $rss = fetch_rss($rss_url); $items = array_slice($rss->items, 0, $limit); ?> <ul> <?php if (empty($items)) : ?> <li>記事がありません</li> <?php else : foreach ( $items as $item ) : ?> <li><a href='<?php echo $item['link']; ?>'> <?php echo $item['title']; ?> </a></li> <?php endforeach; ?> <?p
ウェブサイトのグローバルメニューをデザインする時、 メニュー間に区切り線が無いと、分かりづらい場合がありますよね。 例えばこのようなメニューの場合、 区切り線を入れてあげることで、簡単に各メニューエリアの視認性があがります。 今回は、そんな区切り線を簡単に作る方法をご紹介します。 STEP1. 等間隔に黒線を引く 濃いグレーでもOKです。例ではラインツールを使って、黒(#000000)で線を引いています。 線引きました。次に影を付けていきます。 STEP2. 線をグループ化する 作成した線をすべて選択して(例だと4つ)、【Ctrl+G】でグループ化します。 STEP3. ドロップシャドウを追加 グループ化した線を選択した状態で、ドロップシャドウを追加します。 【距離:1、色:#ffffff、不透明度:100%、ぼかし:0、角度:0】 ドロップシャドウを加えると、以下のようになります。
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
WEBデザインの「なぞり方」講座 ~トレース・デザインテクニック®~ PhotoshopCS3/CS4/CS5/CS6対応 販売価格:通常19,800円を 期間限定キャンペーン:12,800円(税込) 【ご予約受付中】商品発送:8月6日(月)より(先着順で順次発送いたします) 【販売記念キャンペーン】 先着100名様にDVD10本分の特典付! こんにちは、本講座の講師を務める岩崎サトシこと「バッチリ先生」です。 私自身デザイナーとして、デザイン・ネットショップ運営系のセミナー講師として、10年以上活動しているわけですが、実体験として感じていたのは「デザイナー」として、一定レベルの力をつけるためには、最低2年以上の実務経験が必要ということでした。 そして、何よりも難しいのは、デザインを「教える」ということです。全てに対して通用する「答え」がないことがデザインの難しさであるため、新人
珍しく、Photoshopネタでも。 コーディング関係だからこのブログの主題っぽい! 今回は、PhotoshopCS6を利用したスライスに関するアレコレです。 コーディング時にはスライスは必須ですし、一番面倒な部分なので少しでも効率良くスライス出来ると良い感じですよね。 内容としては、スライスの基本からって訳じゃないので、最低限スライスツールが使えてる方を対象にしたような感じになってると思います。たぶん。 ちなみに、面倒な説明しなくていいから分かりやすい様に動画ベースでやっていきます! Photoshopを起動します 何はともあれ、Photoshopを起動します。 これはすごく重要な作業です。 Photoshopは重いので起動するのがダルいですね。ウチのVAIO Zが頑張ってます。 CS3の頃はサクサクで良かったんですが。 起動したら、psdファイルを開きましょう。 普通のスライス まずは
当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。 テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。 The What, Why and How of Textures in Web Design 下記は各ポイントを意訳したものです。 1. ノイズのテクスチャ 2. リアルにするためのテクスチャ 3. ビジュアル効果を与えるテクスチャ 4. トーンや印象を明確にするテクスチャ 5. シンプルなピクセルパターンの繰り返し 6. 大きなインパクトを与えるパターン 1. ノイズのテクスチャ ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。 ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱ
画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く