textresizer.jsを使ったフォントサイズ切り替え

-
カテゴリー:
javascript 

フォントサイズ切り替えが必要な案件でよく使用させていただいているプラグインjQuery Text Resizer Pluginのご紹介です。

まずjqueryとjquery.cookie.jsが必要になります。
次にjQuery Text Resizer Pluginをダウンロードします。

ダウンロードが完了したら、htmlのhead内で読み込みます。

 

次にhtml内に以下のように記述※idなどは任意のものを設定

 

次にCSSの記述※サンプル用なので、かなりアバウト

 

上記CSSの.textresizer-activeは、フォントサイズがアクティブになっている時のCSSです。

最後にtextresizer.jsを実行するためのコードを記述します。※外部ファイル、もしくは、html内に記述

 

targetはフォントサイズを切り替えるターゲットの設定
typeはフォントサイズの指定方法
sizesは実際のフォントサイズ
selectedIndexは初期のフォントサイズ指定

#wrapperや#font_size aなどはサンプル用の記述なので、適応変更する必要があります。

サンプルはこちら

 

 

投稿記事に本文が有るのか無いのかを判定する

-
カテゴリー:
ワードプレス 

先日、ワードプレスのテーマのカスタマイズのお仕事で、投稿記事の本文が有るのと無いのとで、処理を分けてほしいという依頼があって、そういえば、案外対応した記憶がないなぁ~。と、いうことで、メモ程度にコードを記載。

 

上記のコードを一覧のループ内などで使用します。

 

プルダウンメニューの作り方【簡易版】

-
カテゴリー:
javascript 

最近良く使っているプルダウンメニューのコードです。

このまま使うことは無いのですが、以下のコードをたたき台にして作り込みをしてます。

まず、CSSなんですが、

 

サンプルの状態なので装飾部分やサイズは適応変更。

横並びのナビゲーションを想定したものなのですが、縦並びの場合は、floatなどを削除し、#navi ul li ulのtopとleftを変更して対応。
以下、HTMLです。

 

以下、javascriptです。※jquery使用

 

あってもなくても問題ないのですが、ナビゲーション上部のマウスオンを保つために、a要素にactiveクラスを追加・削除するコードを記述してます。

 
サンプルはこちらです