管理画面の「テンプレート」メニューから、「HTMLの編集」画面で、設定を変更します。
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
----- ここに埋め込む -----
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>
↓</head> タグ（閉じる）の直前に JavaScript を埋め込みます。下記は、外部ファイルの読み込みと直接埋め込んだ場合の例です。直接埋め込みの例として、Keep-in-Viewを設置しています。
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
<!--
/*! ###########################################################################
Source: https://github.com/dutchcelt/Keep-in-View
Copyright (C) 2011 - 2012, Lunatech Research B.V., C. Egor Kloos. All rights reserved.
GNU General Public License, version 3 (GPL-3.0)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see http://www.opensource.org/licenses/gpl-3.0.html
########################################################################### */
// Uses AMD or browser globals to create a jQuery plugin.
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
$.fn.keepInView = function(settings) {
return this.each(function() {
var $elem = $(this);
var defaults = {
// Position will be fixed regardless of scroll position when set to true
fixed: false,
// Vertical offset that applies to both top and bottom;
edgeOffset : 0,
// Override z-index if you can't or don't want to set this with CSS
zindex : $elem.css('zIndex'),
// Override all scripted positions with your own custom CSS classname
// The set classname will be triggered when element scrolls out of view
// The Script will add a suffix of '-top' or '-bottom'
customClass: false,
// Only trigger this script on scrolling out at the 'top', 'bottom' the default is 'both'.
trigger: 'both',
// Set the height and width (user can override these if necessary)
h : $elem.height(),
w : $elem.width()
};
var options = $.extend(defaults, settings),
offset = $elem.offset(),
leftPosition = $elem.css('left'),
marginOffset = (leftPosition==="auto") ? parseInt($elem.css('marginLeft'),10) : 0,
prepCSS = function(){
$elem.css({
position: 'fixed',
left: leftPosition - marginOffset + 'px',
width: options.w,
height: options.h,
zIndex: options.zindex
});
},
fixCSS = function(t){ $elem.css({ top: t+'px' }); }
var setElem = function(){
// Making sure that $elem doesn't fire if it is taller than the window (like a sidebar)
// To prevent elastic scrolling fireing set the body in css to 'overflow: hidden'.
// Then wrap your content in a div with 'overflow: auto'.
if ( $elem.height() > $(window).height() ) { return false; }
var scrolledOutAt = "";
if ( $(window).height() < parseInt(offset.top + $elem.outerHeight() - Math.abs($(window).scrollTop())+options.edgeOffset,10) && !options.fixed ) {
scrolledOutAt = "bottom";
};
if ( ($(window).scrollTop()) > offset.top - options.edgeOffset && !options.fixed) {
scrolledOutAt = "top";
};
if(!options.customClass){
prepCSS();
if (scrolledOutAt==="bottom" && (options.trigger === 'both' || options.trigger === 'bottom')){
fixCSS(($(window).height()-$elem.outerHeight()-options.edgeOffset));
} else if (scrolledOutAt==="top" && (options.trigger === 'both' || options.trigger === 'top')){
fixCSS(options.edgeOffset);
} else if (options.fixed){
$elem.css({top:options.edgeOffset,left:offset.left});
} else {
$elem.removeAttr('style');
}
} else if(options.customClass){
if ( options.trigger === 'both') {
if (scrolledOutAt==="bottom" || scrolledOutAt==="top"){
$elem.addClass(options.customClass+"-"+scrolledOutAt);
} else if (!scrolledOutAt) {
$elem.removeClass(options.customClass+"-top").removeClass(options.customClass+"-bottom");
}
} else if (scrolledOutAt===options.trigger){
$elem.addClass(options.customClass+"-"+options.trigger);
} else if (!scrolledOutAt) {
$elem.removeClass(options.customClass+"-"+options.trigger);
}
}
}
var staySticky = function(){
$elem.removeAttr('style');
options.w = $elem.width();
options.h = $elem.height();
offset = $elem.offset();
setElem();
}
var killSticky = function(){
$elem.removeAttr('style').off(".sticky");
$(window).off('.sticky', staySticky).off('.sticky', setElem);
}
$elem.on('update.sticky', staySticky);
$elem.on('unstick.sticky', killSticky);
$(window).on('resize.sticky', $elem, staySticky).on('scroll.sticky', $elem, setElem).trigger('scroll');
});
};
}));
//-->
</script>
</head>
0 件のコメント:
コメントを投稿