WordPressテーマSANGOの質問

FontAwesome5 PROを使用する場合

アバター
たん

いつもお世話になっております。
たいへん素晴らしいテンプレート感謝いたします。
ひとつ質問させて下さい。
よくある質問ページの「トップページなどの記事一覧をスマホでも2列にしたい」というCSSを導入しました。
それで実際にトップページの記事一覧がスマホでも2列となりました。
その後「SANGOで固定ページをホーム固定する方法まとめ」を参考にさせていただき固定ページをホーム固定いたしました。
このように固定ページをトップページにした後にスマホ画面で見ると記事一覧が1列となっているのですが、トップページ(固定ページ)をスマホで見ても2列にする方法はございませんでしょうか?教えていただけましたら幸いです。
よろしくお願いいたします。

SANGOのショートコード一覧
SANGOのショートコード一覧
コメントへの回答
サルワカくん
サルワカくん
2019/01/16

トップページに固定ページを配置した場合、デフォルトでは記事一覧は出力されないと思うのですが、どのように記事一覧を表示させていますか?
可能であればURLを教えていただけると対応がスムーズになるかと思います。

アバター
たん
2019/01/16

すばやいお返事ありがとうございます。
ホームページは以下となります。
https://konbinimeshi.com/

なおいま目指している理想のトップページは以下のような並びです。
固定ページをトップに持ってくる前提となっています。

1番上に「最新記事」という部分にタブ切り替え機能のついたもともとのトップページを持ってきたいです。
このトップページはぜひスマホで見たときに2列で表示されると嬉しいです。

その下に現在のようなメニューボックスを持ってきたいと考えています。

以上です。
ご教示いただけましたら大変うれしいです。
よろしくお願いいたします。

サルワカくん
サルワカくん
2019/01/17

①通常の記事一覧(タブ有)
②メニューボックス
の2つが載るイメージでしょうか。
そのうえで①はスマホでも2列表示にしたいということでしょうか。

アバター
たん
2019/01/25

返事が遅れてしまい大変申し訳ございません。
修正できました!
本当にお世話になりました!
ありがとうございます!

アバター
たん
2019/01/22

申し訳ありません。
子テーマのstyle.cssに貼り付けても表示されません。
ブラウザのキャッシュも削除しました。

アバター
たん
2019/01/21

すみません、もう一つ質問させて下さい。
教えていただいたコードを子テーマのfunctions.phpに貼り付けたところヴィジェット(サイドバー)の最新記事とカテゴリーのFontAwesome5のアイコンが表示されなくなりました。
ここのアイコンをFontAwesome PROに変更することはできますでしょうか?教えていただけましたら幸いです。

アバター
たん
2019/01/21

解決いたしました。ありがとうございます。
サルワカさんの記事のFTPソフト、およびbackupの記事からfunctions.phpに貼り付けがスムーズにできました!
本当にありがとうございます。

アバター
たん
2019/01/20

返事が遅れてしまい大変申し訳ございません。
おっしゃるとおりです。

サルワカくん
サルワカくん
2019/01/26

よかったです!ご報告ありがとうございます。

サルワカくん
サルワカくん
2019/01/23

CSSが読み込まれていないようです。
おそらくPORIPUのstyle.cssが読み込まれており、SANGOの子テーマは読み込まれていないようですね。
それ自体は問題ないので、代わりに外観⇒カスタマイズ⇒追加CSSに貼り付けていただければと思います。
それから、さきほどのコメントのCSSに一部修正を加えたので、再度コピペし直してもらえればと思います。

サルワカくん
サルワカくん
2019/01/22

あ、そうですよね。以下のCSSを子テーマのstyle.cssに貼り付け、(ブラウザのキャッシュを削除してから)確認してみていただけますか?

.fa5 .booklink-link2 > div a:before,
.fa5 .follow_btn .Feedly:before,
.fa5 .follow_btn .Website:before,
.fa5 .has-fa-before:before,
.fa5 .has-fa-after:after,
.fa5 #breadcrumb li:after,
.fa5 #breadcrumb li:first-child a:before,
.fa5 .divheader__btn .raised:before,
.fa5 .entry-header .updated:before,
.fa5 .entry-header .pubdate:before,
.fa5 .entry-content blockquote:before,
.fa5 .cardtype time:before,
.fa5 .widget ul li ul li a:before,
.fa5 #reply-title:before,
.fa5 .footer .widget ul:not(.my-widget) li a:before,
.fa5 .hh30:before,
.fa5 .hh31:before,
.fa5 .hh32:before,
.fa5 .hh34:before,
.fa5 .box23:before,
.fa5 .box23:after,
.fa5 .box26 .box-title:before,
.fa5 .box27 .box-title:before,
.fa5 .box29 .box-title:before,
.fa5 .box30 .box-title:before,
.fa5 .li-chevron li:before,
.fa5 .li-check li:before,
.fa5 .li-yubi li:before,
.fa5 .li-niku li:before,
.fa5 .entry-content .quote_silver:after,
.fa5 .reference .refttl:before,
.fa5 .memo_ttl:before,
.fa5 #toc_container .toc_title:before,
.fa5 .cstmreba .kaerebalink-link1 a:before,
.fa5 .booklink-link2 > div a:before { font-family: "Font Awesome 5 Pro" !important;
}
サルワカくん
サルワカくん
2019/01/21

なるほど。その場合、以下のようにすると良いかと思います。
① 固定ページのホーム固定をやめ、通常の記事一覧+タブを利用する(固定ページではタブを利用できません)
② メニューボックスは「トップページ記事一覧下」ウィジェットに配置する(見出しやメニューボックスのコードをカスタムHTMLウィジェットに貼り付ければOKです)

話はそれますがFontAwesome PROを使われていると思います。
SANGOデフォルトのFontAwesome5のコードと重複しているため、SANGOの方は読み込みを解除しておくのが良いと思います(読み込み速度に大きく影響します)。
以下のコードを子テーマのfunctions.phpに貼り付けていただくだけで読み込み停止になると思います。

// SANGOデフォルトの fontawesome5の読み込み停止
function deregister_sng_fontawesome5() { wp_deregister_style('sng-fontawesome5');
}
add_action('wp_enqueue_scripts', 'deregister_sng_fontawesome5',999);
アバター
たん
2019/01/23

ありがとうございます。できました。
ただホームや目次、日付、blockquoteのタグのfontawesomeがまだ読み込まれてないようです…
他にもfontawesome5が使われている部分があるとするといっそfontawesomePROをやめてfontawesome5の範囲内で使用したほうがよろしいでしょうか?

サルワカくん
サルワカくん
2019/01/24

カバーできてない部分がありましたので、コメントのCSSを再修正しました。
お手数ですが、再度貼り付け直していただければと思います。
これでSANGO本体によるFontAwesomeアイコンはすべて表示されると思います。
ただ、子テーマやプラグインにより出力されているアイコンが問題なく表示されるかどうかは分かりません…。