SIRIUS2 ver.1.270にて<ページ内の特定の位置へリンク設定>できる機能が追加搭載されました。この機能はこれまでは完全手動で設定していた設定を半自動化してくれる機能です。ただし使い勝手に関してはデメリットに感じる部分もあるので、そのあたりの解決策もご紹介します。機能概要<ページ内の特定の位置へリンク設定>というのは、例えばリンクが付いてるテキスト等をクリックするとそのリンク先までするするっとスクロールしてリンク先が表示(ブラウザ画面の最上段に表示)される機能のことです。ユーザーがページ内を自分で探す手間を省き、必要な情報へすばやく案内しやすくなる地味に便利な機能で、これまでは手動で設定する必要がありました。基本的には同ページ内でのスクロール移動がメインですが、他ページの特定の箇所への移動も可能です。公式サイトの機能説明はけっこうアバウトな感じなので、ここではより詳しくそのやり方をご紹介します。リンク先IDの付け方まずは「クリックしたらスクロールして表示される」リンク先にIDを設定します。サンプルはトップページ内でのリンクになります。リンク先がテキスト部分であればそのテキストを適当に範囲選択してその上で右クリック→『IDの指定』をクリックします。ID指定のダイアログが出ます。デフォルトでは「anchor1」となっており、このままでよければOKをクリック、嫌なら別の英数字を指定します。注意書きにもありますが、ここで設定したIDの名称は同ページ内では1個しか作成できません。よってほかにもページ内リンクを設定する場合はここで設定したID名と重複しないようにします。これでリンク先テキストにIDが付与されます。リンク元の設定今度は先ほど設定したIDが付与された箇所(テキスト)へのリンクを設定してみます。サンプルとして、設定個所は記事1の「リンク先へのリンク付け」というテキストにしてみます。テキストを①範囲選択→②[リンク]をクリックします。ダイアログが出るので「同一サイト内のページを選択」アイコンをクリックします。今回はトップページ内でのリンク設定なので最初に①「トップページ」を選択→次にすぐ上の②「ページ内の特定位置を指定(指定IDへのリンク)」をクリックします。ID選択画面になるので、先ほど指定した「anchor1」を選択します。『リンク先URL』に、SIRIUS2の独自タグ込みのURLが自動挿入されました。OKをクリックして編集画面に反映させます。ここで動作チェックをしてみます。【プレビュー】をクリックして専用ブラウザを開きます。そしてリンク用下線が付いた「リンク先へのリンク付け」をクリックしてみます。ん?動かない?このリンクですが、どうやらプレビュー画面上では機能しないようです。(実際のブラウザでのプレビューでも無理)もちろんアップロード後であれば実際のブラウザでチェックするとちゃんとリンク先までするするっとスクロールします。でもいちいちアップロードしないとチェックできないのは不便ですよね。ということでプレビュー画面でも動作チェックができる”裏技”をご紹介します。やり方は『リンク付与されたHTMLタグから『{xxx}』というSIRIUS2の独自タグのみを削除する』、これだけです。今回のサンプルであれば<a href="{ID:top0}#anchor1">リンク先へのリンク付け</a>から赤文字部分を削除して<a href="#anchor1">リンク先へのリンク付け</a>とします。筆者ちなみに「anchor1」の前についてる「#」がHTML上では”ID”という意味になります。手動で作成する場合はこの書き方が普通なので実際は”裏技”でもなんでもありません。文法的にも全く問題ないです。これでプレビュー画面でも動作チェックができるようになり、リンクをクリックするとIDを付与した「リンク先」というテキストまで画面がスクロールして止まります。なおリンク先がフッター近くでリンク先から下の高さが足りない場合は、それよりも前の箇所がブラウザ最上段に表示されてしまいます。注意点として、このやり方が可能なのは同一ページ内のリンクだけです。<ページ内の特定の位置へリンク設定>では別ページの特定の箇所にもリンク付けできます。やり方はこれまでと同じで、リンク付けをする際に別ページを選択してから「ページ内の特定位置を指定(指定IDへのリンク)」をクリック→該当するIDを選択します。同一ページ内では同じIDを使うことはできませんが、別ページであれば同じIDを使うことは可能です。しかしながらやはりその別ページ内で同じIDを使うことはできません。編集画面では下のように反映されました。この別ページへのリンクに関してはプレビュー画面ではもちろん動作チェックは不可です。かといって『{ID:entry1}』の部分を削除してしまうと別ページへのリンクにならなくなってしまうため削除はできません。よって別ページの特定の箇所へのリンクはアップロード後に実際のブラウザで動作チェックするしかありません。記事タイトルへのリンクの付け方『記事タイトル』もリンク先に指定できます。例えば「H2タイトル(記事4)」と入力済みの記事4の『記事タイトル』をリンク先にして、リンクをクリックするとその記事タイトルまで一気にスクロールさせたいとします。しかしながら記事タイトルを範囲選択して右クリックしても『IDの指定』コマンドは表示されません。この場合はリンク先にIDを指定する工程はすっ飛ばして、リンクを付けたいテキスト上で[リンク]をクリックします。そして『ページ内の特定位置を指定』ダイアログまで進むと目的の記事タイトルが表示されてるので、あとはそこを選択するだけでリンク設定は完了します。編集画面には下のように反映されます。ここではIDとして赤下線部分「#text4-section」が自動設定されてます。では『記事タイトル』に何も記述してない場合の記事ブロック先頭をリンク先にしたい場合はどうするか。サンプルとして記事ブロック3の先頭をリンク先にしてみます。ここでも上と同じようにリンク先にIDを指定する工程は省いて『ページ内の特定位置を指定』ダイアログまで進みます。すると「#記事3」というのが見えるのでそれを選択します。編集画面には下のように反映されます。これを見てわかるように、記事タイトルがあろうとなかろうと記事ブロックの先頭をリンク先にしたい場合は赤下線部分のように「#text*-section」とすれば自動的に記事ブロックの先頭がリンク先になります。つまり記事2の先頭をリンク先にしたければ「#text2-section」、記事5の先頭をリンク先にしたければ「#text5-section」となります。テキスト以外へのリンク設定<ページ内の特定の位置へリンク設定>機能はテキスト以外にも設定できます。たとえば画像にも。やることはこれまでと同じで、画像タグ全体を範囲選択→右クリックで『IDの指定』をクリックしてリンク先を設定します。リンク元のテキストを範囲選択→[リンク]をクリック→「ページ内の特定位置を指定(指定IDへのリンク)」でID指定した画像タグを選択します。(※画像は「テキストなし」と表示されます)ボタンリンクなんかにも付与可能。ボタンリンクを生成したらそのボタンリンク全体を範囲指定して、あとはこれまでと同じです。




