最近、SIRIUSでホームページを作成するのだが、その際、他のホームページを参考にすることが多々ある。
ググると結構たくさん参考になるページがでてくるのだが、いつしかそれに依存しきってしまう。
このページいいなと思うと、今度はそのサイト内で色々検索してしまうのだ。
しかし、そうなると、そのページがなくなったら非常に困る事態になる。
最近も参考にしていたページが突然表示されなくなった。
考えてみたら、そのページを作った人もドメインやサーバーの有効期限が切れたら、更新しない可能性もあるのだ。
最近、バックアップのハードディスクが壊れ、バックアップの大切さを痛感した私は、なんとか残しておけないものかと考えた。
じゃあ、自分で残しておけばいいという結論に至るのは至極当然の流れ…。
以下は自分でやってみた、SIRIUSのHTMLを修正した手順。
①一定時間でフェード画像切替
手順1
SIRIUSのフォルダにJAVASCRIPTというフォルダを作ったので、その中のbxsliderというフォルダをサーバーのどこか（サイト名内が理想？） にアップロードする。
無い時はここ（http://bxslider.com/）から
手順2
まず、HTMLのテンプレートの</head>の上に以下の分を追加
<!– jQuery library (served from Google) –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<!– bxSlider Javascript file –>
<script src=”http://あなたのURL/js/jquery.bxslider.min.js”></script>
<!– bxSlider CSS file –>
<link href=”http://あなたのURL/js/jquery.bxslider-aki.css” rel=”stylesheet” />
</head>
手順3
次にそのまま下の方に移り</body>の上に以下の分を追加
<!– ★スライダーここから★ –>
<script type=”text/javascript”>
$(document).ready(function(){
var obj = $(‘#slider’).bxSlider({
auto: true, //自動再生有効
slideWidth:600, // スライドショーの幅
pause:3000, // 表示間隔
speed:1000, // 切替時間
<!–mode:’fade’, // フェード効果–>
pager:true, // ページ選択ボタン
controls:true, // 左右ボタン
onSlideAfter: function () { obj.startAuto(); } //ページ切替操作後自動再生再開
});
});
</script>
<!– ★スライダーここまで★ –>
</body>
手順4
記事本文中の挿入したいところへ以下を追加
<div id=”slider”>
<li><a href=”リンク先1″><img src=”<% pageDepth %>img/挿入したい画像1.png” alt=”” /></a></li>
<li><a href=”リンク先2″><img src=”<% pageDepth %>img/挿入したい画像2.png” alt=”” /></a></li>
<li><a href=”リンク先3″><img src=”<% pageDepth %>img/挿入したい画像3.png” alt=”” /></a></li>
</div>
②ページの先頭へ戻る（リンク）
手順1
HTML編集で
<!– ★ヘッダーここから★ –>の下に、
<div id=”jump”>
を追加
手順2
<!– ★フッターここから★ –>の上に、
<a href=”#jump”><img src=”<% pageDepth %>img/ボタン画像.jpg” align=”right” alt=”” /></a>
を追加。
実際やってみてできなかったので（テンプレートによる？）、その場合は記事本文の最後に
<p style=”text-align:right;”><a href=”#jump”> <align=”right” alt=”” />ページ先頭へ</a></p>
といれればOK。
③ページの先頭に戻る（ＪａｖａＳｃｒｉｐｔを使ってビュンと飛ぶ）
手順1
HTML編集で＜/head＞の上に下記をコピペします。
<!– jquery読み込み –>
<script type=”text/javascript” src=”//code.jquery.com/jquery-1.11.1.min.js”></script>
<!–トップに戻るボタンを追加 –>
<p class=”pagetop”><a href=”container”>このページの先頭へ</a></p>
<!– スムーズスクロールの記述 –>
<script type=”text/javascript”>
$(document).ready(function() {
var pagetop = $(‘.pagetop’);
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
pagetop.fadeIn();
} else {
pagetop.fadeOut();
}
});
pagetop.click(function () {
$(‘body, html’).animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
</head>
手順2
スタイルシート編集で、下のほうに以下を追加
/*–先頭に戻る–*/
.pagetop {
display: none;
position: fixed;
bottom: 0px;
right: 15px;
}
.pagetop a {
display: block;
background-color: #5565c7;
text-align: center;
color: #fff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 10px 20px 10px;
border-radius: 30px 30px 0px 0px;
box-shadow: 5px 5px 5px #AAA;
}
.pagetop a:hover {
display: block;
background-color: #1e50a2;
text-align: center;
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 10px 20px 10px;
border-radius: 30px 30px 0px 0px;
box-shadow: 5px 5px 5px #AAA;
}
ここはまるっとコピーでOK。
手順3
スマホ版も修正したい時は、最上段のテンプレート→ｉｐｈｏｎサイトＨＴＭＬ編集・ｉｐｈｏｎサイトスタイルシート編集で同じ箇所を修正する。
④ヘッダーにトップに戻るようにリンクを貼る
手順1
HTML編集で
<!– ★ヘッダーここから★ –>
<div id=”rndtop”>
<% pageTopic %>
</div>
<div id=”rndbody”>
<div id=”header”>
<% headerText | tag_insert(a href=”<% pageDepth %>”) | tag_insert(h2) %>
<% pageDescription %>
</div>
<!– ★ヘッダーここまで★ –>
の<div id = “header”>～</div>のあいだを、もうまるっと修正
<!– ★ヘッダーここから★ –>
<div id=”jump”>
<div id=”rndtop”>
<% pageTopic %>
</div>
<div id=”rndbody”>
<div style=”text-align:center”>
<a href=”<% pageDepth %>”>
<img src=”<% pageDepth %>img/header.jpg” alt=”” />
</a>
</div>
<!– ★ヘッダーここまで★ –>
最初の<div id=”jump”>の部分は前述のTOPに戻るのためのもの。
青い部分を修正したのだが、header.jpgはもちろんヘッダー画像ね。
で、修正するのはトップページのみでいいみたい。
