jQuery UI Extra-8 : フッターとしても使えるブラウザ下部に固定してクリックで開閉するインフォメーション領域

概要

「フッター」って…なんか…立ち位置的に…微妙ですよね…

「Copyright」や「Alliance」だけならまだしも…

コンテンツを入れ込んでデザインしても…

検索エンジンからの来訪者は…例え…有用なコンテンツだとしても…

殆どの場合…記事末まで読んでコメントフォームが現れたら…

勿論…コメントすら残さずに離脱して行く事でしょう…これが…

当サイトがコメント関連を折り畳んでいる事由でもあります…

 jQuery UI Extra-4 : Bloggerのコメント関連を「Accordion」で開閉してしてスタイリッシュに


なので…お薦めコンテンツをアピールするための…クリックで開閉する…

ブラウザ下部に固定されるインフォメーション領域を作成してみましょう…

ページ読み込み時に表示されたでしょ…ウザイでしょ

クリックして畳んで下さいな…　(￣ー￣) 邪笑®

当サイトでは「Copyright」や「Alliance」の…ほぼ無意味なフッターと…

インフォメーション領域を分けていますが…

全て入れ込んでデザインすれば…単体でフッターとしても使えるでしょう…

Blogger での導入を前提に解説します…

設置領域の設定

「テンプレート」「HTMLの編集」から「CSS」を記述します…

#outer-bottom{width:1100px;position:fixed;bottom:0;margin:0 auto;z-index:10}

ご自身のサイトに合わせて適宜変更して下さい…

最下部に固定する領域ですから「</body>」直前に以下を記述して…

<b:section class='outer-bottom' id='outer-bottom' showaddelement='yes'/>

「テンプレートを保存」すれば…設置領域の設定は完了です…

「レイアウト」からガジェットを追加出来るようになります…

インフォメーションの設定

「CSS」の設定

「CSS」の設定

.b-trigger{position:absolute;left:-20px;bottom:4px;width:40px;text-align:center;padding:10px 0;background:url(透過背景画像の「base64」生データ) repeat;border:1px solid transparent;-webkit-border-top-left-radius:15px;-moz-border-radius-topleft:15px;border-top-left-radius:15px;-moz-box-shadow:0 0 15px #58a;-webkit-box-shadow:0 0 15px #58a;box-shadow:0 0 15px #58a}
.b-info{position:absolute;bottom:4px;width:auto;height:80px;display:inline-block;background:url(透過背景画像の「base64」生データ) repeat;border:1px solid transparent;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;-moz-border-radius-topleft:15px;-moz-border-radius-topright:15px;border-top-left-radius:15px;border-top-right-radius:15px;-moz-box-shadow:0 0 15px #58a;-webkit-box-shadow:0 0 15px #58a;box-shadow:0 0 15px #58a;margin:0 20px;padding:10px}

「Open」「Close」のボタン部分が「.b-trigger{…}」

インフォメーション領域が「.b-info{…}」です…

インフォメーション領域の高さは「height:80px;」です…

記述量によって適宜変更して下さい…幅は「width:auto;」で領域全体ですが…

記述量や改行によっては…中央部分に間隔が空きます…

これは…ネガティブマージンで解消出来ますので…

下記の…「HTML」マークアップ…を参照して下さい…

このような「」透過背景画像を使っています…

画像は…基本的に…「base64」変換を推奨しています…

画像をbase64エンコードするツール / Syncer  

「JavaScript」の設定

「JavaScript」の設定

$(function(){$(".b-trigger").toggle(function(){$(this).html('<i class="fa fa-folder-open-o fa-2x" title="Open"/>');$(".b-info").slideUp(400)},function(){$(this).html('<i class="fa fa-times-circle fa-2x" title="Close"/>');$(".b-info").slideDown(800)})});

Blogger でテンプレートに直書きする場合の「JavaScript」の設定

<script type='text/javascript'>
$(function(){$(&quot;.b-trigger&quot;).toggle(function(){$(this).html(&#39;&lt;i class=&quot;fa fa-folder-open-o fa-2x&quot; title=&quot;Open&quot;/&gt;&#39;);$(&quot;.b-info&quot;).slideUp(400)},function(){$(this).html(&#39;&lt;i class=&quot;fa fa-times-circle fa-2x&quot; title=&quot;Close&quot;/&gt;&#39;);$(&quot;.b-info&quot;).slideDown(800)})});
</script>

ボタンクリックで「0.4」秒で閉じて…「0.8」秒で開きます…

「Open」「Close」のボタン部分には…

「Font Awesome」のアイコンを使用していますが…

 「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】


下記の部分を…それぞれ…矢印系の文字列などでも置換出来ます…

「<i class="fa fa-folder-open-o fa-2x" title="Open"/>」
「<i class="fa fa-times-circle fa-2x" title="Close"/>」
「<i class="fa fa-folder-open-o fa-2x" title="Open"/>」
「<i class="fa fa-times-circle fa-2x" title="Close"/>」

文字列を使う場合は…「.html」を「.text」として下さい…

勿論…「jQuery UI」のアイコンだけのボタンでも OKです…

 「jQuery」「jQuery UI」第２回「Button」リンクとフォームをボタン化

「HTML」マークアップ

「レイアウト」から「HTML/JavaScript」を追加して内容をこのように記述します…

「HTML」マークアップ

<div class="b-trigger"><i class="fa fa-times-circle fa-2x" title="Close"></i></div>
<div class="b-info">
<div style="font-size:10px;float:left">
<img border="0" src="画像の「base64」生データ" height="48" width="120" style="clear:left;float:left;margin-right:1em; margin-top:1em;margin-bottom:1em" />
<span class="buttons"><a class="east" href="URL">「jQuery」と「jQuery UI」で HTML に彩りを添えよう…</a></span><br />
「導入」「Button」「Accordion」「Tabs」「Effects/Slide」<br />
「Progressbar」「Dialog」「Tooltip」「Menu」
<span class="buttons"><a class="east" href="URL">「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト</a></span>
</div>
<div style="font-size:10px;float:right;margin-left:-85px">
<img border="0" src="画像の「base64」生データ" height="62" width="120" style="clear:left;float:left;margin-right:1em;margin-bottom:1em" />
<span class="buttons"><a class="east" href="URL">Blogger Template Customize Universal / INDEX</a></span><br />
Blogger テンプレート・カスタマイズ / 全般を解説<br />
<span class="buttons"><a class="east" href="URL">Blogger Template Customize Main / INDEX</a></span><br />
Blogger テンプレート・カスタマイズ / 記事領域を解説
</div>
</div>
<div class="progressbar value1" style="margin-left:-20px;width:980px"></div>

改行は…ご自身の設定にもよりますが「<br />」で行って下さい…

赤文字の「div」は領域全体を使って…

1番目を左寄せ…2番目を右寄せにしていますので…先ずは改行で…

それぞれの領域幅を決めて…赤文字の「div」の間隔は…

黃文字部分のネガティブマージンの数字で調整して下さい…

水色の「Progressbar」の幅も…

 「jQuery」「jQuery UI」第６回「Progressbar」動きのあるカラフルな区切り線として使用


黃文字部分の数字で適宜調整して下さい…不要な場合は削除して…

「CSS」の…2箇所ある「bottom:4px;」を「bottom:0;」に書き換えて下さい…

黃文字部分の「Font Awesome」のアイコンは…

「JavaScript」の設定…での「Close」の記述と同じにして下さい…

ガジェットの設定

「タイトル」と「クイック編集アイコン」は不要で…尚且つ…

デザインにも影響しますので…このように書き換えます…

ガジェットの設定

<b:widget id='HTML13' locked='false' title='Information' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='widget-content'>
        <data:content/>
      </div>
    </b:if>
  </b:includable>
</b:widget>

投稿ページに「だけ」表示するための記述もしていますが…

全てのページに表示する場合は削除して下さい…黃文字部分が該当箇所です…

おわりに…

あまり…欲張り過ぎて …記述量を増やして高さが高くなると…

更に…ウザウザになりますので注意 しましょう…　σ(^_^;)

以上です…最後までお読みいただきましてありがとうございます…

現在…インフォメーション内のリンクはこちらの方法で表示しています…

 jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery JavaScript Current-Label : jQuery / Extra