1. 当テーマは基本的に [ 新規サイト ] でご利用ください
当テーマは基本的に 新規サイト でご利用ください。一番の理由は次です。
検索順位が良いサイトは HTML 構造を変更しない方が良いため
現時点で検索順位が良いサイトは HTML 構造を変更しない方が良いです。テーマを変更すると HTML 構造や SEO 重要タグの内容が変わります。当テーマに限らず、テーマの変更はお勧めしません。
また、テーマ毎に搭載されている機能は違いますので、当テーマに限らず、テーマを変更すると使えない機能が必ず出てきます。予めご理解された上で当テーマをご利用ください。
2. 当テーマに変更すると起こる事と修正方法
【 1 】ウィジェットの配置が一旦変わります
前テーマのサイドバーのウィジェットが メインカラム上：デザインなし の場所に移動しています。そこにあるウィジェットをサイドバーに移動してください。
【 2 】段落・改行タグの仕様が違うため記事が詰まる場合があります
当テーマは PC とスマホで改行の変なズレを無くして記事を読みやすくする ために次の仕様にしています。
- 段落と段落の間に余白が空きません ( 段落タグ <p> ～ </p> )
逆にスマホ等 ( 画面横幅 799 px 以下 )では段落にすることで行間を空けずに改行ができます - スマホ等では 改行タグが反映せず改行しません ( <br /> )
- 行間を空ける ときはタグの入力が必要です。次を参照ください → 改行と段落の入力
そのために既存サイトを当テーマに変更すると記事が詰まり読み辛くなる場合があります。 基本的には当テーマに沿った記述で記事の修正が必要ですが、大変な作業ですので、CSS を追加して一括で修正する方法をお知らせします。
記事の段落間の余白を設定する
.article-body p{margin-bottom:20px;}
- 20 px が下余白です。お好みで数値を変更してください
スマホで改行タグを反映させる
- 2017/08/22 更新
#container br{display:block;}
→ CSS 追加方法
【 3 】h2 ・ h3 ・ ul ・ ol タグのデザインが反映しません
当テーマは h2 ・ h3 ・ ul ・ ol タグ で 複数デザイン をご用意しているため 記述が違います。前テーマで例えば <h2> ～ </h2> と記述しているときは、デザインは反映せずに、ただの太字で表示されます。
| 当テーマの記述例 | <h2 class="h2-01-main"> テキスト </h2> |
|---|---|
| 表示される記事装飾パーツ | タイトル |
基本的には当テーマに沿った記述で記事の修正が必要ですが、大変な作業ですので、デザインを反映させる CSS を追加して一括で修正する方法をお知らせします。
下記の CSS を追加しても当テーマの記事装飾パーツ h2・h3・ul・ol タグは利用可能です
- 2019/07/10 更新
/*h2*/
.the-content>h2:not([class*="h2-"]):not([class*="h3-"]):not(.copy),.textwidget>h2:not([class*="h2-"]):not([class*="h3-"]):not(.copy){margin:5px -5px;padding:10px 15px;border:solid 1px #d1d1d1;border-bottom:solid 3px #a7a7a7;background-image:linear-gradient(to bottom,rgba(255,255,255,.2) 20%,rgba(85,85,85,.1) 100%);font-size:20px;}@media screen and (max-width:799px){.the-content>h2:not([class*="h2-"]):not([class*="h3-"]):not(.copy),.textwidget>h2:not([class*="h2-"]):not([class*="h3-"]):not(.copy){font-size:18px;}}
/*h3*/
.the-content>h3:not([class*="h2-"]):not([class*="h3-"]):not(.copy),.textwidget>h3:not([class*="h2-"]):not([class*="h3-"]):not(.copy){margin:5px -5px;padding:7px 15px;border:solid 1px #d1d1d1;background-image:linear-gradient(to bottom,rgba(255,255,255,.2) 20%,rgba(85,85,85,.1) 100%);font-size:16px;}
/*ul*/
.the-content>ul:not([class*="ul-0"]):not(.sm-post):not(.sm-page):not(.sm-tax):not([class*="wp-block-"]),.textwidget>ul:not([class*="ul-0"]):not(.sm-post):not(.sm-page):not(.sm-tax){margin:5px;}
.the-content>ul:not([class*="ul-0"]):not(.sm-post):not(.sm-page):not(.sm-tax):not([class*="wp-block-"]):not(.toc_list)>li,.textwidget>ul:not([class*="ul-0"]):not(.sm-post):not(.sm-page):not(.sm-tax)>li{margin:4px 0;padding-left:.5em;border-left:solid 3px #a7a7a7;border-bottom:dotted 1px #c0c0c0;}
/*ol*/
.the-content>ol:not([class*="wp-block-"]),.textwidget>ol{margin:5px;}
.the-content>ol:not([class*="ol-0"]):not([class*="wp-block-"])>li,.textwidget>ol:not([class*="ol-0"])>li{position:relative;padding-left:1.875em;}
.the-content>ol:not([class*="ol-0"]):not([class*="wp-block-"])>li:before,.textwidget>ol:not([class*="ol-0"])>li:before{position:absolute;top:.063em;left:0;content:counter(li);counter-increment:li;width:1.667em;height:1.667em;border-radius:50%;font-weight:normal;text-align:center;font-size:.9em;background:#a7a7a7;color:#fff;}
→ CSS 追加方法