NOVA

NOVAで追加されたクラス(リンクカードなど)と使い方

リンクカードや画像キャプションなどNOVAで追加された便利なクラスとそれらをクラス設定から使用する方法を解説します。


クラス設定から使用する方法

追加クラスはコードの手打ちやコピペする以外に「クラス設定」に登録して使用できます。こちらの方が簡単なのでぜひ利用しましょう。

 

クラス設定とは?

スタイルシートに追加した装飾用の自作クラスなどを登録して、装飾ボタンの「CLボタン」から簡単に呼び出す機能です。

 

CLボタン

 

クラス設定に追加クラスを登録する

「CLボタン」から呼び出すには「クラス設定」に各クラスの登録が必要です。NOVAの追加クラスをファイルにまとめましたので、ダウンロードして「クラス設定」からインポートすることで一括で登録できます。

 

scdファイルをダウンロード

まずはクラス設定用ファイルのscdファイルをダウンロードします。

 

scdファイルのインポート

次に「設定 > クラスの設定」から「クラス設定」を開きます。

 

設定 → クラスの設定

 

問題ないと思いますが、すでにクラス設定をしている場合は念のため「エクスポート」からファイルをバックアップしましょう。

 

クラス設定のエクスポート

 

「インポート」をクリックしてダウンロードした「nova-class.scd」を選択します。リストが表示されたら成功です。

 

クラス設定のインポート

 

使用方法については以下に記載してある追加クラス一覧の「CLボタンから使う」を参考にしてください。

 

注意点としては簡単なテキストを装飾する場合などのみ「テキストを選択してからCLボタンからクラスを選択」であること。ほとんどの場合は「CLボタンからクラスを選択してから画像やテキストを記入」であることです。

赤太字

テキストをこのように赤い太文字にできます。

 

<span class="text-red">テキスト</span>

 

CLボタンから使う

  1. テキストを選択 → 「CLボタン」から「text-red」を選択

 

小見出し

これは小見出しです

見出し(H1~H6)を使わないで小さなタイトルが必要なときに使用します。

 

<p class="subh">テキスト</p>

 

CLボタンから使う

  1. テキストを選択 → 「CLボタン」から「subh」を選択

 

リンクテキスト

外部サイトへのリンクも想定したタイプです。

 

 

<div class="linktext">
<a href="<% pageDepth %>">記事タイトル<span class="linksite"><% siteTitle %></span></a>
</div>

 

外部サイトの場合は<% siteTitle %>を削除してサイト名を記入してください。

 

CLボタンから使う

  1. 「CLボタン」から「linktext」を選択
  2. リンクを作成(外部サイトの場合はリンク作成時に「テキスト」と「リンク先URL」を入力)
  3. サイト名を入れたい場合は</a>の前を選択して「CLボタン」から「linksite」を選択
  4. 外部サイトの場合は<%siteTitle%>を削除してサイト名を記入

 

リンクカード

サムネイルのある関連記事リンクを想定したカードタイプです。

 

 

<div class="linkcard">
<a href="<% pageDepth %>"><span class="thumb"><img src="<% pageDepth %>img/画像.png" alt="" /></span><span>記事タイトル<span class="linksite"><% siteTitle %></span></span></a>
</div>

 

CLボタンから使う

  1. 「CLボタン」から「linkcard」を選択
  2. 「リンク」の部分を削除してそこにリンクを作成
  3. 作成したリンクから「記事名</a>」をカットして「記事タイトル」にペーストして記事名の後の</a>を削除
  4. 「画像」にサムネイル画像を指定

 

PC・モバイルでのみ表示

特定のテキストや画像をPC、モバイルどちらかでのみ表示したいときに使用します。

 

以下のテキストはモバイルでは表示されず、PCでのみ表示されます。

この文章はPCでのみ表示されます

 

以下のテキストはモバイルでは表示されず、スマホ・タブレットでのみ表示されます。

この文章はモバイルでのみ表示されます

 

<div class="display-pc">
PCのみ
</div>

<div class="display-sp">
モバイルのみ
</div>

 

CLボタンから使う

  1. 「CLボタン」から「pc」か「sp」を選択
  2. 記入

 

画像キャプション

画像にキャプション(説明文)を付けたい場合に使用します。

 

画像キャプション

テキスト

 

<div class="caption">
<img src="<% pageDepth %>img/画像.png" alt="" />
<div class="text">テキスト</div>
</div>

 

CLボタンから使う

  1. 「CLボタン」から「caption」を選択
  2. 「画像」に画像を挿入
  3. 「テキスト」にテキストを記入

 

画像上テキスト

画像にテキストを表示します。

 

画像上テキスト「NOVA」の特徴とは?

 

<div class="imgtext">
<img src="<% pageDepth %>img/画像.png" alt="" /><span>テキスト</span>
</div>

 

CLボタンから使う

  1. 「CLボタン」から「imgtext」を選択
  2. 「画像」に画像を挿入
  3. 「テキスト」にテキストを記入

 

ソースコート表示

コードを表示するときに使用します。

 

ここにコードが表示される

 

<div class="code"><noreturn><pre>
コード
</pre></noreturn></div>

 

CLボタンから使う

  1. 「CLボタン」から「code」を選択
  2. 記入

 

複数カラム表示

横並び2列、3列、4列で表示したいときに使います。モバイル表示では横並びが解除され縦並びになります。

 

2カラム

カラム1
カラム1

カラム2
カラム2

 

<div class="colwrap2 resp">
<div class="col2">
カラム1
</div>
<div class="col2">
カラム2
</div>
</div>

 

3カラム

カラム1
カラム1

カラム2
カラム2

カラム3
カラム3

 

<div class="colwrap3 resp">
<div class="col3">
カラム1
</div>
<div class="col3">
カラム2
</div>
<div class="col3">
カラム3
</div>
</div>

 

4カラム

カラム1
カラム1

カラム2
カラム2

カラム3
カラム3

カラム4
カラム4

 

<div class="colwrap4 resp">
<div class="col4">
カラム1
</div>
<div class="col4">
カラム2
</div>
<div class="col4">
カラム3
</div>
<div class="col4">
カラム4
</div>
</div>

 

CLボタンから使う

  1. 「CLボタン」から「colwrap○ resp」を選択
  2. 「カラム○」の部分に記入

 

「resp」を削除すればモバイル表示でも横並びのままになります。

<div class="colwrap2 resp"> → <div class="colwrap2">

 

吹き出し名前

吹き出しに名前を追加します。

 

名前

 

ここにテキストが表示されます。


 

<!-- ★吹き出しここから★ -->
<div class="balloon-left">
<div class="bln-img img-circle float-l"><img src="<% pageDepth %>img/user1.png" align="left" /><div class="bln-name">名前</div></div>
<div class="bln balloon1">
<p class="img-l">&nbsp;</p>
<div class="b_body rnd1">
ここにテキストが表示されます。
</div> 
</div>
</div><br clear="all">
<!-- ★吹き出しここまで★ -->

 

CLボタンから使う

  1. 吹き出しを作成
  2. imgタグ(<img src="画像" align="方向" />)の後ろを選択して「CLボタン」から「bln-name」を選択
  3. 名前を記入

 

ダブルレクタングル

Googleアドセンスのレクタングル(大)を左右横2列で表示するクラスです。レスポンシブに対応しており、スマホ表示では右側の広告が非表示になります。

 

 

ダブルレクタングルの設置方法

「CLボタン」から「double-rectangle」を選択します。<div class="double-rectangle">~</div>の間に「レイアウト枠」を作成します。

 

<div class="double-rectangle">
ここにレイアウト枠
</div>

 

 

レイアウト枠の中に「右クリック→改行無視エリア」で<noReturn>~</noReturn>を作成してから間に広告コードを貼り付けましょう。広告サイズは自動サイズ(レスポンシブ)を選択します。

 

 

<noReturn>
ここにアドセンスのレスポンシブ広告
</noReturn>
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:50%;">
<!-- ★▽右列ここから▽★ -->
<noReturn>
ここにアドセンスのレスポンシブ広告
</noReturn>

 

最終コートは以下になります。

 

<div class="double-rectangle">
<div class="layout_box" style="border-spacing:10px 0;">
<div class="layout_l" style="width:50%;">
<!-- ★▽左列ここから▽★ -->
<noReturn>
ここにアドセンスのレスポンシブ広告
</noReturn>
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:50%;">
<!-- ★▽右列ここから▽★ -->
<noReturn>
ここにアドセンスのレスポンシブ広告
</noReturn>
<!-- ★△右列ここまで△★ -->
</div>
</div>
</div>

 

2カラム画像説明

「2カラム画像説明」は2カラムの左側に画像、右側に説明を表示するレイアウトです。

 

「レイアウト枠」との違いは幅いっぱいを使える、説明が上下中央に表示される、画像にアウトラインが表示されるなどです。また「2カラム画像説明」はスマホ表示では縦2列で表示されます。

 

「レイアウト枠」の場合

ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。

 

「2カラム画像説明」の場合

ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。

 

CLボタンから使う

  1. 「CLボタン」から「imgdesc」を選択
  2. <div class="imgdesc">~</div>の間に「レイアウト枠」を作成
  3. 左列に画像、右側にテキストを配置

 

<div class="imgdesc">
<div class="layout_box responsive" style="border-spacing:10px 0;">
<div class="layout_l" style="width:50%;">
<!-- ★▽左列ここから▽★ -->
<img src="<% pageDepth %>img/user1.png" style="width:100%;" alt="" />
<!-- ★△左列ここまで△★ -->
</div>
<div class="layout_r" style="width:50%;">
<!-- ★▽右列ここから▽★ -->
ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。ここにテキストなどを入力します。
<!-- ★△右列ここまで△★ -->
</div>
</div>
</div>