ページ内移動タグ設定のやり方 ～ひだっちブログカスタマイズ設定編～
目次の書き方について
という文章レイアウトが多いし見やすいと感じており、目次を押したときにスルスル動くサイトがあります。
このやり方がずっと分からなかったのですが、最近少しタグの記述が分かりましたのでシェアさせていただきます。
長い文章を書く方ご参考ください。
今回の記事を書くに当たり
Jquelyとっても簡単 ページ内スムーススクロールを参考にさせていただきました。
貴重な情報ありがとうございました。
上記リンク先に記載がある銀色のボタン
ボタンを押すと作成イメージページに飛びます。
今回コピペするだけですが、カスタマイズ作業は自己責任でお願いします
パソコンから、ひだっちブログ管理画面→テンプレートをクリック
PCテンプレート
スマートフォンテンプレート
タブレットテンプレート
携帯テンプレート
と出てきますので、それぞれの「カスタマイズ」をクリック
＊最初は練習用に別のテンプレートを読み込んで追記していってください。
そうするとスタイルシート（CSS) トップページ 個別記事 アーカイブと出てきました
今回「トップページ」と「個別記事」を編集していきます
それぞれよく分からないコードが書いてありまして、操作ミスでどこかの記述を消してしまうとまずいので下記コードをコピペする前に元のコードをテキストか何かにコピペして保存しておいてください。
やり方はコードが書いてあるところどこでもいいのでマウスでクリック
↓
Ctr+A（全選択）
↓
Ctr+C（コピー）
↓
ワードかテキスト開いてCtr+v（貼り付け）で現在のコードが書き出されますので適当なファイル名で保存しておけば分からなくなった時戻せます。
▲ 目次にもどる
下記コードを、トップページの
<head>～ </head>の間にコピペします。
しばらくスクロールすると
</head>の記載がありますので、その上に下記黄色で囲った記述をコピペします。
<!-- jQuery.jsの読み込み -->
<script type="text/javascript" src="//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プレビューしてみましょう
どうですか？
クリックしてうまくスクロールしていない方はどこか貼り間違えたか何かかと思います。
目次と見出しで＜ｈ２＞タグ使ってますが、この辺りはご自身のレイアウトで＜ｈ３＞に変更したりしてみると良いかと思います。
実際に長い記事を書いていくときは「目次１」と書いてある「＞」と「＜」の間の文字を変更するだけです。
記事本文の書き方は
▲ 目次にもどる
目次を押した先でズレることがあります。
そのときの修正方法は、最初にコピペした「トップページ」と「個別記事」のコードを修正します。
// 移動先を数値で取得
var position = target.offset().top;
の「TOP;」という記述をずれる方向に合わせて 「.top -25;」と言った具合に、画面を更新しながら調整します。
これは私のところの修正値です、他の人が見たときにずれているのかどうかは分かりません
▲ 目次にもどる
今回タグを利用しています
<>で囲われているコードです。
全部覚えるのも大変なので
タグは＜〇〇＞が開始 同じタグ＜／〇〇＞で受ける。ものがあるしないものもある
＜ｈ１＞～＜ｈ５＞
ひだっちブログの＜ｈ１＞は、ブログタイトルになりますので、記事内は＜ｈ１＞タグを使用せず、＜ｈ２＞以降を使用してください。
コピペ内に＜ｈ２＞とあるのはサブタイトルみたいな感じです。＜ｈ３＞とかにしても問題ありませんが、その下に来る見出しは＜ｈ４＞ ＜ｈ５＞と下げていってください。
＜ａ ｈｒｅｆ＝＞ クリックした時どこかに飛ばすタグです。 スクロールせず単純に飛ばすだけでしたら、CSSいじらなくても本文のタグだけで出来ます。
＜ｕｌ＞ ＜ｏｌ＞ ページ内の構造を伝えるタグです。
あたりを覚えておくと今回のコードとかぶってきますので色々応用が利きますよ
▲ 目次にもどる
Ｇｏｏｇｌｅ検索結果の文章内にこんな記載が出てくることないですか？
記事内容の中にリンクが混ざってます。
ここをクリックすると、ページ内の見出しタイトルに直接飛びます。
詳しいことは分かりませんがＧｏｏｇｌｅＳＥＯにいいらしいです
次回カスタマイズ設定の続きで
ブログ文章を枠で囲って綺麗に装飾してみよう！ CSS設定編です。
おたのしみに
HP:http://oricyo.co.jp/index.html
１．アイキャッチ画像
２．前書き
３．目次
４．本文
５．まとめ
という文章レイアウトが多いし見やすいと感じており、目次を押したときにスルスル動くサイトがあります。
このやり方がずっと分からなかったのですが、最近少しタグの記述が分かりましたのでシェアさせていただきます。
長い文章を書く方ご参考ください。
今回の記事を書くに当たり
Jquelyとっても簡単 ページ内スムーススクロールを参考にさせていただきました。
貴重な情報ありがとうございました。
上記リンク先に記載がある銀色のボタン
ボタンを押すと作成イメージページに飛びます。
今回コピペするだけですが、カスタマイズ作業は自己責任でお願いします
目次
- １．早速設定してみよう！
- ２．各コードのバックアップを取る
- ３．コードをコピペする
- ４．記事を書くときのベースコードについて
- ５．スクロール先がズレるとき
- ６．タグを少しだけ覚えようコーナー
- ７．今回の記述はＳＥＯ対策にもなる
早速設定してみよう！
パソコンから、ひだっちブログ管理画面→テンプレートをクリック
PCテンプレート
スマートフォンテンプレート
タブレットテンプレート
携帯テンプレート
と出てきますので、それぞれの「カスタマイズ」をクリック
＊最初は練習用に別のテンプレートを読み込んで追記していってください。
そうするとスタイルシート（CSS) トップページ 個別記事 アーカイブと出てきました
今回「トップページ」と「個別記事」を編集していきます
各コードのバックアップを取る
それぞれよく分からないコードが書いてありまして、操作ミスでどこかの記述を消してしまうとまずいので下記コードをコピペする前に元のコードをテキストか何かにコピペして保存しておいてください。
やり方はコードが書いてあるところどこでもいいのでマウスでクリック
↓
Ctr+A（全選択）
↓
Ctr+C（コピー）
↓
ワードかテキスト開いてCtr+v（貼り付け）で現在のコードが書き出されますので適当なファイル名で保存しておけば分からなくなった時戻せます。
▲ 目次にもどる
コードをコピペする
下記コードを、トップページの
<head>～ </head>の間にコピペします。
しばらくスクロールすると
</head>の記載がありますので、その上に下記黄色で囲った記述をコピペします。
<!-- jQuery.jsの読み込み -->
<script type="text/javascript" src="//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>
という感じです。
<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設定編です。
おたのしみに
折長
段ボール株式会社
岐阜県飛騨市古川町上野５６７
＊何かご質問等ございましたら弊社までご連絡下さい。
Mail:web@oricyo.co.jp
HP:http://oricyo.co.jp/index.html
※会員のみコメントを受け付けております、ログインが必要です。
