SWELLのブログカードでテキストリンクを太字にする方法を解説

SWELLのブログカードでテキストリンクを太字にする方法を解説
URLをコピーする
URLをコピーしました!
悩んでいる男性

SWELLのブログカードでテキストリンクを選んだ場合、どうやったら太字にできるの?

今回はこんな悩みにお答えします。

この記事の内容
  • SWELLのブログカードでテキストリンクを太字にする方法
  • 太字とノーマル両方を使い分ける方法
この記事を書いた人
しんでぃ
  • 本職は最高マーケティング責任者
  • SWELLレビュー記事は公式サイト掲載
  • ブログ開設5ヶ月目で5桁収益
  • 現在8ヶ月で最高3.6万

Twitter : (@shinshindy33)

SWELLアップデートのver. 2.4.0で追加された、ブログカードのテキストリンク化機能

ユーザーからも多くの要望があった機能で、実際に使ってみてもとても便利です。

しかし、1点だけ不満が…。

これまで使っていた記事のタイトルの内部リンクを、このブログカードに置き換えてみたのですが、ブロックエディターでは太字にできないのです。

そこでこの記事では、SWELLのブログカードでテキストリンクを太字にする方法について解説していきます。

太字とノーマル両方を使い分ける方法についても解説するので、ぜひ最後までご覧ください。

ちなみにこの方法はスマホでは反映されませんでしたのでご了承ください。

  • 進化し続けるWordPressテーマ
  • 圧倒的な使いやすさでブログが楽しくなる
目次

SWELLのブログカードでテキストリンクを太字にする方法

SWELLのブログカードでテキストリンクを太字にする方法を紹介します。

方法は3パターンあります。

  • サイト全体でブログカードのテキストリンクを太字にする
  • 記事全体でブログカードのテキストリンクを太字にする
  • 一部のブログカードのテキストリンクのみ太くする

順番に解説していきます。

※コード修正は自己責任でお願いします。

サイト全体でブログカードのテキストリンクを太字にする

サイト全体でブログカードのテキストリンクを太字にする場合は、サイト全体のCSSを編集します。

WordPressの管理画面の「外観」>「カスタマイザー」>「追加CSS」に、以下のCSSコードを貼り付けします。

/*ブログカードのテキストリンクの太さ*/
.swell-block-postLink {
    font-weight: bold;
}
/*ここまで*/

これで、以下のようにサイト内で使用するブログカードのテキストリンクはすべて太字になります。

記事全体でブログカードのテキストリンクを太字にする

サイト全体ではなく記事ごとにブログカードのテキストリンクを太字にするには、投稿編集ページ一番下の「カスタムCSS & JS」にCSSを記入すると、この記事内にあるすべてのブログカードに反映されます。

カスタムCSS & JS

この「カスタムCSS & JS」に先ほどのCSSコードを入力します。

/*ブログカードのテキストリンクの太さ*/
.swell-block-postLink {
    font-weight: bold;
}
/*ここまで*/

一部のブログカードのテキストリンクのみ太くする

サイト全体や記事ごとにテキストリンクを太くするほどではないけど、一部のテキストリンクだけ太くしたいという場合もあるでしょう。

その場合は追加 CSS クラスを使います。

ブログカードのブロックを選択した状態で、記事編集画面右側のメニューの一番下にある、「高度な設定」をクリックし、「追加CSSクラス」にクラス名を記入します。

太くする場合は”bold”にしたとします。

追加CSSクラスにboldと入力

次に、先ほどの「カスタムCSS & JS」に、以下のように記入します。

.bold {
    font-weight: bold;
}

各ブログカードごとに、「追加CSSクラス」に記入するクラス名と、上記のコードのbold部分を変更することで、CSSの適用するブロックを変えることもできます。

カスタムCSS & JSと追加CSSクラスのクラス名を一致させる

これで、追加CSSクラスを指定したブロックのテキストリンクのみ太字になります。

太字とノーマル両方を使い分ける方法

「サイト内すべて」あるいは「記事内すべて」のブログカードのテキストリンクを太字にした場合、一部のブログカードのみ普通の太さに戻したい場合もあるでしょう。

その場合は、「一部のブログカードのテキストリンクのみ太くする」と同じ方法を使います。

ブログカードのブロックを選択した状態で、記事編集画面右側のメニューの一番下にある、「高度な設定」をクリックし、「追加CSSクラス」にクラス名を記入します。

クラス名は英単語なら何でもいいですが、例えばここでは”normal”にしたとします。

追加CSSクラスにクラス名を入力

次に、記事ごとの「カスタムCSS & JS」に、以下のように記入します。

.normal {
    font-weight: normal;
}

これで、サイト全体でブログカードのテキストリンクを太字に指定しているにも関わらず、以下のテキストリンクは太さが普通になっています。

まとめ

今回は、SWELLで新しく追加されたブログカードのテキストリンクを太字にする方法を解説しました。

テキストリンクを太字にすることが多い方は、全体もしくは記事ごとの指定を、特定のブログカードのみ太字にしたい場合は、ブロックごとの指定がおススメです。

こだわる方はぜひチャレンジしてみてください。

今回は以上です。

\ユーザー満足度が驚異的!/

>>SWELL公式サイトからSWELLをダウンロードする

その他のSWELLカスタマイズ

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる