早速設定してみよう！
パソコンから、ひだっちブログ管理画面→テンプレートをクリック
PCテンプレート
スマートフォンテンプレート
タブレットテンプレート
携帯テンプレート
と出てきますので、それぞれの
「カスタマイズ」をクリック
＊最初は練習用に別のテンプレートを読み込んで追記していってください。
そうするとスタイルシート（CSS) トップページ 個別記事 アーカイブと出てきました
今回「トップページ」と「個別記事」を編集していきます
各コードのバックアップを取る
それぞれよく分からないコードが書いてありまして、操作ミスでどこかの記述を消してしまうとまずいので
下記コードをコピペする前に元のコードをテキストか何かにコピペして保存しておいてください。
やり方はコードが書いてあるところどこでもいいのでマウスでクリック
↓
Ctr+A（全選択）
↓
Ctr+C（コピー）
↓
ワードかテキスト開いてCtr+v（貼り付け）で現在のコードが書き出されますので適当なファイル名で保存しておけば分からなくなった時戻せます。
▲ 目次にもどる
コードをコピペする
下記コードを、トップページの
<head>～ </head>の間にコピペします。
しばらくスクロールすると
</head>の記載がありますので、その上に下記黄色で囲った記述をコピペします。
<!-- jQuery.jsの読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<p><!-- スムーズスクロール部分の記述 -->
<script>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
コピペ箇所ですが<head>から</head>の間になります。
後で探しやすいように</head>のすぐ上にペーストすると良いかと思います。
終わったら、個別記事のコード内にも同様にペーストします。
アーカイブにもコピペして大丈夫ですが、しなくても動くかと思います。
次に更新をかけます。 この時点では見た目の変化はありません。
カスタマイズトップから今度はスマートフォンも同様に追記します。 タブレット有効にしている人はタブレットも変更しておきます。
念のため、自分のブログをPCとスマホから確認してください。
トップにへんなタグの記述とかが見えてたら、どこか間違えてますので一旦バックアップファイルから戻します。
▲ 目次にもどる
記事を書くときのベースコードについて
記事投稿を押してデザインモードのチェックは外してください。
記事内に下の黄色枠内のコードをコピペします。
<h2 id="index">■目次</h2>
<ol>
<li>▼ <a href="#title1">目次1</a></li>
<li>▼ <a href="#title2">目次2</a></li>
<li>▼ <a href="#title3">目次3</a></li>
<li>▼ <a href="#title4">目次4</a></li>
<li>▼ <a href="#title5">目次5</a></li>
<li>▼ <a href="#title6">目次6</a></li>
</ol>
<h2 id="title1">■目次1</h2>
<a href="#index">▲ 目次にもどる</a>
<h2 id="title2">■目次2</h2>
<a href="#index">▲ 目次にもどる</a>
<h2 id="title3">■目次3</h2>
<a href="#index">▲ 目次にもどる</a>
<h2 id="title4">■目次4</h2>
<a href="#index">▲ 目次にもどる</a>
<h2 id="title5">■目次5</h2>
<a href="#index">▲ 目次にもどる</a>
<h2 id="title6">■目次6</h2>
<a href="#index">▲ 目次にもどる</a>
PCプレビューしてみましょう
どうですか？
クリックしてうまくスクロールしていない方はどこか貼り間違えたか何かかと思います。
目次と見出しで＜ｈ２＞タグ使ってますが、この辺りはご自身のレイアウトで＜ｈ３＞に変更したりしてみると良いかと思います。
実際に長い記事を書いていくときは「目次１」と書いてある「＞」と「＜」の間の文字を変更するだけです。
記事本文の書き方は
目次
<li>▼ <a href="#title4">〇〇に行ってきた</a></li>
<h2 id="title4">■〇〇に行ってきた</h2>
ここに文章書いていきます
<a href="#index">▲ 目次にもどる</a></div>
という感じです。
スクロール先がズレるとき
目次を押した先でズレることがあります。
そのときの修正方法は、最初にコピペした「トップページ」と「個別記事」のコードを修正します。
// 移動先を数値で取得
var position = target.offset().top;
の「TOP;」という記述をずれる方向に合わせて 「.top -25;」と言った具合に、画面を更新しながら調整します。
これは私のところの修正値です、他の人が見たときにずれているのかどうかは分かりません
▲ 目次にもどる
タグを少しだけ覚えようコーナー
今回タグを利用しています
で囲われているコードです。
全部覚えるのも大変なので
タグは＜〇〇＞が開始 同じタグ＜／〇〇＞で受ける。ものがあるしないものもある
＜ｈ１＞～＜ｈ５＞
ひだっちブログの＜ｈ１＞は、ブログタイトルになりますので、記事内は＜ｈ１＞タグを使用せず、＜ｈ２＞以降を使用してください。
コピペ内に＜ｈ２＞とあるのはサブタイトルみたいな感じです。＜ｈ３＞とかにしても問題ありませんが、その下に来る見出しは＜ｈ４＞ ＜ｈ５＞と下げていってください。
＜ａ ｈｒｅｆ＝＞ クリックした時どこかに飛ばすタグです。 スクロールせず単純に飛ばすだけでしたら、CSSいじらなくても本文のタグだけで出来ます。
＜ｕｌ＞ ＜ｏｌ＞ ページ内の構造を伝えるタグです。
あたりを覚えておくと今回のコードとかぶってきますので色々応用が利きますよ
▲ 目次にもどる
今回の記述はＳＥＯ対策にもなる
Ｇｏｏｇｌｅ検索結果の文章内にこんな記載が出てくることないですか？
記事内容の中にリンクが混ざってます。
ここをクリックすると、ページ内の見出しタイトルに直接飛びます。
詳しいことは分かりませんがＧｏｏｇｌｅＳＥＯにいいらしいです
次回カスタマイズ設定の続きで
ブログ文章を枠で囲って綺麗に装飾してみよう！ CSS設定編です。
おたのしみに