JetThemeカスタマイズに使ったCSS【その2】

2024/04/26 投稿

2024/05/31 最終更新

その後また JetTheme にカスタマイズを加えました。そのメモ（主にCSS）も兼ねて。まだ細かい部分を少しいじっているので変わってしまうかもしれませんが、記事公開時点での内容となります。

ブログカード：あわせて読みたい

見出しのない基本のブログカードの表示サンプルはこちら。

基本のブログカードは、The other way round/Akiraさんが作られたものをベースに、after work lab/あトンさんが一部改良されたブックマークレットを使っており、CSSだけ自分でカスタマイズを加えています。

ブログカード作成ブックマークレットをアップデートしました（Akiraさん）

理想のブログカードでページスピードを上げる方法（あトンさん）

見出しのない基本のブログカードも残しておきたいので、HTML追記にひと手間かかります。同じブログカードをお使いであれば他ブログサービスでもコピペで導入できると思いますが、本体のCSSをどのようにカスタマイズしているかで、多少の位置/余白調整が必要になります。

見出し付き表示サンプル

HTMLビューでブログカードの <figure> ～ </figure> を <div class="awasete"> </div> で丸ごと囲みます。

<div class="awasete">
  <figure class="blogcard b-cite">
       <!-- ※中省略 -->
  </figure>
</div>

「あわせて読みたい＝見出し部分」のCSSは以下のとおり。

/* 見出し */
.awasete .blogcard::before {
   position: absolute;
   background-color: #ffffff;
   color: #044162;
   content: '\2605\0020あわせて読みたい';
   font-size: .9em;
   font-weight: bold;
   padding: 3px 10px;
   left: 1rem;
   top: -1.3rem; 
}

content の「￥」が「バックスラッシュ」で表示されていますが、入力は半角の￥マークです。「￥2605￥0020あわせて読みたい」と入力します。

デザイン違いとして、見出しをタブ形式・背景ダークにするとこんな感じ。

タブは top: -1.3rem; 部分で高さ調整。他、見出し文字の色・サイズ・padding も微調整していますが、タブの高さの分だけ上の段落との余白がなくなるので、ブログカード自体の上マージンもあわせて調整してください。（上サンプルは調整済み）

ブログカード：続きを読む

また、私の場合はブログカードを使うのは内部リンクなので、カード内右下のリンク先サイト部分を非表示にして「続きを読む」に変更。

記事タイトルが短い場合は余白が多めに感じますが、タイトルは最大2行なので、記事概要（スニペット）の2行と、続きを読むボタンが重ならないような位置に調整しました。

/*続きを読む*/
.awasete .blogcard-footer {
   display: none !important;
}
.awasete .blogcard::after {
   position: absolute;
   background-color: #044162;
   border-radius: 8px;
   color: #ffffff;
   content: '続きを読む\0020\27A1';
   font-size: .7em;
   font-weight: bold;
   padding: 2px 8px;
   right: 1rem;
   bottom: 1rem;
}

contentプロパティ

例えばテキストの前に星のマークを付けたい場合、CSSの擬似要素「content」に「ほし」の文字変換で「★」と入力しても、全角の星マークは「★」と文字化けしてしまいます。

勉強不足で私はしばらく悩んだのですが、ここには全角文字をそのままではなく、数値文字参照は16進数で入れてあげるようです。

例えば、★のユニコード16進数に「￥」を加えた4桁の数字＝￥2605、 content: '￥2605あわせて読みたい'; とすると、ようやく「★あわせて読みたい」と表示されます。続きを読むも同様です。半角の空白＝￥0020・右矢印＝￥27A1　を入力しています。

※説明のために￥（全角）を使用・実際は半角で入れます。

他の記号なども含めて、探しやすいサイトがあったのでご紹介しておきます。使えそうな記号類が多い箇所を選んでリンクしてありますのでご参考まで。

Unicode 2000-2FFF（ゆるゆるプログラミング＞ Unicode より）

アイコンフォントで飾りたい場合は Font Awesome などの導入をおすすめします。

参考リンクのバッジ

記事を書くときに参考にしたリンク先の紹介をする時に、先頭にバッジをつけるようにしました。CSSをちょっと書き換えればバッジの位置は後にもなりますし、応用次第でいろいろ使えると思います。

参考サイト/記事へのリンク

参考サイト/記事へのリンク。タイトルが長い時・モバイル時など横幅が狭いデバイスの時はどうなるのかの改行表示テスト。

<p class="sankou">参考サイト/記事へのリンク</p>

/* 参考リンク */
.sankou {
    font-size: 0.9rem;
    line-height: 1.5rem;
    text-indent: -3rem;  /* 字下げ */
    padding-left: 3rem;  /* 字下げ */
}
.sankou::before {
    content: "参考";
    margin-right: 1rem;
    padding: .2em .5em;
    background: #044162;
    color: #ffffff;
    border-radius: 10px;
    font-size:.75rem;
}

参考リンクが2件以上ある場合

こんな時は、div class="sankou2" で。

2行以上の時は、p class="sankou" だと行間が空きすぎて読みにくいので、div で囲って行間を調整することにしました。ただし、1番最後の参考リンクの下だけは通常 p と同じマージンを入れています。

DIVで囲む参考2サイト/記事へのリンク

DIVで囲む参考2サイト/記事へのリンク。タイトルが長い時・モバイル時など、横幅が狭いデバイスの時はどうなるのかの改行表示テスト。

<div class="sankou2">
  <p>DIVで囲む参考2サイト/記事へのリンク</p>
  <p>DIVで囲む参考2サイト/記事へのリンク</p>
  <p>DIVで囲む参考2サイト/記事へのリンク。タイトルが長い時・モバイル時など、横幅が狭いデバイスの時はどうなるのかの改行表示テスト。</p>
</div>

/* 参考複数 */
.sankou2 p {
    font-size: 0.9rem;
    line-height: 1.5rem;
    margin-bottom: .7rem!important;
    text-indent: -3rem;
    padding-left: 3rem;
}
.sankou2 p::before {
    content: "参考";
    margin-right: 1em;
    padding: .2em .5em;
    background: #044162;
    color: #ffffff;
    border-radius: 10px;
    font-size:.75rem;
}
.sankou2 p:last-child {
    margin-bottom: 2em!important; /* 最後の段落の下マージン */
}

字下げがうまく揃わない

text-indent: -3rem; /* 字下げ */ と padding-left: 3rem; /* 字下げ調整 */ の部分で、2行目以降を、1行目のテキスト先頭に合わせて空白（字下げ＝イデント）の設定をしています。

私のように、参考リンク p に font-size を設定している場合、字下げの単位 px / em / rem の使い方によっては、フォントの大小の基準が変わってしまうため注意が必要です。

px は絶対値
em は親要素を基準にした相対サイズ
rem はルート（階層）要素を基準にした相対サイズ

remを使ってCSSの文字サイズ指定

例えば上記CSSの例でいうと、.sankou::before 、.sankou2 p::before で指定しているバッジの部分の余白（margin-right と padding）まで全て rem で指定するとくずれます。左右関連を em（上では padding を上下/左右 em で統一しましたが）にしないとダメでした。難しい…

他は、使っているフォントの文字間・文頭にくる文字・記号（全角/半角）・バッジの中の padding の数値によって、微妙に2行目が揃わない場合があります。半角/全角・padding は字下げの部分で、半角は0.5 rem/emで計算するなど微調整をしてみてください。

また記事作成中に、HTMLビューモードで上部ボタンメニューの「HTMLの書式を設定：くずれてるハンバーガーメニューみたいなの」を使った後などは要注意。変な改行・半角余白が入るせいで、微妙に2行目が揃わなくなります。

この場合は、以下のようにHTMLを整理すれば大丈夫。（原因はこれだ！とわかるまで試行錯誤しました）

<p class="sankou">
  参考サイト/記事へのリンク
</p>
<p class="sankou">
  参考サイト/記事へのリンク。タイトルが長い時・モバイル時など横幅が狭いデバイスの時はどうなるのかの改行表示テスト。
</p>

1行にまとめてあげると（折り返し表示以外の、改行・空白の削除）直りました。

<p class="sankou">参考サイト/記事へのリンク</p>
<p class="sankou">参考サイト/記事へのリンク。タイトルが長い時・モバイル時など横幅が狭いデバイスの時はどうなるのかの改行表示テスト。</p>

カテゴリーの記事数バッジ

イメージはスマホの「未読件数通知バッジ」です。実際の記事の未読数ではないので、記事を読んでも数は減りません。悪しからず。

JetThemeで使っている「Bootstrap」にバッジのコンポーネント（CSSの型のようなもの）があることが分かったので、そちらを使ってカスタマイズしてみました。

Badges （バッジ）Bootstrap v5.3

まずは勉強がてらサンプルを作ります。

JetThemeでのHTML修正場所

まず widget-content categories を検索。その <div> の数行下から始まる <a> ～ </a> 下のコードを探してください。そこに黄色いラインの部分の2か所の追記のみで表示可能です。

<a class='text-reset fw-bold hover-text-primary position-relative' expr:href='data:label.url + &quot;?max-results=10&quot;'>
  <span class='align-middle'><data:label.name/></span>
  <b:if cond='data:showFreqNumbers'>
  <span class='badge rounded-pill position-absolute top-0 start-100 translate-middle bg-primary'><data:label.count/></span>
  </b:if>
</a>

1行目の a に class="position-relative" を追記
<b:if cond='data:showFreqNumbers'> の下の <span> に class="badge rounded-pill position-absolute top-0 start-100 translate-middle bg-primary" を追記。もともとのclassは全部削除。

1つのカテゴリーが3桁（99件以上）の時でも、余白を少しとって長丸+数字になるので、中の数字が余白不足できゅうくつな感じにはなりません。

ただ、1桁の時でも少し「つぶれた長丸」のような気がしますね。バッジ部分のCSSはBootstrap側で既に設定されているので、修正分のCSSを追記して調整する必要があります。

当ブログでは .badge { padding: .35em .55em; } をCSSに追記するといい感じになりました。（Bootstrapのオリジナルだと padding: .35em .65em; になっています）

また、通知バッジは class で bg-primary を入れてあるのでブルーになっていますが、この部分で色も変わります。Bootstrap既定色以外を使いたい場合は bg-primary を削除し、別途 class/id を入れてCSSで色を設定してください。

他のやり方もありますが、Bootstrapを既に導入しているならこちらのほうが楽に設定できます。