超便利!シリウスの超絶早技右クリックの機能

シリウス管理画面上で右クリックする事で使える超便利な機能一覧

このページの解説動画はこちら!

 

リンク先の動画Noと、このサイトの各コンテンツの動画Noが一致しています。特にこの機能は作業の効率化でスピードアップにつながりますので是非確認しておいて下さい。

 

シリウスの機能

シリウスの作業画面上で右クリックすると右の画像のような窓が開きます。

 

基本的に使用するアイテムは、ご存知だとは思いますが、一度どのような機能があるか全部確認しましょう。

 

今まで気が付かなかった超便利な機能が見つかるかもです!

 

右クリックの操作コマンド

8-パーツの挿入

  • お気に入りボタン
  • カウントダウンタイマー
  • ソーシャルボタン

9-テキストの操作
元に戻す/切り取り/コピー・貼り付け
削除/HTML削除/メモ帳で編集

 

10-HTMLエスケープ/アンエスケープ
11-タグチェック

 

動画-1 定型文挿入

サイト作成で頻繁に使うタグを登録しておいて一発で呼び出す事ができる機能です。基本的に開始タグと終了タグを1セットで記述する仕様ですが、開始タグだけで構成される記述も登録できます。下記は私が登録している例です。

 

小さな三角マークです。

<font color="#ff0080">&#9658;</font>小さな三角マークです。

小さな四角マークです。

<font color="#0080ff">&#9632;</font>小さな四角マークです。

 

動画-2 リンク挿入

[リンク挿入]をクリックすると下記画像のコマンドが開きます。テキストリンクが生成できるのはもちろん、画像ボタンをクリックして画像を呼び出せば、選択した画像がリンク画像になります。文字サイズボタンでリンクテキストのフォントを指定できます。

 

リンク挿入

 

また、[外部サイトボタン]ではシリウスで作成している管理画面上の他のサイトをリンク先に指定可能で、[内部ページボタン]では現在作成中のサイトのエントリーページ、カテゴリーページを呼び出し一発でURLを挿入する事ができます。

 

[ターゲット]はリンク先ページを新規別窓で開くのか現在のタブ上で切り替えるのかを選択できます。ユーザビリティを考慮した場合の基本は、別サイトへのリンクは[blank]同じサイト内のリンクでは[指定なし]を選択します。

 

テキストリンクタグ

ホームページ作成ソフトランキング

<a href="http://softsate.info/">ホームページ作成ソフトランキング</a>

 

画像リンクタグ

<img src="<% pageDepth %>画像URL" style="width:200px;" alt="画像説明文" />

シリウス

リンクを挿入した直後は、その挿入したタグが青色反転しています。この事を利用してリンク挿入作業と同時に、複数の装飾を一度に設定してしまうクセをつけるとサイト作成のスピードが格段に早くなります。

 

タグの挿入

動画-3 サイトマップ

サイトマップコマンドをクリックすると、作成しているサイトの各ページへのリンク集が自動で作成されます。初めてサイトに訪れた閲覧者さんはこのサイトマップでサイトの構成がすぐに理解でき、自分の望むコンテンツに迷わず飛ぶ事ができます。

 

当サイトのサイトマップの表示例

<% sitemaps %>

 

動画-4 キャリアの変更

コンテンツによっては、PCサイトだけに出力させてスマホでは表示させない、またPCサイトのみ非表示にして携帯端末だけでサイトが閲覧できるようにした方が良いというような事がでてきます。このような場合にシリウスではキャリアの変更機能で対応できます。

 

単独キャリアタグ生成

  • パソコン・・・<pcc>コンテンツ</pcc>
  • 携帯・・・・・<mbc>コンテンツ</mbc>
  • アイフォン・・<ipc>コンテンツ</ipc>

<pcc>
ここに書かれている文章はPCにだけに表示させるタグで囲まれているので、スマホ、携帯では表示さずパソコンのみで表示されます。
</pcc>

 

2キャリアタグ生成

  • パソコン/アイフォン・・・<pcc|ipc>コンテンツ</pcc|ipc>
  • 携帯/アイフォン・・・・・<mbc|ipc>コンテンツ</mbc|ipc>

 

3キャリアタグ同時生成

  • <pcc>コンテンツ</pcc>
  • <mbc>コンテンツ</mbc>
  • <ipc>コンテンツ</ipc>

 

このコマンドは3っのキャリアにあるコンテンツをそれぞれ全部を出力させるのですが、それぞれのキャリアで装飾方法を変更したい場合に利用します。

 

例えばキャリアごとに文字ポイントを変更したり、あるキャリアだけ画像を表示させないなど、コンテンツはすべて出力させたいが、表現方法を変更したい場合に便利です。

 

<pcc>
PCサイト・・フォントを変える
</pcc>
<mbc>
ガラケーサイト・・画像を消す
</mbc>
<ipc>
スマホサイト・・画像だけ表示
</ipc>

 

動画-5 QRコード

PCサイトを閲覧して頂いている場合、携帯端末でも気軽にアクセスしてもらえるようにQRコードで誘導します。シリウスでは説明文付きのパターンも用意されていて、サイトURL付きのメールをリンクで立ち上げさせる事ができます。

 

<% QRコード %>

QRコード

<% QRコード_説明文 %>

QRコード

当サイトは携帯からもご覧頂けます。
上のQRコードを読み取るか、こちらからURLをメールで送信して下さい。

 

動画-6 改行無視エリア

シリウス管理画面では、テキストを記述した場合デフォルトでPタグ改行が指定されています。サイト生成したときに自動で<p>〜</p>が挿入されるという事です。

 

しかしアドセンスコードなどをp改行すると、正しく動作しない場合があります。その際[改行無視エリア]を指定し<p>〜</p>を出力させないようにする訳です。

 

<noReturn>
コンテンツ
</noReturn>

 

管理画面上の記述

サイト作成ソフトシリウスでホームページ作成
綺麗なサイトが初心者さんでも簡単に作成できます。

HTMLファイルに吐き出されるソース

<p>サイト作成ソフトシリウスでホームページ作成<br />
綺麗なサイトが初心者さんでも簡単に作成できます。</p>

 

改行無視エリアの記述が必要なコンテンツ

  • アドセンスコード
  • ブログパーツ
  • ウィジェット

以前はグーグルマップをサイトに埋め込む場合にも[改行無視エリア]を指定する必要がありましたが、現在の埋め込みタグでは不要になっています。

 

動画-7 モジュールの挿入

各ページでよく使う画像や文章のソースを、ひとまとめにしてモジュールに設定しておくと、<% module(モジュール名) %>を呼び出して貼り付けるだけで、設定登録したモジュールが呼び出され、貼り付けるだけで簡潔で簡単にサイト作成ができます。

 

繰り返し使うコンテンツをモジュール設定するのですが、今回の動画解説では、下記の表示をボックス枠を含めてモジュールに設定するという作業で解説しています。

 

表示させたいコンテンツのまとまり

シリウス

この文章と右の画像は枠で囲まれています。この表示と同じパターンを他のページでも表示させたい場合は、このソース全体を、モジュールに設定登録します。 長いソースも1行で表示させる事ができるので、管理画面がスッキリします。

通常の記述の場合

<div class="nmlbox">
<p class="txt-img"><img src="<% pageDepth %>img/n700_5085.jpg" style="width:280px;" align="right" alt="シリウス" /></p>この文章と右の画像は枠で囲まれています。この表示と<b>同じパターン</b>を他のページでも表示させたい場合は、このソース全体を、<span style="color:#C50000"><strong>モジュールに設定登録</strong></span>します。

 

長いソースも<b>1行で表示</b>させる事ができるので、管理画面がスッキリします。
</div>

モジュールを利用した場合

<% module(格安チケット) %>

 

動画-8 パーツの挿入

お気に入りボタン

お気に入り

シリウスの旧バージョンでは右クリックで[お気に入りボタン]のタグを呼び出す機能がありましたが、ver15から廃止されました。ブラウザによって表示されない不具合があったからです。

 

全てのブラウザにお気に入り登録ボタンを設置する事はできるのですが、jsやスクリプトを駆使する事になり初心者さんには難しい面があります。また現在ではソーシャルブックマークが主流になっていますのでURLを貼っておきます。

 

※ 私のメインサイトの表示例
お気に入りボタン

カウントダウンタイマー
いいね!ボタン(Face book)
Tweetボタン(Twitter)
いいね!+Tweetボタン
 

 

動画-9 テキスト操作の基本

シリウスの管理画面上で、例えば(画像の取り込み等)をされた場合、そのソースは常に青色反転しています。任意でもカーソルでなぞると青色反転します。

 

この操作後の青色反転の特性を利用しますと、テキストやソースが選択された状態になっているわけですから、連続で色々な装飾を一度に実行する事ができます。

 

例を挙げますと、画像を新規で取り込んだ後に、[センター寄せ、リンク付け]などです。また、ボックス枠も設定できます。シリウスの特性であり、スピーディーに、綺麗にサイト作成ができる理由のひとつなので、どんどん使っていきましょう!

元に戻す

直前に実行した操作から順番に、作業前の状態に戻します。
キーボードで操作する場合

元に戻す・・・ctrl+z

前に進む・・・ctrl+y

切り取り/コピー・貼り付け

テキストや画像のソースを青色反転させてから作業します。
キーボードで操作する場合。

切り取り・・・・・・ctrl+x

コピー/貼り付け・・・ctrl+v

削除/HTML削除

削除・・・削除したい部分を青色反転させ、削除ボタンを押します。
キーボードで操作する場合・・・BackSpace

 

HTML削除・・・青色反転させた部分のHTMLソースのみを削除します。

すべて選択

キーボードで操作する場合

すべて選択・・・ctrl+a

メモ帳で編集

管理画面上でこのボタンを押した場合、メモ帳(WIN)が自動的に開き、メモ帳にページ内のすべてのソースがコピーされて表示されます。

 

動画-10 HTMLエスケープ/アンエスケープ

あるHTMLグループを青色反転させHTMLエスケープの指示をすると、そのままHTMLタグをブラウザ上に表示させる事ができます。アンエスケープはその逆で再びHTMLの表示になるため、通常のブラウザ表示になります。

 

例をあげますと次のテキストは、ボールド(太文字)カラー(赤)で表示されていますが、この表示をそのままHTMLタグで表示させる機能がHTMLエスケープです。

 

ボーダー(太文字)・フォント色赤のサイト上のテキスト表示
右クリックの使い方

HTMLエスケープ

 

 

[HTMLエスケープ]の挿入すると、サイト上でタグ表示になる
<span style="color:#C50000"><strong>右クリックの使い方</strong></span>

  • 右アングルブラケット・・・>
  • 左アングルブラケット・・・<
  • ダブルクォーテーション・・"

 

シリウスの管理画面で実際に操作してみると、<> または " などが、どのような記号に対応しているかがが解りますので、一度確認して下さい。

 

ホームページ上でHTMLの解説などする場合は必須の機能です。(私の場合はすごく便利な機能で使いまくっています!)

 

動画-11 タグチェック

サイトが表示崩れをおこした場合、解決策のヒントになります。HTMLタグのルールとして、「開始タグと終了タグの数が同じでなくてはならない」というルールがあります。

 

例えばシリウスで頻繁に使用する<div></div>は2っで1セットであり、どちらかが欠けている場合、または多い場合には表示崩れがおこります。

 

その他、[段落]<p></p>、[文節]<span></span>、[ボールド]<b></b>なども1セットで成り立っています。それぞれ開始タグ終了タグと呼びます。

 

なので、開始タグと終了タグを足した数は偶数になるわけです。タグチェックは、この事を利用して表示崩れをおこした場合、タグが足りないのか、多いのかを教えてくれます。

 

切り取り、コピー、貼り付けなどの操作をしている場合に、表示崩れが発生する確率が高いので、慣れないうちは慎重に作業して下さい。

※ 例外
<br />・・・改行タグ(単独で使用する代表的なタグ)