表示位置固定のTOPへ戻るボタン(サイト上部へ移動)

表示位置固定のTOPへ戻るボタン(サイト上部に戻る)の設置方法です。

正直、私もよくは分かっていません…(汗

色々なサイトを見て回って、なんとか設置に漕ぎ着けたのです。ぜひ、こちらをご覧になって見て下さいね。

参考ページ:scrollsmoothly.jsとCSS3を使った、表示位置固定のTOPへ戻るボタン (サンプルあり)

ご覧になると分かると思いますが、スタイルシートとHTMLに入力する様になっています。

スタイルシートは、ワードプレスの管理画面の「外観」⇒「テーマ編集」からスグに分かると思います。

で、もう一つのHTMLって言うのは、テンプレートファイルの中の’header.php’(ヘッダーのテンプレート)に記入するんです。(今回の場合は)

この’header.php’には、いわゆる<head></head>部分と<body></body>部分が記述されています。

ですから、スクリプトの部分は、</head>の直前、そしてHTMLソースは<body>の直後に記述すればOKです。こんな感じに記述すれば大丈夫です。(テーマTwentyElevenの場合)

<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );

/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<script charset="utf-8" type="text/javascript" src="scrollsmoothly.js"></script>
</head>
<body <?php body_class(); ?>>
<p id="back-top"><a href="#top">▲ページTOP</a></p>
<div id="page" class="hfeed">

CSSソースは、スタイルシートの任意の場所にコピペすればOKです。よく分からないって方は、

/* =Menu
-------------------------------------------------------------- */

の直前あたりにでもコピペしておけば良いでしょう。(テーマによっては別の表記になっている場合があります。)

この辺りは、正直初心者にとってはチョッとこんがらがるかもしれません。ですから、あえて記事にしていなかったって言うのもあります。

  • HTMLソースの入力は、テンプレートファイル(表示したい部分)に記述します。
  • CSSソースは、スタイルシートに入力します。

この相関関係を覚えてしまえば、そんなに難しくはないと思います。

また、HTMLの基礎/CSSの基礎/CSS3などは、こちらのサイトがとても役に立つと思います。私も良く利用していますので、ぜひご覧になってみて下さい。

参考サイト:HTMLクイックリファレンス

まずは基本通りに、指定の位置にサンプルソースをコピペしてみることから始めてみると良いと思います。

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です