INTEREST

常に表示されるコンテンツを両サイドに配置

 

2014.11.30

スクロールしても常に表示されるコンテンツを両側に配置 メールでお問い合わせ頂いたので試してみました♪

ちょくちょくメールで色んな質問等を頂いてるので、今回はその中から “スクロールしても常に表示されるコンテンツを両サイドに配置したい” って内容をそのまま記事にさせて頂きましたｗ(￣ε￣〃)ゞ
広告をこの方法で表示する場合、規約で禁止されてる場合もあるので事前に注意が必要だったり、好みの問題など賛否あるとは思いますが最近確かにこう言う感じで広告を貼ってるサイトって多い気がします。
ちなみに「Google AdSense」ではやっちゃダメなので気を付けてね♪


スクロールしても常に表示する要素


  1. 1.jQueryでクラスを操作する
  2. 2.CSSで表示位置を調整
  3. 3.HTMLに表示する内容を記述する
  4. 4.両サイドに広告を表示したサンプル
  5. 5.この記事へトラックバックする
  6. 6.この記事へコメントを投稿する



1.jQueryでクラスを操作する


今回頂いたお問い合わせの内容は、決まった場所に常に表示するのでは無く、一定量もしくは常時表示したい要素までスクロールした場合に画面に合わせて常に表示したいとの事だったので、それを「jQuery」を使って要素に対して “class（クラス名）” を付けたり外したりする感じでやってみました♪
※その “class（クラス）” の内容はスタイルシートで設定します。

▼まずは以下のソースをHTMLのhead要素内（<head>～</head>の間）に貼り付けます。
FC2ブログの場合「テンプレートの設定」からHTML編集内に記述します。


<script type="text/javascript">
$(function($) {
//一定以上スクロールすると固定表示にする要素のclass名を指定（複数の場合,で区切る）
var ads = $('.left-ads,.right-ads'),
offset = ads.offset();
$(window).scroll(function () {
//スクロールが100に達したらclassを追加して固定表示（数字は任意で変更して下さい）
if($(window).scrollTop() > 100) {
ads.addClass('outside-fixed');
//それ以外はclassを削除
} else {ads.removeClass('outside-fixed');}
});
});
</script>

※4行目で固定表示したい要素のクラスを指定しています。（クラス名は任意です）
両サイドへ配置したいとの事だったので「.left-ads」と「.right-ads」と言うクラスを指定してます。


※8行目でどれだけスクロールしたら固定表示にするかを指定してます。
スクロールすると “outside-fixed” と言うクラスが上記の固定表示の要素に付きます。
クラスが付与されるスクロール量はとりあえず「100」としてます。（必要に応じて調整）


※11行目でそれ以外の場合はクラスを削除する指定をしています。




2.CSSで表示位置を調整


メインコンテンツの両サイドに表示したいとの事だったので、既存のコンテンツ部分を編集する必要が無く必要に合わせて簡単に調整が出来るようスタイルシートは以下のようにしてみました。
※画面の中央から左右にマージン（margin）を取って両サイドの要素の表示位置を調整してます。

▼以下のソースをスタイルシート（CSS）に記述します。
FC2ブログの場合「テンプレートの設定」からスタイルシート編集内に追加します。


.left-ads{/* 左側の要素 */
position:absolute;/* body要素を基準にしてます */
right: 50%;/* 画面中央に要素を表示 */
margin-right:600px;/* 要素から画面中央への長さ */
top:100px;/* 左側要素の初期位置（高さ） */
}
.right-ads{/* 右側の要素 */
position:absolute;/* body要素を基準にしてます */
left: 50%;/* 画面中央に要素を表示 */
margin-left:600px;/* 要素から画面中央への長さ */
top:100px;/* 右側要素の初期位置（高さ） */
}
.outside-fixed{/* 固定表示（左右共通） */
position:fixed;/* スクロールしても固定表示 */
top:10px;/* 固定表示した際の画面上部への余白 */
}

※4行目と10行目の “600px” の部分はメインコンテンツの幅の半分ちょいって感じで設定すると良い感じになると思います。（例：メインコンテンツが1000pxなら、520pxなどお好みで調整）


※5行目と11行目の「top:100px;」の部分は一定量スクロールしたら固定表示にしたいとの事だったので両サイドの要素の初期位置を画面上から100pxの位置にしています。（お好みで調整）
（jQueryの部分で設定したスクロール量の数値と同じにすると良い感じです。）


※13行目の「.outside-fixed」と言うクラスをjQueryで操作して固定表示したい要素に付けたり削除したりする事で、スクロールした際に固定表示されるようにしています。




3.HTMLに表示する内容を記述する


メインコンテンツの両サイドに固定表示したい内容をHTMLのbody要素内（<body>～</body>の間）に記述します。（表示位置はCSSで指定してるのでbody要素の最初でもいいし、一番最後でもOKです）

▼以下のソースをHTMLのbody要素内（<body>～</body>の間）に記述します。
FC2ブログの場合「テンプレートの設定」からHTML編集内に記述します。


<div class="left-ads"><!-- ▼ 左側の要素 ▼ -->
ここに表示したい内容を入れます。
</div><!-- ▲ 左側の要素 ▲ -->

<div class="right-ads"><!-- ▼ 右側の要素 ▼ -->
ここに表示したい内容を入れます。
</div><!-- ▲ 右側の要素 ▲ -->

※2行目と6行目にそれぞれメインコンテンツの左右に表示したい内容を入れます。
広告バナーなどを表示する場合はここにその広告のソースをコピペすればOKです♪




4.両サイドに広告を表示したサンプル


このブログはアフィリエイトがメインじゃないし... 両サイドに表示したい内容も無かったので...
デモページとして、最近放置気味の「FC2ブログのテンプレート「basic_white」をカスタマイズ 」の方に実際にスクロールしても常に表示される広告を両サイドに表示してみましたｗ

何かちょっと趣旨が違う気がするけど... サンプルが無いとアレかな？と思って...ｗｗ
サンプルがあると「こんな感じになるのか～」って分かりやすいしね♪(￣ε￣〃)ｂ

って事で今回はお問い合わせ頂いた内容をお題にした記事でした♪ｗ
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 ＩＴ技術ブログ Webサイト構築へ
B!

関連記事
2014-11-30 | JavaScript | コメント(11) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/61-7e283c74

「常に表示されるコンテンツを両サイドに配置」へのトラックバック

- TrackBack -


「常に表示されるコンテンツを両サイドに配置」へのコメント

- Comment -

ほんと・・・

色々凄いですね♪

サブブログにも、お邪魔してさせて頂きましたが、

凄いですね♪

・・・って、あのサブブログの件ですが、

メアドって違うメアドで登録して、

ブログ開設してるんですか？

サブブログを、私も作ろうと考えているのですが、

新しいメアドを作るの面倒だな・・・って（笑）



  • 2014-12-01 01:33
  • らいふさん@管理人
  • 編集

Re: ほんと・・・

> らいふさん

早速コメントいただきありがとうございます♪(≧∇≦)ﾉ

サブブログの件ですが新しくメアドを作らなくても簡単に出来ますよ～ん♪ｗ

方法については以下の記事が参考になると思います。

■FC2ブログに１つのメールアドレスで複数のアカウントを作る方法
http://afro8.seesaa.net/article/368749537.html

ちなみに私もこの方法です♪
なので送られて来るメールは１つのアドレスで管理出来るし、
サブブログの為に登録したメアドを忘れる事も無く便利です♪ｗ

また、一人で複数のブログを作ってもいいの！？って思う方も居るかもなので
一応公式のヘルプページのURLも貼っておきますね♪d(⌒ー⌒)

■FC2ブログのヘルプページ「Q.複数のブログを運営することは可能ですか？ 」
http://help.fc2.com/blog/qa/group9/40/

是非お試し下さいませ♪(￣ε￣〃)ｂ
  • 2014-12-01 01:50
  • あると♪さん@管理人
  • 編集

なかなかです(^_^;)

今日も朝からウェブマスターツールと格闘してました。

ドメインを変えるだけでも結構手間がいることが判明しました。
（今日の記事で書く予定です）

うーん、時間だけが過ぎていく…<`～´>

その点、FC2などの無料ブログは細かい設定が出来ない分、楽な気もしてます。

個人サイトではなんでもかんでも出来るけど、設定を間違えると大変なことになりますね。

応援ですｃ(゜-゜)
  • 2014-12-01 17:19
  • じゅんぴーAさん@管理人
  • 編集

Re: なかなかです(^_^;)

> じゅんぴーAさん

そうですね＞＜
ドメインを変えるとそう言う問題も出て来ますね...（；＞＜）

でも、そう言うのって実際にやってみて気付ける事だと思うので
今後も色々参考にさせて頂きますね♪ｄ(≧∀≦)ｂ

また応援ありがとうございます♪
  • 2014-12-02 00:33
  • あると♪さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-12-02 01:27
  • -さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-12-02 02:55
  • -さん@管理人
  • 編集

やっぱり・・・

そうなんですねー（笑）

メアド+1のテクは、実は以前から他のブロガーさんから聞いて、

知っていたのですが、なかなか活用してませんでした(汗）

でも、稼ぎを上げようと思ったら、そろそろサブブログを、

運営した方が良いかな・・・（笑）

FC2ブロの規約・・・ありがたいです♪

安心してこれで、出来ますね♪


応援ポチ♪
  • 2014-12-02 12:52
  • らいふさん@管理人
  • 編集

Re: やっぱり・・・

> らいふさん

ご存知でしたか♪ｗ(￣ε￣〃)ゞﾃﾍ

アフィリエイトで効率的に利益を上げるならサイトやブログは多い方が良いですよね♪

いつも応援ありがとうございますっ!!(≧∇≦)b
  • 2014-12-03 02:37
  • あると♪さん@管理人
  • 編集

No title

あると♪さんのとこは記事もですが、コメント欄も見逃せない情報盛りだくさんですね〜（≧∇≦）
ソースに色がついてるとテンション上がるんですけど、どうやってつけてるんですか？
  • 2014-12-03 15:04
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

いつもありがとうございます♪(￣ε￣〃)ゞ

確かに皆さんからのコメントのお陰で、私自身も色んな事に気付かされます♪

ひーさんさんも何か気付いた事や疑問・質問があれば遠慮なく書いちゃって下さいねｗｗ

またソースに色が付いてるってのは記事中のアレですよね？ｗ

アレは「SyntaxHighlighter」ってのを使って表示してます♪(￣ε￣〃)ｂ

■参考記事（ブログを始めた最初の頃の記事ですｗ）
「ソースコードを読みやすく表示する方法」
http://interest2014.blog.fc2.com/blog-entry-7.html

ブログ上でソースを表示したい時は便利ですよ♪

またデザインは最初から何パターンか用意されてますし、
CSSを編集する事で自由にデザインを変更する事が出来るので
ブログの雰囲気に合わせる事も可能です♪
  • 2014-12-03 17:18
  • あると♪さん@管理人
  • 編集

承認待ちコメント

このコメントは管理者の承認待ちです
  • 2015-01-24 22:41
  • -さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます 　
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author：あると♪
ブログ開始： 日目
公開記事数： 件

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

【 当ブログのご案内は こちら♪ 】

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ