【SANGO】テキスト装飾をカスタマイズ。太字にしやすい様にいじってみた

SANGO カスタマイズ 太字

こんにちは。Ken(Ken_kentabi)です。

SANGOに変えてから自分のブログなのに読むのが楽しくなりました(笑)

まだまだカスタマイズできることが多いと思うので、少しずつカスタマイズして使いやすくしていきます。

さて、そんなSANGOのカスタマイズですが、ひとつ気になることがあったのでやってみたことがあります。

SANGOには色々なショートコードがあり、それらを使うことで簡単に文字の装飾などが出来るのですが、頻繁に使うはずの文字を太字にするショートコードがありません。

カスタマイズガイドを見てみると、どうやらエディタについているBのボタンを使うようです。

しかしこのタグを見てみると、どうやらstrongタグで強調しているみたいなんですよね。

詳しくないので本当かどうかはわからないのですが、strongタグをたくさん使うのはSEO的に良くないというのを聞いたことがあります。

そこで、Bボタンで太字にしなくても良いよう(strongタグを使わなくても良いよう)にカスタマイズしてみることにしました。

簡単に出来るので、その方法を紹介しますね。

strongタグを使わずに太字にする方法

1. CSSにコードを追加する

まずは外観テーマの編集より、style.cssのページに行きます。

注意
cssを直接編集する場合は、子テーマを編集するようにしましょう

SANGOの子テーマのstyle.cssには/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/という記述があるので、その下に下記のようにコードを追加してください。

HTML
/*太字用*/
.bold {
font-weight: bold;
}

2. AddQuicktagに登録する

次に、AddQuicktagに以下のタグを登録しておきます。

HTML
<span class="bold">文字</span>

登録名は何でも良いですが、太字、またはBoldとしておくとわかりやすいでしょう。

これだけです!後は使いたい文字の部分でそのボタンを押せばOKです。

応用

ちなみに僕は文字を太くするだけでなく、最初から赤文字の太字や、黄マーカーの文字を太くする登録もしてあります。

個人的な感覚ですが、SANGOの文字の感じでそのまま赤くするだけ、または黄マーカーをつけるだけだと、どうしても文字が薄いような気がするんですよね。

赤文字
赤文字太字

黄マーカー
黄マーカー太字

上のほうだとなんとなく薄く見えませんか?

赤文字や黄マーカーだけなら別々にAddQuciktagに登録がありますが、いちいち二つ押すのは面倒ですよね。

そこで、それらを最初からひとつにまとめてあるボタンもAddQuicktagで作っておくことにしました。

方法は簡単です。元々あるタグの中に、半角スペースとboldを追加するだけです。

HTML
変更前(黄マーカーの場合)
<span class="keiko_yellow">文字</span>
変更後(黄マーカーの場合)
<span class="keiko_yellow bold">文字</span>

変更後のタグをそのままAddQuicktagに登録しておけば、そのボタンを一回押すだけで黄マーカー+太字にすることができます。

もちろん赤文字+太字といった具合に、他と組み合わせることも可能です。

もし良かったら試してみてください。

終わりに

少しでもブログ執筆を快適かつ高速にするためにも、色々な工夫をしたいところです。

まだまだSANGOを使いこなせていないので、もっと良い方法を模索すべく日々精進します。

また何かおすすめできそうなカスタマイズがあったら紹介しますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です