賢威8で使える賢威7の装飾タグと使えない装飾タグ(基本スタイル)

2018年8月に賢威8のβ版が公開されて、正式版の公開が待たれるところですが、すぐに賢威8に変えるには、少々手間もかかりそうです。
賢威に限ったことではないですが、ブログのテーマを変更する時は、そのテーマ専用のショートコードや装飾タグが使えなくなるので、新しいテーマに合わせて変更しなければなりません。
記事数が少なければ大した事もないのですが、200記事300記事となってくると、それも大変ですよね。

今回の、賢威8の場合は、賢威7からのバージョンアップですので、装飾タグなどは、そんなに変わることは無いと思うのですが、実際に賢威8をインストールしてみると、賢威7で使っていた装飾タグが使えないものもありました。

今回は、賢威7の装飾タグが賢威8で使えるかどうか。ひとつひとつ確認してみようと思います。

◎:そのまま使える ○:若干の違いはあるが使える
△:画像の位置とか文字揃えが大きく違う  ☓:引き継げない

見出し (○)

コード

<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>

【賢威7での表示】

【賢威8での表示】

若干の違いがありますが、そのままでも大丈夫かな~といったところでしょうか。

最新情報

最新情報(テキストのみ) (◎)

コード

<div class="news">
<article class="news-item">
<h3 class="news-title"><a href="#">タイトルがはいりますタイトルがはいります</a></h3>
<div class="news-date"><time datetime="2015-12-12">2015年12月12日</time></div>
<div class="news-cat">
<span class="cat cat001">ニュース</span><span class="cat cat002">商品情報</span>
</div>
<p class="news-cont">サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。</p>
<p class="link-next"><a href="#">続きを読む</a></p>
</article>
</div>

【賢威7での表示】

【賢威8での表示】

かえってスマートになった感じです。

最新情報(サムネイル付) (○)

コード

<div class="news">
<article class="news-item">
<h3 class="news-title"><a href="#">タイトルがはいりますタイトルがはいります</a></h3>
<div class="news-thumb">
<a href="#"><img src="./images/sample07.jpg" alt="猫5" width="150" height="150"></a>
</div>
<div class="news-date"><time datetime="2015-12-12">2015年12月12日</time></div>
<div class="news-cat">
<span class="cat cat001">ニュース</span><span class="cat cat002">商品情報</span>
</div>
<p class="news-cont">サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。サイトをリニューアルしました。</p>
<p class="link-next"><a href="#">続きを読む</a></p>
</article>
</div>

【賢威7での表示】

【賢威8での表示】

サムネイルの位置が上になってます。

文字の装飾

文字色 (◎)

コード

<p class="navy">文字色を紺色に変更することができます。</p>
<p class="aqua">文字色を水色に変更することができます。</p>
<p class="red">文字色を赤色に変更することができます。</p>
<p class="orange">文字色をオレンジ色に変更することができます。</p>

【賢威7での表示】

【賢威8での表示】
賢威8でも同様に表示されます。

マーカー (☓)

コード

<p>文字に<span class="box-orange">オレンジ色の背景色</span>をつけることができます。</p>
<p>文字に<span class="box-pink">ピンク色の背景色</span>をつけることができます。</p>

【賢威7での表示】

【賢威8での表示】

賢威7から賢威8に移行してソースを変更する場合

box-orange や box-pink を line-orange  line-pink に変更。

文字に<span class="line-orange">オレンジ色</span>の背景色をつけることができます。
文字に<span class="line-pink">ピンク色</span>の背景色をつけることができます。

インラインの装飾 (◎)

コード

<p>em要素: <em>強勢する(アクセントを付ける)箇所を表す</em></p>
<p>strong要素: <strong>強い重要性を表す</strong></p>
<p>small要素: <small>免責・警告・著作権などの注釈や細目を表す</small></p>
<p>s要素: <s>すでに正確ではなくなった内容を表す</s>テキストが入ります。</p>
<p>abbr要素: <abbr title="HyperText Markup Language">HTML</abbr>等の略語</p>

【賢威7での表示】

【賢威8での表示】

傍点 (◎)

コード

<p>テキスト上に<span class="dot">傍</span><span class="dot">点</span>を打ちます。</p>

【賢威7での表示】

【賢威8での表示】

注意書き (◎)

コード

<p class="note"><small>※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。</small></p>

【賢威7での表示】

【賢威8での表示】

整形済みテキスト (◎)

コード

<pre>
整形済みテキストです。コードなどを記述する場合は以下のようにcode要素でマークアップします。
<code>&lt;code&gt;コード&lt;/code&gt;</code>
</pre>

【賢威7での表示】

【賢威8での表示】

リストの装飾

リスト(ul要素) (◎)

コード

<ul>
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ul>

【賢威7での表示】

【賢威8での表示】

リスト(ol要素) (◎)

コード

<ol>
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ol>

【賢威7での表示】

【賢威8での表示】

横並びリスト  (◎)

コード

<ul class="inline">
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ul>

【賢威7での表示】

【賢威8での表示】

リストの先頭に表示するマーカー文字を非表示 (◎)

コード

<ul class="none">
<li>リストが入ります。</li>
<li>リストが入ります。</li>
</ul>

【賢威7での表示】

【賢威8での表示】

記述リスト(旧定義リスト) (◎)

コード

<dl>
<dt>dt要素</dt>
<dd>dd要素dd要素dd要素dd要素</dd>
</dl>

【賢威7での表示】

【賢威8での表示】

記述リストのデザインその1 (△)

コード

<dl class="dl-style01">
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。モバイルなどでは、横並びが解除されます。また
左よりも右の行数の方が少なくなるとデザインが崩れます。</dd>
<dt>記述リストのデザインその1</dt>
<dd>要素が横に並びます。</dd>
</dl>

【賢威7での表示】

【賢威8での表示】

記述リストのデザインその2 (X)

コード

<dl class="dl-style02">
<dt>記述リストのデザインその2</dt>
<dd>要素が縦に並びます。</dd>
</dl>

【賢威7での表示】

【賢威8での表示】

テーブルの装飾

標準のテーブル (◎)

コード

<table>
<thead>
<tr>
<th></th>
<th>項目名</th>
<th>項目名</th>
</tr>
</thead>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td>項目内容</td>
</tr>
</tbody>
</table>

【賢威7での表示】

【賢威8での表示】

比較用テーブル (△)

コード

<table class="table-comparison">
<thead>
<tr>
<th class="w25"></th>
<th class="w25">項目内容</th>
<th class="highlight w25"><span class="f12em">項目内容</span></th>
<th class="w25">項目内容</th>
</tr>
</thead>
<tfoot>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
<tr>
<th>項目名が入ります</th>
<td>項目内容</td>
<td class="highlight"><span>項目内容</span></td>
<td>項目内容</td>
</tr>
</tbody>
</table>

【賢威7での表示】

【賢威8での表示】

引用エリア

blockquote要素(◎)

コード

<blockquote>
<p>ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。</p>
<p class="link-ref"><cite>引用元: <a class="outbound" href="https://www.google.co.jp/" target="_blank">参照記事のタイトル</a></cite></p>
</blockquote>

【賢威7での表示】

【賢威8での表示】

q要素 (◎)

コード

<p>ここにテキストが入ります<q>文中に出てくる短文の引用部分への装飾です</q>ここにテキストが入ります</p>

【賢威7での表示】

【賢威8での表示】

以上、賢威7の装飾タグの基本スタイル編でした。
賢威7から賢威8に、そのまま移行するには、多少の変更が必要ですね。