WordPressの投稿画面にクイックタグを追加する。

2011.04.21 Thu

投稿画面にはデフォルトで「<strong>」や「<a>」などのクイックタグが用意されているけど、独自にタグを追加したい時に手打ちするというのは面倒です。

そこでWordPressの投稿画面にクイックタグを追加できるプラグイン『AddQuicktag』があります。

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

ラベル名
クイックタグに表示する名前

Title Attribute(タイトル属性)※
クイックタグをマウスオーバーした時に表示するテキスト

開始タグ
HTMLタグの開始タグ

終了タグ
HTMLタグの終了タグ

※Title Attribute(タイトル属性)は空でも良いので今回は省略します。ただ空にするとマウスオーバーした時に数字が表示されます。

1.HTMLタグを追加する。

例えば「h3」をクイックタグに追加したい時は、ラベル名に「h3」、開始タグに「<h3>」、終了タグに「</h3>」と入力します。すると「タグを閉じる」の隣に「h3」というクイックタグが追加されるのです。

2.id属性やclass属性を付ける。

id属性やclass属性を付けるようなクイックタグを追加することもできます。
例えば、下記のコードのようなclass属性を開始タグに入力するだけです。

class="blue"

id属性やclass属性の前に半角スペースを入れて登録しておくと、いちいち半角スペースを入れる手間が省けるので使う時に便利です。

また、下記のコードのようなtarget属性に加え、alt属性やtitle属性といったものも開始タグに入力して登録することができます。

target="_blank"

さらには、下記のコードのような定型文を開始タグに入力して登録することもできます。

<h3>見出し</h3>
<p>テキスト</p>

このプラグインはとっても便利なので、ぜひ使ってみてください。記事を書くのが楽になると思います。

AddQuicktag
http://wordpress.org/extend/plugins/addquicktag/


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

2011.04.18 Mon

Webクリエイターを目指してるわけだし、気になったWebサイトの紹介でもしようということで紹介します。

スッキリ!JAPAN

「5月16日になにかが起こる。」とだけ発表されている謎のサイトです。数秒で変わるメッセージと少し不気味なBGMが流れています。

またソースコードには上の画像のように謎の人物が描かれていて、何か文字も書かれています。一体なんなのでしょうか。

The World’s Biggest Pac-Man

あの「パックマン」が遊べるサイトです。HTML5で作られています。ステージを一つ一つクリアしていく従来のパックマンとは違って、このパックマンは上下左右に別のステージがつながっていて、そこでまたゲームを進めていきます。終わりの見えないゲームとなっています。

Pica Pic

こちらもゲームですが、あの「ゲーム&ウォッチ」が遊べるサイトです。ただのギャラリーではなくて、実際にプレイすることができ、ハイスコアも記録されます。サイトのデザインも良い感じです。


CSS3 ちょっといじってみる。 Vol.1

2011.04.15 Fri

あんまりCSS3をいじったことがなかったので、この機会にちょっといじってみました。角丸を表現できるborder-radiusとグラデーションを表現できるgradientです。

border-radius <角丸>

.kadomaru {
  width: 250px;
  height: 50px;
  background: #0066cc;
  border-radius: 10px;
}

値を1つ指定した時は、4つの角に対して同じ半径が適用されます。

また、値を2つ指定した時は、左上と右下で同じ半径、左下と右上で同じ半径が適用され、値を4つ指定した時は、左上の半径、右上の半径、右下の半径、左下の半径が別々に適用されます。

border-radius <正円>

.seien {
  width: 50px;
  height: 50px;
  background: #0066cc;
  border-radius: 25px;
}

widthとheightの半分の値をborder-radiusに指定すると正円にすることができます。

gradient <グラデーション>

グラデーションには線形グラデーションと円形グラデーションの2種類があります。

1.線形グラデーション <上から下へ>

.senkei_gradation {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(top, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

2.線形グラデーション <左から右へ>

.senkei_gradation_2 {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(left, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left top, right top, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

3.線形グラデーション <左下から右上へ>

.senkei_gradation_3 {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(left 45deg, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left bottom, right top, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

線形グラデーションはFirefoxとWebkit系のブラウザ(Safari、Google Chrome)で指定の方法が違います。

-moz-linear-gradient(開始位置と角度, 開始色, 終了色);

-webkit-gradient(linear, 開始位置, 終了位置, form(開始色), color-stop(位置, 途中色), to(終了色));

4.円形グラデーション <中心から外へ>

.enkei_gradation {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc);
  background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), to(#cccccc));
  border-radius: 10px;
}

5.円形グラデーション <位置を変更する>

.enkei_gradation_2 {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(10px 25px, circle, #0066cc, #cccccc);
  background: -webkit-gradient(radial, 10 25, 0, 10 25, 50, from(#0066cc), to(#cccccc));
  border-radius: 10px;
}

6.円形グラデーション <正円にする>

.enkei_gradation_3 {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc 24px, rgba(255, 255, 255, 0) 25px);
  background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), color-stop(49%, #cccccc), color-stop(50%, rgba(255,255,255,0)), to(rgba(255,255,255,0)));
}

円形グラデーションも線形グラデーションと同じでFirefoxとWebkit系のブラウザ(Safari、Google Chrome)で指定の方法が違います。

-moz-radial-gradient(開始位置, 形状, 開始色, 終了色);

-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色));

CSSだけでこれだけの表現ができるのはスゴいですね。
画像を作らなくてもある程度のものは作れるので、軽量化もできます。CSS3恐るべし。IEも早く対応してくれれば良いのになあ。

若干おかしい部分があるかもしれませんが、許してください。もしあれば教えてください。