ヴェルポリ -Verpoli-

これから起こる出来事をできるだけ簡潔にまとめておりますです。主に芸能情報、マンガ、ゲームに関する情報が多いかな。

*

【stinger5】スクロールすると途中でサイドバーが消える現象の直し方【最新版】

こんにちは、最近カスタマイズ記事が増えましたが、

またひとつこのブログに変更を加えたので備忘録として残します。

stinger5で、下にスクロールするとサイドバーが消える現象の直し方。

SnapCrab_NoName_2015-5-7_2-44-41_No-00

sponsoredlink

 

stinger5特有の症状らしい

ブログの顔というか服というか、

とにかく外面であるテーマ選びは非常に重要ですが、

デザインはもちろんレスポンシブ対応であるかどうかなども、

モバイルフレンドリー的に重要な部分ですよね。

 

そうなると「stinger5」になるのではないか、

ということなのです。

SnapCrab_NoName_2015-5-7_2-45-43_No-00

使いやすくてレスポンシブ対応もできるし、

ただ一つだけ欠点が存在するのです。

 

それこそが今回のタイトルでもある、

「スクロールすると途中でサイドバーが消える」という欠陥です。

これ調べましたらですね、結構皆さんこの現象に悩んでらっしゃいまして、

stinger5特有の欠陥だったそうなんです。

じゃあ直してみよう!そうしよう!

SnapCrab_NoName_2015-5-7_2-24-54_No-00

 

Scroll.js←こいつがラスボス

実際に調べてみるとかなりのブログやら記事が出てきまして、

その中で書かれていることも共通なのですが、

「scroll.jsをいじれ」ということです。

 

これはFFFTPや他のFTPソフトなどを使って、

wp-content/themes/stinger5ver20140902/js/scroll.js

scroll.jsファイルを一部編集するという意味です。

SnapCrab_NoName_2015-5-7_2-48-51_No-00

 

上記のスラッシュ「/」はクリックした順番であり、

ファイルの位置を確認するためのものであり、

「wp-content」→「themes」→・・・と、

この順番で展開していってください。

 

ファイルを編集する前にもちろんバックアップは取っておいてくださいね。。。

 

そして実際に編集を行う前に、

①Terapad(HTMLエディタ)をインストールしておく
②万が一に備えバックアップしたファイルをデスクトップに設置

以上の手順をこなしておきます。

そして実際に行う動作は簡単で、

/*—————–
広告のフロート

(function(jquery) {
jquery(document).ready(function() {

Ads Sidewinder
by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder

var main = jQuery(‘main’); // メインカラムのID
var side = jQuery(‘aside’); // サイドバーのID
var wrapper = jQuery(‘#scrollad’); // 広告を包む要素のID

if (main.length === 0 || side.length === 0 || wrapper.length === 0) {
return;
}

var w = jquery(window);
var wrapperHeight = wrapper.outerHeight();
var wrapperTop = wrapper.offset().top;
var sideLeft = side.offset().left;

var sideMargin = {
top: side.css(‘margin-top’) ? side.css(‘margin-top’) : 0,
right: side.css(‘margin-right’) ? side.css(‘margin-right’) : 0,
bottom: side.css(‘margin-bottom’) ? side.css(‘margin-bottom’) : 0,
left: side.css(‘margin-left’) ? side.css(‘margin-left’) : 0
};

var winLeft;
var pos;

var scrollAdjust = function() {
sideHeight = side.outerHeight();
mainHeight = main.outerHeight();
mainAbs = main.offset().top + mainHeight;
var winTop = w.scrollTop();
winLeft = w.scrollLeft();
var winHeight = w.height();
var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;
pos = !nf ? ‘static’ : (winTop + wrapperHeight) > mainAbs ? ‘absolute’ : ‘fixed’;
if (pos === ‘fixed’) {
side.css({
position: pos,
top: ”,
bottom: winHeight ? wrapperHeight,
left: sideLeft ? winLeft,
margin: 0
});

} else if (pos === ‘absolute’) {
side.css({
position: pos,
top: mainAbs ? sideHeight,
bottom: ”,
left: sideLeft,
margin: 0
});

} else {
side.css({
position: pos,
marginTop: sideMargin.top,
marginRight: sideMargin.right,
marginBottom: sideMargin.bottom,
marginLeft: sideMargin.left
});
}
};

var resizeAdjust = function() {
side.css({
position:’static’,
marginTop: sideMargin.top,
marginRight: sideMargin.right,
marginBottom: sideMargin.bottom,
marginLeft: sideMargin.left
});
sideLeft = side.offset().left;
winLeft = w.scrollLeft();
if (pos === ‘fixed’) {
side.css({
position: pos,
left: sideLeft ? winLeft,
margin: 0
});

} else if (pos === ‘absolute’) {
side.css({
position: pos,
left: sideLeft,
margin: 0
});
}
};
w.on(‘load’, scrollAdjust);
w.on(‘scroll’, scrollAdjust);
w.on(‘resize’, resizeAdjust);
});
})(jQuery);
—————-*/

以上のコードをコピペするだけです。

 

これでサイドバーが途中で消えることはなくなりますが、

時折ウィジェットを追加したりすると再び消えることもあります。

 

この対応については詳しくわかりませんが、

scroll.jsファイルをそのまま削除してしまうのも有効らしいです。

(実際に削除してみましたが、結局サイドバーは消えました・・・)

 

なので結局欠陥は欠陥らしいので、

これでひとまず臭い物に蓋をしておきましょう!

sponsoredlink

 

Q2W3 Fixed WidgetとStandard Widget Extensions

ひとまずサイドバーが消失しなくなったことを確認したら、

今度は逆にスクロールしていくとウィジェットが尽きて、

サイドバーに何も表示されない状態になります。

SnapCrab_NoName_2015-5-7_2-50-7_No-00

 

サイドバーというのは記事を読みながらでも目に入りますし、

直接リンクを張っているので記事毎の回遊率が上がる部分です。

そこが空欄になっているのはもったいないので、

サイドバーに指定したウィジェットを固定しましょう!

 

ネット上の多くの方は「Standard Widget Extensions」というプラグインを推していましたが、

私のブログではなぜかこのプラグインは動作しませんので、

「Q2W3 Fixed Widget」というプラグインを使っています。

SnapCrab_NoName_2015-5-7_2-43-7_No-00

 

この「Q2W3 Fixed Widget」は、

サイドバーに特定のウィジェットを、

指定した位置で固定できるプラグインになります。

 

まず「外観」に「Fixed Widget Options」が追加されているので、

「General Options」のMargin Topを50px、

Margin Bottomを200に設定すればstinger5ではちょうどいいですね。

 

※Margin Topの値は、固定したウィジェットと、

画面ギリギリのラインとの余白の値です。

SnapCrab_NoName_2015-5-7_2-31-13_No-00

 

画像はMargin Topを0pxにした場合です。

こちらは50pxにした場合。
SnapCrab_NoName_2015-5-7_2-54-30_No-00

 

だいぶ違うのがわかると思います。

またMargin Bottomの値は逆に画面ギリギリの下のラインとの余白で、

これの設定は必須です。

 

というのもですね、

この値が0pxに設定されていると、

フッターの文字とかぶるってしまい、良くないですね。

SnapCrab_NoName_2015-5-7_2-34-45_No-00

SnapCrab_NoName_2015-5-7_2-34-50_No-00

なのでstinger5では200pxがちょうどいいのかと思います。

他のテーマでも適当な値を探してみてください。

 

設定はこれだけで大丈夫ですが、

後は「外観」→「ウィジェット」を選び、

「サイドバーウィジェット」から、

固定したいウィジェットをクリックし、

「Fixed Widget」にチェックを入れれば完成!

SnapCrab_NoName_2015-5-7_2-27-42_No-00

SnapCrab_NoName_2015-5-7_2-40-21_No-00

sponsoredlink

 

なかなか大変な作業かと思いますが、

stinger5を使ってブログを運営するためには必須なカスタマイズですので、

面倒臭がらずにやってみてください。

 

私自身何度もカスタマイズの途中で詰んでしまい、

泣きそうになったくらい、難しいお気持はわかります。

もし躓いた所があればコメント等いただければ返信します。

 - WordPressカスタマイズ, ネット , ,

        

  関連記事

【初心者向け】キーワード選定方法【トレンドアフィリエイト】

去年の4月に下克上を購入し、現在まで400記事を書き上げてみて、 あの頃とは違っ …

【初心者向け】トレンドアフィリエイトのキーワード選定【未来予測】

前回トレンドアフィリエイトのキーワード選定の話をしましたが、 今回は記事ネタの短 …

【有能プラグイン】パンくずリストを作成するBreadcrumb NavXTの設定

今日ご紹介するプラグインは、 パンくずリストを作成するBreadcrumb Na …

【有能プラグイン】WP-CopyProtectの設定方法

PushPressでクロールそしてインデックス速度を上げた後は、 WP-Copy …

【アンテナサイト作成】FeedWordPressの使い方次第でできる3つのこと

今回も便利なWPプラグインのご紹介です! FeedWordPressの使い方を学 …

【年収1億】和佐大輔wikiを作成してみた件

ネットビジネスを始めようと思ったら、 必ず出会う教材『ネットビジネス大百科』の作 …

【WordPress】初心者が選ぶ初心者向けのおすすめプラグイン

今日は私的に記念すべきであり、というのも、 今日で無料ブログを初めてちょうど1年 …

【有能プラグイン】PushPressの設定方法【WordPress】

プラグインご紹介月間の今月2記事目になりました。 今回のプラグインは「PushP …

【年収1億円】川島和正と安西ひろこの関係

「世界を旅する年収1億円ブロガー」であり、イケメンの頂点。 ネット業界のトップ、 …

【Sleipnirの使い方】iPhoneブラウザはSafariだけじゃない!

最近サイトのカスタマイズ記事を多く書いたことで、 少し情強になってきたように調子 …