概要
「フッター」って…なんか…立ち位置的に…微妙ですよね…
「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(){$(".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)})});
- </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 == "item"'>
- <div class='widget-content'>
- <data:content/>
- </div>
- </b:if>
- </b:includable>
- </b:widget>
投稿ページに「だけ」表示するための記述もしていますが…
全てのページに表示する場合は削除して下さい…
黃文字部分が該当箇所です…
おわりに…
あまり…欲張り過ぎて
…記述量を増やして高さが高くなると…
更に…ウザウザ
になりますので注意
しましょう… σ(^_^;)
以上
です…最後までお読みいただきましてありがとうございます…
現在…インフォメーション内のリンクはこちらの方法で表示しています…
jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿