sango

sangoで箇条書き、番号付きリストでデザインが崩れた場合解決方法(wordpressカスタマイズ)

[say name="hide" img="https://code369.net/wp-content/uploads/2020/04/スクリーンショット-2020-04-19-4.45.17.png"]今回は人気ワードプレステーマ「sango」で箇条書き、番号付きリストでデザインが崩れる場合の対処法をご紹介します。[/say]

みなさん、下記の画像のような問題起こしてませんかね?

実はサンゴのチェックリストはチェックのみでしか使用できなく、例えばシェプロンマークのリストで番号付きリストとかはできない仕組みになっています。

上記の画像で言えばこんなソースコードになっています。

[codebox title="HTML(上)"]


[list class="li-check li-mainbdr main-c-before"]
<ul>
	<li>あああ</li>
	<li>あああ</li>


</ul>


[/list]

[/codebox]

[codebox title="HTML(下)"]

[list class="li-check li-mainbdr main-c-before"]
<ol>
	<li>あああ</li>
	<li>あああ</li>


</ol>


[/list]

[/codebox]

上記の例はolタグで囲むか、ulタグで囲むかの違いです。(ulはチェックマークやシェプロン、olは番号付きリストで使います)

つまり、最初から番号付きの箇条書きはそれしかできなく、チェックマークの箇条書きで番号付きの箇条書きができないのがsangoのデメリットとも言えます。

 プログラムに詳しい人であれば変更が可能なのだと思いますが、プログラミングができない人はここら辺を間違うのであまり余計なことをしないほうが良いかと思います。

 もし自由にカスタマイズしてやりたいのであれば、検索でコピペで使える箇条書きのソースコードを引っ張ってきて貼り付けるしかありません。

sangoのデザインはサンゴで使う

また、当たり前のことになりますが他のwordpressテーマからsangoに移行した際も、過去の箇条書きのソースコードで書かれているので、デザインが思いっきり崩れてるはずです。

 このブログでもアフィンガーからサンゴに変更した際に、こんな傷跡が残ってます。

正直、ワードプレステーマはあまり頻繁に変更しないほうが良いわけです。ただ、AMP搭載のものもあったりするので人によっては高速化が簡単なアフィンガとかDiverとかも今後SEO面で人気が出てくるかもしれません。(2021年以降、グーグルは高速表示はランキングに影響すると言ってますし)

 幸い、サンゴは高速化ができ、グーグルのPageSpeed Insightsで数字が悪くても、プラグインなしで画像遅延機能とかついてるので、デザインを重視して高速化を進めたい人はこちらをおすすめします。

 そんなわけで、サンゴの箇条書きのデザイン崩れから話が少し外れましたが、長くサンゴを使いたい人は公式サイトでのソースコードをよく確認して使うようにしましょう。

最後に余談ですが、アフィリエイトや集客テクニックを下記でまとめているので、気になる方はこちらもどうぞ。ツイッターでもノウハウ流しています。

[memo title="MEMO"]おすすめの副業。wordpressブログの始め方から初心者がアフィリエイトで稼ぐ方法までを徹底解説[/memo]

この記事はこんな人に役立ちます

[list class="li-check li-mainbdr main-c-before"]

  • 箇条書きやチェックリストを作成する際にレイアウトが崩れた人
  • チェックマークや番号が記事枠の外に出ている人
  • sangoの箇条書きがうまく表示されない人

[/list]

hide

ブログで所得を増やす方法をメインにwebデザイン、マーケティング、SEO、アフィリエイトノウハウなど個人・法人の集客・利益アップに役立つ情報を書いています。その他趣味であるアルペンスキーに関する最新情報も書いてます。SNSではジャンルを問わない内容で気になることを投稿中。

-sango
-

Copyright© code369.net , 2020 All Rights Reserved Powered by AFFINGER5.