$(function(){});のカッコがややこしい

jQueryでよく見かける$(function(){});って、カッコがごちゃごちゃしていて分かりにくくないですか?私はいつもごちゃごちゃになりますwなので、自分がいつもカッコの囲み方を理解するための方法があるので、それをメモしたいと思います。

続きを読む

ページ内目次を生成するTable of Contents Generator WordPress pluginを導入

私の書く記事の特徴上、見出しを頻繁に挟んでいくことが多いため、見出しを基準に目次があったら便利だろうな、という事でWordPressプラグインを導入しました。

プラグインのダウンロード

Table of Contents Generator WordPress plugin | SYPからプラグインをダウンロードし、pulginフォルダへアップロード、プラグインを適用するだけです。

記事内に目次をつけたい場合

記事内に以下のコードを貼り付けます。

目次を自動生成したい場合

テンプレート(例えばsingle.php)のループ内に以下のコードを貼り付けます。

post_toc; ?>

このサイトの場合

このサイトでは、装飾も含めて以下のようなコードを貼り付けています。

html

目次

post_toc; ?>

CSS

.toc_box {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1em;
    background-color: #f3f3f3;
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.toc_box h2 { font-weight: bold; margin-bottom: 0.5em; }

.toc_box li { list-style-type: decimal; font-size: 0.8em; margin-left: 2em; padding-top: 0.3em; padding-bottom: 0.3em; }

まとめ

読む人の立場になって考えると、だらだら文章を書くよりも、できるだけ端的に書いた方がすばやく必要な情報にたどり着くことができるような気がしています。ぜひ導入してみてはいかがでしょうか?

個人的に使用しているCSS3の角丸、グラデーションコードを生成してくれるジェネレータ

このサイトにも一部の箇所にCSS3の記述をするようにしていますが、角丸とか、グラデーションって、いまいち覚えづらいですよねw

そこで、角丸、グラデーションに絞って、個人的によく使っているCSS3コードジェネレーターを紹介します。

ジェネレータは、一長一短

1つのサイトですべてをまかなえるといいのですが、 あとちょっと、かゆいところに届かない感じなので、角丸とグラデーションで別のサイトを使っています。

角丸ジェネレータ

四隅に数字を入力するだけで、中央にコードが表示されます。

グラデーションジェネレータ

グラデーションの向きや色、グラデの具合を設定できます。

実はここでも角丸の設定はできるのですが、四隅すべて丸める場合の

border-radius: 5px;

のコードをはき出してくれたいため、使い分けています。

リンクまとめ

ブロック要素の天地を揃えるのはjquery.tile.jsが一番便利でした

ある要素の天地を揃えたいという場面は頻繁に起こります。例えば商品名の高さを揃えるとか、バラバラなサムネイル画像の天地を揃えるとか。

いろいろなjQueryプラグインを使ってきましたが、個人的にjquery.tile.jsが一番便利でしたのでご紹介します。

設置方法


指定の要素の天地を揃えたい場合

jQuery(function(){
    jQuery(".youso").tile();
});

指定の要素を「指定した数」単位で揃える

今まではいちいちプログラムを書いていたので、これが特に便利です。

jQuery(function(){
    //.yousoの高さを3つ単位で揃える
    jQuery(".youso").tile(3);
});

コード量も少ないので個人的におすすめです。

プラグイン配布サイト

Facebookのアイコンサイズ

これまた仕事で必要な情報だったのでメモ。

2012年3月1日追記

facebookページがタイムライン式に変更になった事により、数値タイムラインベースのものに変わっています。

別途記事を書きました。「2012年4月1日に変わる新Facebookページ(タイムライン)の数値

Facebookのアイコンサイズ

  • 左上のアイコンサイズ…180×180px(天地は多少伸ばしてもいいみたいです)
  • 左メニューのアイコンサイズ…16×16px
  • アプリケーションのページで表示されるアイコンサイズ…75×75px