テストのページ

アメンバー限定記事テスト

テスト

テスト

アメブロ　CSS編集　グローバルナビ設置

フリースペースに以下の内容を追加<div class="nav-wrap"><nav><ul class="nav-body"><li><a href="画像URL"><span>メニュー1</span></a></li><li><a href="画像URL"><span>メニュー2</span></a></li><li><a href="画像URL"><span>メニュー3</span></a></li><li><a href="画像URL"><span>メニュー4</span></a></li><li><a href="画像URL"><span>メニュー5</span></a></li></ul></nav></div>CSSに以下の内容を追加/* グローバルナビゲーションメニュー */.nav-wrap { position: absolute; margin: 0; padding: 0;}.skin-blogSubA, .skin-blogSubB { position: relative;}[amb-layout="columnB"] .skin-blogSubA .nav-wrap,[amb-layout="columnC"] .skin-blogSubA .nav-wrap,[amb-layout="columnE"] .skin-blogSubA .nav-wrap,[amb-layout="columnB"] .skin-blogSubB .nav-wrap { left: auto; right: 0;}[amb-layout="columnA"] .skin-blogSubA .nav-wrap,[amb-layout="columnD"] .skin-blogSubA .nav-wrap,[amb-layout="columnC"] .skin-blogSubB .nav-wrap { left: 0; right: auto;}[amb-layout="columnE"] .skin-blogSubB .nav-wrap { left: auto; right: -360px;}.nav-body { margin: 0; padding: 0;}.nav-body:after { display: block; clear: both; content: " "; height: 0; visibility: hidden;}.nav-body>br { display: none;}.nav-body li { display: block; float: left; margin: 0; padding: 0; text-align: center;}.nav-body li a { display: block; text-decoration: none;}.skin-blogBodyInner { padding-top: 90px; /* メニューバーの表示場所確保 */}.nav-wrap { top: -90px; /* メニューバーの上下位置調整 */}.nav-body { width: 1120px; /* メニューバー横幅 */ background: #FFFFFF; /* メニューバー全体の背景色 */}.nav-body li a { width: 224px; /* ボタンの横幅 */ line-height: 40px; /* ボタンの高さ */ color: #fff; /* 文字の色 */ background: #505050; /* ボタンの色 */}

アメブロ　CSS編集　ヘッダー画像をスライドショーにする

【CSSの編集】以下の内容をコピペしてCSSの最後尾に追加。/*■　スライドショー用　ヘッダーエリア　■*/.skin-bgHeader {background-color: #ffffff;width: 1120px;margin: 0 auto;}.skin-headerTitle{display:none;}.skin-bgHeader{height:500px;/*画像の高さに合わせる*/}/*■スライドショーの設定　■*/#slideshow{width:1120px;height:500px;/*画像の高さに合わせる*/position:relative;}/* img要素は絶対配置で一か所に重ねる*/#slideshow img{position:absolute;top:0;left:0;}/* 2番目以降のimg要素にclass="alt"を付け、消す*/#slideshow img.alt{display:none;}フリープラグインに以下の内容を追加<!--スライドショーの実行--><script src="http://www.google.com/jsapi"></script><script>google.load('jquery','1')</script><script type="text/javascript">$(function(){var interval = 7000;$('#slideshow').each(function(){var container = $(this);function switchImg(){var imgs = container.find('img');var first = imgs.eq(0);var second = imgs.eq(1);first.fadeOut(3000).appendTo(container);second.fadeIn(3000);}setInterval(switchImg, interval);});});</script><!--スライドショーをヘッダー位置に--><script type="text/javascript">$(document).ready(function(){$("#slideshow").appendTo(".skin-bgHeader");})</script>フリースペースに以下の内容を追加<div id="slideshow"><img src="画像URL"><img src="画像URL" class="alt"><img src="画像URL" class="alt"></div>