※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSのフリースペースやモジュールで簡単にHTMLタグを挿入する方法

キャプチャ画像

フリースペースモジュールを使う場合、”改行の処理”をどうするかで悩んだことはないですか?

 

簡単に言うと<p><br />自分で加筆するかSIRIUSに自動補完してもらうかの選択です。

(後ほど詳しく説明します)

 

実はフリースペースやモジュールに記述する内容によっては”自動補完”を選んでしまうとレイアウトが崩れてしまうケースがたまに出てきます。

一例としては、プログラムコードや広告コードと通常のテキスト文が混在するような場合です。

 

その際は改行処理を”しない”に設定する必要があるのですが、そうなるとすべてHTMLタグを使って記述しなければなりません。

 

HTMLに詳しい方なら問題ないですが、HTMLなんかよくわからんという方にはこれはかなり敷居が高い処理なんじゃないでしょうか。

 

でも大丈夫。

 

これからご紹介するやり方なら、HTML初心者でも割と簡単にHTMLタグ付きで書き込むことができるようになります。


改行処理の選択

フリースペースやモジュールの”改行処理”に関する設定は以下の部分になります。

 

フリースペース

キャプチャ画像

 

モジュール

キャプチャ画像

 

たとえば次のようなモジュールがあったとします。

 

モジュール名→【モジュールテスト

記述内容:(※モジュール上ですでにいくつかの装飾を設定済みです)

<span style="color:#FF4E4E">これはサンプル文です。これはサンプル文です。これはサンプル文です。これはサンプル文です。</span>

 

<strong>これはサンプル文です。</strong>
<span class="mky_yellow_a">画像を追加します。</span>

 

<img src="<% pageDepth %>img/apple-touch-icon.png" alt="キャプチャ画像" />

 

以上です。

 

これを「改行タグを挿入する」つまりSIRIUSによるタグの自動補完を選択した場合、

 

キャプチャ画像

 

実際の表示がこちら↓で、ちゃんと記述通りのレイアウトで表示されます。

 

キャプチャ画像

 

これはSIRIUSが改行(改段落)タグを自動補完してくれたので、見た目とほぼ同じレイアウトで表示されたということです。

 

実際ソースを見てみると、本来は書いてなかったHTMLタグがちゃんと挿入されてるのがわかります。

(※赤下線が自動補完されたHTMLタグです)

 

キャプチャ画像

 

今度は「改行タグを挿入しない」にして表示させてみます。

 

すると先ほどとは違って崩れたレイアウトで表示されてしまいました。

 

キャプチャ画像

 

これは必要なHTMLタグが自動では補完されなかったため、ブラウザが一つの文として認識してしまったからなんですね。

 

これを先ほどと同じような表示にするには自身でHTMLタグを付けていく必要があります。

 

でもHTMLをよく知らない方にHTMLタグを付けろといってもしょせん無理な話です。

 

でも大丈夫。次の手順でやれば簡単にHTMLタグを付けることができます。

あくまで「改行タグを挿入する」にしてしまうとレアウトが崩れてしまうケースを想定してるものであって、今回のサンプルがそれに該当するわけではありません。

HTMLタグ自動補完のやり方

①まずはモジュールに記述したい内容を、モジュール本体ではなくSIRIUSの記事編集画面の適当な位置に書き込みます。

(記事1でも記事2でもどこでもいいです)

 

キャプチャ画像

 

②普通に記事を書くように改行(※改段落を含む)や文字装飾を施していきます。

 

キャプチャ画像

 

③プレビューでレイアウトやデザインを確認しながら調整していきます。

(通常のブラウザでもSIRIUS内蔵プレビューでもどちらでもいいです)

 

④満足いく仕上がりになったら、もう一度プレビューをかけます。

ただし最終プレビュー時は、SIRIUS内蔵プレビューではなくPC搭載のブラウザを利用した通常プレビューを選択します。

 

⑤プレビューしたブラウザ上で右クリック→ソースを表示ソース画面を表示します。

 

⑥下のようにタグが自動補完されて表示されてるので、該当箇所を選択してコピーします。

(※赤線部分が自動補完されたタグです)

 

キャプチャ画像

 

⑦コピーしたものをモジュールに貼り付けます。

 

これでスペルミスのないHTMLタグ付きモジュールが”一応”完成します。

 

キャプチャ画像

注意点

ただし、注意点がいくつかあります。

 

画像パスは修正が必要

画像が含まれていた場合、画像パスは修正が必要になります。

(先ほどの画像の赤線部分)

 

”パス”とは?

パス(path)というのはサイト内のファイル(ページ)の場所を表示する文字列で、絶対パス相対パスの2種類があります。

 

絶対パスというのはhttp(s)://から始まるURLで表し、主に他のサイトへのリンク等に使われます。

 

こんな感じですね。

https://dramatic-sirius.com/cat_sirius/whats_sirius.html

 

これに対し相対パスというのは、ファイル(ページ)が置かれている場所を基準に、対象となるファイル(ページ)の場所を相対的に指定するやり方で、主に同サイト内のリンクに使われます。

 

先ほどの絶対パスを相対パスにした場合、SIRIUSでは相対パス用に<% pageDepth %>という独自タグが自動的に挿入されます。

 

その結果、

<% pageDepth %>cat_sirius/whats_sirius.htmlとか

<% pageDepth %>whats_sirius.html

となります。

(基準となるページとの位置関係で書き方も変わってきます)

 

相対パスのメリットとしては、文字数が少なくなるのでソースコードが見やすくなります。

 

またサイトのドメインが変わった場合、絶対パスなら旧ドメイン部分を全部新ドメインに修正しなくちゃなりませんが、相対パスなら(ファイルの階層等が不変ならば)修正の必要がないのも大きなメリットです。

 

<% pageDepth %>の部分が自動的に新ドメインに自動変換してくれるからです。

 

というのもソース上では画像パスが下のように変換されます。

 

<p><img src="./img/apple-touch-icon.png" alt="キャプチャ画像" /></p>

 

しかしこのままだと画像が正常に表示されない場合があります。

 

画像パスの赤文字の「./」のところをSIRIUSの独自タグ<% pageDepth %>で置き換える必要があります。

 

つまり

<p><img src="./img/apple-touch-icon.png" alt="キャプチャ画像" /></p>

<p><img src="<% pageDepth %>img/apple-touch-icon.png" alt="キャプチャ画像" /></p>

と変える必要があります。

 

よって画像パスを修正した完成形がこちら↓になります。

 

キャプチャ画像

 

コード類はタグ必要なし

プログラムコードや広告コードのたぐいが含まれる場合は、必ず「改行タグを挿入しない」を選択します。

 

たとえばこちら↓のような場合ですね。

 

キャプチャ画像

「改行タグを挿入する」を選択してしまうと、コードが正常に作動しません。

 

さらにプログラムコードや広告コードの場合は、上の画像のように何らかのHTMLタグで補完する必要はありません

 

そのままコピー&ペーストして終わりです。

 

ただし途中に普通のテキスト文が存在する場合は、先ほどのやり方で改行(改段落)等のタグを補完してあげる必要があります。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像