THE THOR コメント リンク ページ内

THE THOR コメントに飛ぶページ内リンク を追加

THE THOR コメントに飛ぶページ内リンク を追加しました。

当サイトのコメント欄は記事や関連記事、広告などが表示されたあとにあります。通常そこまで閲覧するユーザーは少なく、コメントがあることに気づかないことも多いでしょう。見つかりにくいコメント欄へのリンクを記事内に設置することでユーザービリティの向上、コメント欄の利用率を上げブログの活性化を目指します。

コメントにはメリット・デメリットがあります。コメント欄の設置を悩んでいる人はこちらの記事がオススメです(外部記事)

ゼロからBLOG

実はコメントで記事の間違いを何度が指摘していただいている。ブロガーとして間違った情報を垂れ流しにするほど恥ずかしいことは…

 

THE THOR コメントに飛ぶページ内リンク を追加する方法

 

ページ内リンクを追加する手順は以下の通り。今回は THE THOR の機能を利用して簡単にボタンを設置しました。

  1. ボタンの作成
  2. ウィジェットの配置 

 

トオル
細かいことは面倒だなぁ
テツ
コードだけコピペでもOK
コードはここにあるぞ!

THE THOR ページ内リンク ボタンの作成

「投稿の下書き」でボタンを作り、ウィジェットにコピペします。

ウィジェットの設定画面ではコードを打つのが大変なので下書きでコードを作成しウィジェットにコピペ。これは THE THOR でカスタマイズするときに良く利用する方法です。

今回のボタンは THE THOR の「スタイル」から「ボタン」「ブルーボーダーボタン」を選択しました。

そのままでは文字が大きく、ボタンの幅が狭いので変更します。

これがブルーボーダーボタン

THE THOR コメントに飛ぶページ内リンク ボタン作成

 

ボタンのサイズを変更

「スタイル」から「スタイルセット」「文字系」で、もともと設定されている「サイズ(大)」と「太字」を解除。

※サイズやカラーは好みで変更してください。

サイズと太字を解除

 

ボタンの幅を変更

「スタイル」から「スタイルセット」「サイズ(100%)」を選択。

※幅は好みで変更してください。当サイトでは位置をセンターに指定しています。

サイズ変更

トオル
100%幅だからセンターにする意味はないけどな

 

ボタンにページ内リンクを指定

コメント欄へのリンクは「#respond」になります。ボタンの文字を選択しリンクに「#respond」を設定。

リンクの挿入はWPの基本機能から

THE THOR コメントに飛ぶページ内リンク

以上でボタンは完成です。
テキストエディタでコードをコピーしましょう。参考までに当サイトで使用しているコードを載せておきます。

<p style=”text-align: center;”><a class=”ep-btn es-TpaddingS es-BpaddingS es-RpaddingM es-LpaddingM es-borderSolidS bgc-white brc-DLblue ftc-DLblue es-BTarrow es-size100″ href=”#respond”>コメントを見る/書く</a></p>

 

THE THOR ウイジェットでボタンを配置

ボタンの配置にはウィジェットを使用します。

全ての記事下にボタンを配置する場合のエリアは「投稿ページ下部エリア」。使用するウィジェットは「[THE]スタイルテキスト」です。THE THOR の独自機能を使用したコードを載せるときは「カスタムHTML」ではなく「[THE]スタイルテキスト」を使用します。

※設置場所は好みで変更してください。
※ウィジェットを使用せず任意の場所に直接コードを載せても大丈夫です。

操作手順
外観 → カスタマイズ → ウィジェット → 投稿ページ下部エリア
ウィジェットを追加で「[THE]スタイルテキスト」を選び、先程作ったボタンのコードをコピペしたら完成。

 

あとがき

 

コメント欄自体を上に持ってくることもできるけど、そうすると関連記事などへのアクセスが悪くなる。優先順位を考えた結果このようなカタチとなりました。

ボタンの設置場所は記事下のほかに、記事内、例えば「〜よければ教えて下さい!」などの記載場所に設置すると親切かと思います。

今回はコメント欄へのジャンプですが、ページ内のリンクは簡単に設置が可能なので活用して閲覧者に優しいページ作りを目指しましょう!

>