背景にも使えそうな動画いろいろ

名刺のデザイン

名刺のデザインは、むずかしいです。

名刺は初対面の人にまず渡す、ブランディングツールです。
日本で一般的な横91cm×縦55cmの、小さな宇宙。

いろんな情報を盛り込みたいけれど、そこを我慢して削って除いて、でもブランドの想いを込めて。

むずかしいです。

Design Wave Business card
ちなみに写真はデザインウェーブの名刺です。

マウスオーバーで画像にキャプション

画像をマウスオーバーした時に、下から1/3くらいの高さでタイトルとキャプションを表示させる方法を。
スタイルシートだけで簡単にできます。

HTMLはfigureでマークアップしてあり、figureのCSSは「overflow: hidden」ではみ出ないようにしています。
Continue reading “マウスオーバーで画像にキャプション”

WordPressのテキストエディタを便利にするクイックタグ

クイックタグは、テキストエディタで入力エリアの上部にあるボタンをクリックすると、そのボタンに応じたタグが挿入される便利な機能ですね。
Wordpressでは標準で、太字(b)やリスト(ul,oi,li)などがありますが、自分がよく使うタグをプラグインなしで追加することができます。

WordPressのQuicktags APIを利用して、使っているテーマのfunction.phpに以下を追加します。
Continue reading “WordPressのテキストエディタを便利にするクイックタグ”

WordPress APIでスクリーンショットを表示するショートコード

リンク先のスクリーンショットを表示したい時に、プラグインとか使わない方法。
テーマのfunction.phpに、以下を追加します。

<?php
function get_wp_screenshot($attr) {
    extract(shortcode_atts(array(
        // デフォルト設定
        'url' => '',
        'alt'  => '',
        'class' => '', // imgタグに付加するclass名
        'width' => 0, // 画像の幅(0の場合はwidthタグを出力しない)
        'link' => 1 // 0:リンクしない 1:リンクする
    ), $attr));
    if ($url == '') {
        return;
    }
    $image = 'http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url));
    if ($width > 0) {
        $height = floor($width/4*3);
        $image .= '?w=' . $width;
        $image_wh = ' width="' . $width . '" height="' . $height . '"';
    }
    if ($class != '') {
        $image_wh .= ' class="' . $class . '"';
    }
    $image = '<img src="' . $image . '" alt="' . $alt . '"' . $image_wh . '>';
    if ($link == 1) {
        $image = '<a href="' . $url . '" target="_blank">' . $image . '</a>';
    }
    return $image;
}
add_shortcode('wpshot','get_wp_screenshot');
?>

投稿やページに入れるショートコードはこれです。

wpshot url="ここにリンク先URL"

(※ショートコードは前後を[ ]で囲います)
実際の表示サンプルです。
[wpshot url=”http://www.design-wave.net/”]