Manul-box

manul-search

inputタグで検索ボックスを追加し、idを「manulSearch」にします。

<input type="text" id="manulSearch" placeholder="検索">

buttonタグで検索リセットボタンを追加し、idを「manulSearchReset」にします。
タグ内のテキストは自由に変更できます。

<button id="manulSearchReset">リセット</button>

検索対象の一覧にclass「manul-search-list」を個別設定します。
タグはdata-tags="タグ1,タグ2,タグ3"の書式で設定します。

<div class="manul-search-list" data-tags="犬,猫,鳥"><a href="#">犬と猫と鳥のタイトル</a></div>
<div class="manul-search-list" data-tags="犬,猫"><a href="#">犬と猫のタイトル</a></div>
<div class="manul-search-list" data-tags="犬"><a href="#">ゴールデンレトリバーのタイトル</a></div>
<div class="manul-search-list" data-tags="猫"><a href="#">マヌルネコのタイトル</a></div>

名前変換スクリプトのspanタグも使えます。

<div class="manul-search-list" data-tags="鳥"><a href="#">白鳥の妖精・<span class="manulname">アストラ</span></a></div>

• class「manul-search-list」を設定したタグのテキストに検索テキストがあれば絞り込み表示されます。
• data-tagsは必須ではありませんが、表示しないけど検索に含めたい文字をセットできます。
• タグのテキストに検索テキストが含まれていなくても、data-tagsに含まれていれば表示されます。
  サンプルの場合は「犬」の検索で「ゴールデンレトリバー」の項目も表示されます。
• 検索は半角スペース区切りでAND検索できます。
• 名前変換スクリプトを使用する場合、基本的には変換後のテキストで検索されます。
• 検索項目のタグはdiv以外でも動きます。
• 同一ページに複数の検索フィールドは設置できません。

manul-text-resize

buttonタグでフォントサイズ変更ボタンとリセットボタンを追加します。
設定するidはコードを参照してください。
タグ内のテキストは自由に変更できます。

  <button id="manulResizeLarge">文字を大きく</button>
  <button id="manulResizeSmall">文字を小さく</button>
  <button id="manulResizeReset">リセット</button>


文字サイズ変更対象のテキストをまとめたコンテナを用意します。
divタグなどでテキストを囲み、class「manul-resize-container」を設定します。

<div class="manul-resize-container">
  <p>これはテキストサイズを変更するデモです。このコンテンツの文字サイズを調整できます。</p>
  <p>文字サイズの変更状況は、ご利用中のブラウザのLocalstorageに保存されます。</p>
  <p>もう一つの段落です。</p>
</div>

• manul-fade等の機能と併用できます。
• 変更できるフォントサイズは10px～26pxです。
• 文字サイズの変更状況は閲覧者のブラウザのLocalStorageに保存されます。
• class「manul-resize-container」のコンテナを囲むタグで、font-sizeが指定されていると場合によってはデフォルト値が適用されません。
• デフォルトの文字サイズを変更したい場合はmanul-box.cssの後で「.manul-resize-container」のfont-sizeを定義してください。
  変更例： <link rel="stylesheet" href="manul-box.css">
<style>
.manul-resize-container {
  font-size: 14px;
}
</style>

manul-fade

段落を含むコンテナを追加し、class「manul-fade」を設定します。

<div class="manul-fade">
  <p>湖にいる白鳥の妖精は「アストラ」と呼ばれて親しまれています。</p>
  <p>白鳥の歌声は人々の心を癒し、国王さえも存在を知っているほどです。<br>
  朝の光の中で翼を広げる様は息を呑むほど美しく、国中で白鳥を知らない者はいません。<br>
  白鳥を一目見ようと、今日も湖には多くの人が訪れています。</p>
  <p>白鳥はいつも湖の中央にある小さな島に住んでいました。<br>
  その島には、色とりどりの花々が咲き誇り、白鳥の住まいである小さな草木の家がありました。<br>
  朝になると、白鳥は湖の周りを飛び回りながら美しい歌を歌い、人々の心を癒していました。</p>
</div>

低速のフェードインにする場合はclass「manul-fade」と同時に「manul-fade-slow」を設定します。

<div class="manul-fade manul-fade-slow">
  <p>・・・省略・・・</p>
  <p>・・・省略・・・</p>
</div>

高速のフェードインにする場合はclass「manul-fade」と同時に「manul-fade-fast」を設定します。

<div class="manul-fade manul-fade-fast">
  <p>・・・省略・・・</p>
  <p>・・・省略・・・</p>
</div>

• 一文字一文字をタグ操作したりアニメーションを設定するので、文字量の多いページでは動作が重くなる場合があります。
• manul-fadeコンテナの直下にはpタグの要素だけを使ってください。他のタグでは動きません。
• pタグの中にはbrタグや名前変換スクリプトのspanタグも使えますが、pタグ直下で使ってください。
  全てのインラインタグが綺麗に表示されるとは限りません。
• pタグ内でrubyタグを使うと少しカクつきます。
• フェードイン完了前に名前登録をすると、フェードイン対象ではなくなります。
  できるだけ名前登録ページ以外でフェードインを実装することをおすすめします。
• 画面途中でリロードした場合や、フェードイン対象のスクロールを通り過ぎた場合は上から順にフェードインするとは限りません。
• 最下部までスクロールすると、強制的にすべての文字を一度に表示します。（表示漏れ防止のため）