SIRIUS2もっと美しく、もっと自由に

検索結果

「 リンク 」の検索結果
  • アイキャッチ画像
    ページ内の特定の位置へリンク設定-SIRIUS2の使い方
    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指定した画像タグを選択します。(※画像は「テキストなし」と表示されます)ボタンリンクなんかにも付与可能。ボタンリンクを生成したらそのボタンリンク全体を範囲指定して、あとはこれまでと同じです。
    Read More
  • アイキャッチ画像
    短縮リンク-SIRIUS2の使い方
    <短縮リンク>とは、サイト内でひんぱんに使うリンクURLがある場合にそれを一元管理することで簡単にページ内に挿入することができる機能です。リンクURLが変わっても管理画面内で変更するだけで一気にすべての短縮リンク内のURLが変更されます。アクセス解析用のタグも設置可能なのでどのリンクがどの程度クリックされているのかの計測も可能。管理画面内【短縮URL】タブ記事装飾メニューの【短縮リンク設定】をクリックすると短縮リンクの管理画面が表示されます。『新規作成』をクリックして設定画面を開きます。【短縮URLの設定】内の『基本設定』縮小版①短縮するURLここにに短縮したいURLを入力します。すでにリンクが設定されたリンクタグ(HTMLコード)から自動的にURLを抜き出してほしい時は右側にある「リンクタグ」をクリックします。入力画面が表示されるのでリンクタグを貼り付けてOKをクリックすれば自動的にURL部分だけを抜き出して設定してくれます。②ファイル名短縮リンクのリンク先となるファイル名をここで指定します。ここで設定したファイル名は短縮リンクのURLの一部となります。デフォルトでは「link1」と挿入されますが変更も可能。右側にある「ランダム」ボタンをクリックするとランダムなファイル名が自動で生成されます。ただしランダムなファイル名だと、あとでチェックする際どのリンクかがすぐにはわかりづらいので注意が必要です。③タイトルリンク表示用のテキストを設定します。右側にある「取得」ボタンをクリックすると、リンク先URLを解析してタイトルを自動取得できる場合があります。④[オプション]転送形式短縮リンクの転送形式として「メタ形式」と「フレーム形式」が用意されてますが、違いがイマイチわかっておりません。が、ここはデフォルトの「メタ形式」で問題ないです。⑤[オプション](スマホサイト用)短縮リンク「スマホサイト同時生成」を利用していてリンク先URLをPC用とは別のURLにアクセスさせたい場合はここにそのURLを記入します。【短縮URLの設定】内の『詳細設定』公式サイトのマニュアルでは「短縮リンクとして生成されるHTMLファイルの<body>タグに専用のタグなどを指定したい場合に記述をしてください。」とありますが、どういう使い方なのか筆者はイマイチわかっておりません。いずれにしても通常は無視していいレベルのものかと。一通り設定が済んだらOKをクリックします。すると設定画面内に短縮リンクが1個登録されます。修正したい場合は修正したい短縮リンクを選択状態にして赤枠内の『編集』をクリックします。管理画面内【詳細設定】タブ短縮URL管理画面内の【詳細設定】タブをクリックすると下のような画面になります。①生成先のフォルダ名特に理由がない限りはこのままで問題ありません。サイト生成を行うと「rm」というフォルダが作られその中には「link1.html」が格納されてます。②トラッキングコード登録した短縮URLのクリック数の計測などに必要なJavascriptのコードなどがあればここにペーストします。短縮リンクの利用方法やり方は通常のリンク挿入と同じで、リンクを表示したい場所で(記事装飾メニューの)「リンク」アイコンをクリックします。続いて「選択」をクリックします。”見慣れた”リンク先選択画面が出てくるので、「短縮リンク」タブ内の中から表示したい短縮リンクを選択→OKクリックで設定完了です。あとは繰り返して使いたい箇所で同じ操作をすれば瞬時にリンクの設定が完了します。リンク先が変わっても大元の短縮URLを修正するだけで設置した短縮URLを一気に変更することができます。
    Read More