Written by Kosei Yayoshi

【Manablog Copy】Androidスマホで太字を反映させる方法【CSSを追記】

WordPress

Manablog Copyを使っている人「マナブさんのWordPressテーマのManablog Copyを使ってるけど、
<span class="bold">タグを使った時に、Android端末で、太字が反映されないなぁ。
Manablog Copyを使用時に、Android端末で、太字を反映させる方法を知りたいな。」

こういった疑問に答えます。

本記事の内容

  • 【Manablog Copy】Androidスマホで太字を反映させる方法【CSSを追記】
  • Manablog Copy使用時に、Android端末で太字が反映されない原因を解説するよ
  • Android端末でManablog Copy本来のデザインを表示させる修正
  • マナブログもAndroid端末に対応してほしい件について

こんにちは、ヤヨコウです。

この記事を書いている僕は、半年ほど、Manablog Copyを使用していて、半年間「Androidで太字が表示されないのは、なんでかなー」って思っていましたが、色々とコードを触っていたらAndroid端末で、太字を反映させる方法を見つけたので、情報をシェアします。

※(2020/10/16)
この問題は、現在、本家マナブログでも確認できているので、Manablog Copy、Minimalなどのテーマを使用している方の参考になるかと。

それでは、さっそく解説していきます。

【Manablog Copy】Androidスマホで太字を反映させる方法【CSSを追記】

コピペOKです。秒速で解決できます。

Android端末で太字を反映させるCSS

<span class="bold">太字にしたい文字</span>

上記タグを使用時に、Android端末(Chrome)にて、太字を反映させるCSSは、下記の通り。

.single span.bold, .single span.bold a {
    font-weight: bold;
}

上記を、style.cssに追記することで、<span class="bold">タグを使用時に、太字が反映されるようになります。

なぜ、こういったことが起こってしまったのか

Manablog Copyでは、おそらくAndroid端末での表示のテストをされていないので、今回のような問題が発生してしまったのだと思います。

多分ですが、マナブさん手元にApple製品しかなく、Android端末での表示チェックをされていないのが、一番現実的な理由だと思います。

Manablog Copy使用時に、Android端末で太字が反映されない原因を解説するよ

なぜ、Android端末にて太字が反映されないのかを、簡単に解説します。

[class=”bold”]の値が[font-weight:600]だから太字が反映されない

[class="bold"]の値が[font-weight:600]に設定されているから太字が反映されないのが原因です。

[font-weight:600]というのは、文字の太さを表す、CSSの設定です。数字を大きくすると、文字を太く出来ますが、この設定が、Android端末(Chrome)と相性が悪いため、太字が反映されない現象が起きています。

おそらくですが、Android端末(Chrome)では、[font-weight]の設定を数字で細かく設定することが出来ません。

なので、[font-weight:bold]というCSSを追加して、この文字は、太くしてね。というふうに、CSSの設定を上書きしたところ、Android端末で太字が反映されるようになりました。

詳しく知りたい方は、[font-weight 文字の太さ]などでググってみるとが参考になるかと。

少し、難しく感じるかもですが、簡単にまとめると、CSSを追加して「このタグは、太字にしてね」というふうに設定し直しました。

Android端末でManablog Copy本来のデザインを表示させる修正

おそらく、Manablog Copyでは、太字にしたいところが[font-weight:600]で設定されているので、マナブさん本人が想定した、Manablog Copy、MinimalのデザインをAndroid端末(Chrome)で、表示させるには、少し、修正が必要です。

CSSを追加して、Manablog Copyを修正

下記のCSSは、先程解説した<span class="bold">タグで太字を反映させるようにしたCSSも含まれています。

※下記のCSSをstyle.cssに追記してください

下記のCSSを追加をしても、PC、iosでは、見ためは変わりません。もとに戻したいときは、追記したCSSを削除すればいいので簡単ですね。

/*font-weight:600の設定をfont-weight:boldに変更
 
下記のCSSを追加することで、Androidで太字が反映されない問題が解決される

 */
	header .nav-bg .nav.navbar-nav a{
	font-weight:bold
}

	main .wrap h2 a{
	font-weight:bold
}

	.author h4{
	font-weight:bold
}

	.single h1{
	font-weight:bold
}

	.single h3{
	font-weight:bold
}

	.single h4{
	font-weight:bold
}

	.single p a,.single a a{
	font-weight:bold
}

	.single ul li a,.single ol li a{
	font-weight:bold
}

	.single span.bold,.single span.bold a{
	font-weight:bold
}

	.single p.point{
	font-weight:bold
}

	footer h4{
	font-weight:bold
}

	.other h1{
	font-weight:bold
}

	div#appreach-appname{
	font-weight:bold
}

	.kaerebalink-name,.booklink-name{
	font-weight:bold
}

	.text-box .title{
	font-weight:bold
}

追加したCSSの反映は、サイトをシークレットで見てみるとわかると思います。
ブラウザにサイトのキャッシュが残っていると、CSSの設定が反映されないことがあるので、シークレットモードで確認するのがおすすめ。

マナブログもAndroid端末に対応してほしい件について

なんと、本家のマナブログをAndroid端末(Chrome)で閲覧すると、太字が一切確認できません(´;ω;`)

本家マナブログで太字を表示させる方法を紹介

そもそも、このManablog CopyというWordPressテーマは、マナブログのコピーなんですよね。なので、Android端末(Chrome)で本家マナブログを閲覧しても太字が、表示されません。

できれば、マナブログも修正してほしいところですが、すぐには修正されないと思うので、Android端末で、マナブログを閲覧時に太字を表示させる方法を紹介します。

結論は、使うブラウザをFirefoxにする。これだけです。

Firefox ウェブブラウザー

Firefox ウェブブラウザー
無料
posted withアプリーチ

なぜかは、わからないんですけど、Firefoxでマナブログを閲覧すると、太文字が表示されるようになるんですよね。不思議です。

なので、繰り返しになりますが、マナブログで太文字を見たいときは、Firefoxをつかうか、PCから閲覧しましょう。

というわけで、今回はこのへんで終わりにします。この記事が参考になれば幸いです。