WordPressにソーシャルネットワークボタンを追加する。

2011.05.12 Thu

ブログの記事をTwitterやFacebookといったSNS(ソーシャル・ネットワーキング・サービス)、はてなブックマークやDeliciousといったSBM(ソーシャル・ブックマーク)で共有するためのソーシャルネットワークボタン、ソーシャルブックマークボタンをWordPressに追加するプラグイン『WP Social Bookmarking Light』があります。

このプラグインをインストールして、WordPressの管理画面にある「設定」から「WP Social Bookmarking Light」をクリックすると、上の画像のような設定画面があらわれます。

位置
ソーシャルネットワークボタンを追加する位置がWordPressで記事の内容を表示するテンプレートタグである<?php the_content(); ?>の「Top」なのか「Bottom」なのかを選択します。

個別ページのみ
個別ページ、つまりsingle.phpのみにソーシャルネットワークボタンを追加する場合は「Enabled」を選択して、トップページやカテゴリーページ、アーカイブページにも追加する場合は「Disabled」を選択します。

ページ
固定ページにソーシャルネットワークボタンを追加する場合は「Enabled」を選択して、追加しない場合は「Disabled」を選択します。

サービス
WordPressに追加するSNSやSBMを選択してドラッグ&ドロップします。

ソーシャルネットワークボタンのレイアウトに関してはCSSで調整してください。

このプラグインを使えば簡単にソーシャルネットワークボタンをWordPressに追加することができます。

WP Social Bookmarking Light
http://wordpress.org/extend/plugins/wp-social-bookmarking-light/


CSS3 textarea要素のリサイズを制御する。

2011.05.09 Mon

textarea要素とは、複数行のテキストを入力するエリアを作成するHTMLタグのことです。例えば、コメント欄ですね。

Firefox 4.0以降、Safari 3.0以降、Google Chrome 1.0以降では、そのテキストエリアをリサイズすることができます。Internet ExplorerやOperaではリサイズに対応していません。

下の画像のように右下にあるマークをドラッグすることによってテキストエリアのサイズを変更することができます。

Firefox

Safari、Google Chrome

でも、このリサイズの機能であるresizeプロパティは、なぜかデフォルトでリサイズができる状態になっていて、制御しないとデザインやレイアウトの崩れが起きます。

もしそれを避けたいのであれば、CSSでテキストエリアのリサイズを制御することができます。

<リサイズを無効にする>

textarea {
  resize: none;
}

<幅のリサイズだけを可能にする>

textarea {
  resize: horizontal;
}

<高さのリサイズだけを可能にする>

textarea {
  resize: vertical;
}

Twitterではこの高さのリサイズだけを可能にするようにCSSで制御していますね。
他だとFacebookではリサイズを無効にするようにしています。

個人的に自由にリサイズされるのが嫌だったので、このブログでもコメント欄のリサイズを制御してます。


Webデザインのギャラリーサイトを集めてみた。 番外編

2011.05.07 Sat

前回の「Webデザインのギャラリーサイトを集めてみた。」はPC向けサイトでしたが、今回は番外編としてiPhoneやスマートフォン向けサイトのWebデザインのギャラリーサイトを集めてみました。

iPhone Design Box

iPhoneデザインアーカイブ

iPhone Design Data Base

スマートフォンサイト集めました。

ASCII.jp:日本語サイトの事例を一挙紹介(前編)絶対見ておきたい有名企業のスマホサイトまとめ

ASCII.jp:日本語サイトの事例を一挙紹介(後編)スマホサイトを作る前に見たい国内38社の実例


Webデザインのギャラリーサイトを集めてみた。

2011.05.05 Thu

Webデザインをする時に刺激を受けたり、参考になったりするWebデザインのギャラリーサイトが数多くありますが、個人的にちょっと集めてみました。

Web Design Clip

straightline bookmark

AnotherBookmark

S5-Style

ズロック

Good Design Web

I/O 3000

ウェブセレクション

Bakuweb

WEBデザインの見本帳

WebSite Color Index

Design Link Database

ikesai.com

WPデザインギャラリー


最近の気になるWebサイト Vol.2

2011.05.03 Tue

「最近の気になるWebサイト Vol.1」で紹介したスッキリ!JAPANがTwitterの広告に登場しました。

「5月16日になにかが起こる。」とだけ発表されている謎のサイトですが、その5月16日までもう2週間を過ぎています。

Twitterに広告が登場したので再びサイトにアクセスすると、ある変化に気づきました。それはソースコードです。

4月18日の時のソースコード

5月3日の時のソースコード

笑っています。

日が経つにつれてアスキーアートの部分がだんだんと見えてくるように設定されていたみたいです。それにともなって、謎の人物の横に書いてある文字も読めるようになりました。

「これもうイエローカード出てもおかしくないんじゃないかなー」

この言葉は、あるサッカー解説者が言った名言です。
アスキーアートで描かれた謎の人物は、その名言を言った人物だったのです。

でも、なんのキャンペーンなのか全くわかりません。
5月16日まで楽しみに待っていましょう。


page 2 of 212