会員サイトをリニューアルしました! 新サイトはこちら

XserverのWEBフォントが反映されない < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

XserverのWEBフォントが反映さ...
 
通知
すべてクリア

[解決済] XserverのWEBフォントが反映されない

12 投稿
3 ユーザー
14 Likes
845 表示
Powan
(@powan)
Active Member
Topic starter
 

https://u.swell-theme.com/community/postid/8655/

↑こちらの記事も参照しましたが、設定方法などがよくわからなかったので、あらためて質問させていただきます。

Xserverのserverパネルで、WEBフォントを有効にしました。

「TypeSquare Webfonts for エックスサーバー」を有効にして設定もしましたが、WEBフォントが反映されません。

記事投稿画面の右側の「ブロック」の設定項目にもフォントを選択するような項目もありませんし、SWELL の

[カスタマイズ] → [サイト全体設定] → [基本デザイン] → [フォント設定]

にも、WEBフォントを選択できるような項目はありません。

「TypeSquare Webfonts for エックスサーバー」プラグインでフォントを変更しても、ブログ記事には反映されません。

どのような設定または、操作をすれば、WEBフォントを利用できるようになるのでしょうか?

ご存じの方がいらっしゃったら、教えてください。

よろしくお願いします。

設定に関しては、以下のマニュアルを参考にしました。

https://www.xserver.ne.jp/manual/man_server_webfont_wp.php

 
投稿済 : 27/10/2021 11:18 am
momo reacted
momo
 momo
(@jr7hzb)
Trusted Member
 

私は、あの後でエックスサーバー側の設定を戻した事で、h2などの部分のWEBフォントは再現するも本文と言うかpタグはWEBフォントが当たりませんでした。

ただ、私は題名にWEBフォントが当たれば良かったので、その先は気にしませんでした。

ページ全体にWEBフォントになると遅くなっても困るので。

しかしながら、pタグの中にWEBフォントが当たらない事は気になってはおりました。

私だけの環境問題かな?と思ってましたが、そうでも無さそうですね。

 
投稿済 : 27/10/2021 11:36 am
Powan reacted
しらこ
(@96ssbike)
Prominent Member
 

この件について書いた本人です。

大変申し訳ございませんが、このプラグインについてはこちらでサポートできません。「サポートできない」の旨は、以下の2つのスレッドを参照してください(SWELLの利用規約にも記載しています)。
https://u.swell-theme.com/community/postid/8206/
https://u.swell-theme.com/community/postid/8213/

このプラグインを有効にすると、以下のようなCSSを吐き出すみたいです(併せて、Webフォント自体を読み込むコードも必要です)。

<style type='text/css'>h1,h2,h3,.entry-title{ font-family: "新ゴ B" !important;}h4,h5,h6{ font-family: "新ゴ B" !important;}.hentry,.entry-content p,.post-inner.entry-content p{ font-family: "新ゴ R" !important;}strong,b{ font-family: "新ゴ B" !important;}</style>

このプラグインが、いくつかのテーマで適合するかどうかを軽く検証したとことろ、

適合する(CSSルールが同じ):
Twenty Twenty-One(公式ディレクトリ登録テーマ)

適合しない(CSSルールが異なる):
SWELL
Arkhe(公式ディレクトリ登録テーマ)
Snow Monkey
Astra(公式ディレクトリ登録テーマ)

と、対応しているほうが少ないです。

といっても、完全な対応を確認したわけではなく、軽く実際のサイト+デベロッパーツールで構造を目視確認した程度なので、詳しくはご自身で対処ください。

したがって、もしもサポートを要求されるようでしたら、こちらのプラグインのフォーラムにご要望いただければと思います。
https://wordpress.org/support/plugin/xserver-typesquare-webfonts/

先日、プラグインを使用しないで実装する方法を提示したのは、このプラグインを使用するとこうなることがわかっていたので書いてみました。細かく融通はきかないと思いますが、書いた以上のことをやりたい場合はご自身で実装してください。

This post was modified 2年前 2回 by しらこ

にゃーん .

 
投稿済 : 27/10/2021 12:13 pm
Powan
(@powan)
Active Member
Topic starter
 

> h2などの部分のWEBフォント

ほんとですね。

あらためて見直したら、仰るとおりに h2 には反映されていました。

本文などにも反映されると嬉しいんですけどね。

みなさまからの追加情報、お待ちしています。m(__)m

 
投稿済 : 27/10/2021 12:16 pm
Powan
(@powan)
Active Member
Topic starter
 

自己解決しました。

momoさんのコメントが参考になりました。

[TypeSquare Webfonts Plugin for エックスサーバー]の設定で、

[上級者向けのカスタマイズ] → [本文タグ]

に、“,P” を追加することで、本文にもWEBフォントが反映されました。

momoさん、しらこ さん、ありがとうございました。

 
投稿済 : 27/10/2021 12:30 pm
momo, 了(開発者), skillsharejp and 1 people reacted
しらこ
(@96ssbike)
Prominent Member
 

@powan あっ、そのプラグインそういう機能あったんですね…!
CSSのクラス名変更できるのであれば素晴らしいプラグインです。

たとえば、

  • .entry-title (投稿タイトル) → .c-postTitle__ttl
  • .entry-content p (コンテンツのpタグ) → .l-mainContent p

に置き換えて画像のとおりになりました。

カンマ+半角スペース(, )で区切って、.post_content pも追加しても良いかもしれません。
※pのままでも良いかもしれません。

画像が実際にやってみたやつです。

SWELLでどういう風にするのがベストかは細かく見ていないので、軽くやった程度です。

This post was modified 2年前 by しらこ

にゃーん .

 
投稿済 : 27/10/2021 12:44 pm
Powan
(@powan)
Active Member
Topic starter
 

しらこ さん、追加の情報をありがとうございます。

参考にさせていただきます。

This post was modified 2年前 by Powan
 
投稿済 : 27/10/2021 2:19 pm
momo
 momo
(@jr7hzb)
Trusted Member
 

Powanさん、しらこさん、三人寄れば文殊の知恵ですね。

このスレッドは、本来は、swellフォーラム対象外と言うことは認識してましたが、こう言う形で素晴らしい解決に至ったことが嬉しいですね。

他社提供プラグインとテーマの相性問題は、WordPressの世界に限らず、自動車業界、パソコン業界など世の中に多い複数社が絡んだ問題というケースですよね。

相談窓口が二股になってしまうので、どちらにも相談する事が難しく自己解決するしかないケース。
(他社の作る製品の内部まで知らないのは当たり前なので、複数社が関わるとこうなるのは避けられない)

今回は、たまたま自己解決能力の高いPowanさんがスレ主さんだったので、便乗した私もラッキーな解決方法を得ることができました。

そして、しらこさんもサポート外の事なのに、代替案の提示などのお手数をかけたサポートでありがとうございました。大元の記事が私発信だったので感謝しております。

WordPressはプラグインで機能追加できるのが売りですが、サポートが受けにくくなるので、私レベルだと了さんが作者になっているプラグインとswellだけで完結させるサイト運用が良いのかも知れない。

と改めて痛感してます。一番良いのは自分がレベルアップしてしまえば良いんですけどね(笑)。

 
投稿済 : 27/10/2021 10:04 pm
Powan reacted
momo
 momo
(@jr7hzb)
Trusted Member
 

しらこさん以下の部分を保存版にさせて頂きました。

メインの業務サイトでは基本WEBフォントは使わない(スピード重視)予定ですが、趣味のブログの方ではこれで雰囲気を楽しく出来そうです。嬉しいです。

---------

  • .entry-title (投稿タイトル) → .c-postTitle__ttl
  • .entry-content p (コンテンツのpタグ) → .l-mainContent p

に置き換えて画像のとおりになりました。

カンマ+半角スペース(, )で区切って、.post_content pも追加しても良いかもしれません。
※pのままでも良いかもしれません。

 
投稿済 : 27/10/2021 10:08 pm
しらこ
(@96ssbike)
Prominent Member
 

↑もうちょっとしっかりとしたのは、後にブログにでも書きたいですけどね^^;(欲しい方はきっといらっしゃるんじゃないかと思いまして)

取り急ぎは上記を使ってください。

私も、 @powan さんの情報が助かりました。非常に参考になる情報をありがとうございました。

This post was modified 2年前 by しらこ

にゃーん .

 
投稿済 : 27/10/2021 10:30 pm
Powan and momo reacted
momo
 momo
(@jr7hzb)
Trusted Member
 

@96ssbikeさん

ブログ記事の公開楽しみにしております。

 
投稿済 : 27/10/2021 10:50 pm
momo
 momo
(@jr7hzb)
Trusted Member
 

@96ssbikeさん、お陰様でwebフォントの適応範囲が広がって楽しくなりました。

エックスサーバーでは3ドメインしかwebフォントに出来ないので、別なドメインのブログを優先してwebフォントにしました。

やっぱり広範囲に文字が変わるのって嬉しいですね。

表示が遅くなっても採用したい楽しさでした。

 
投稿済 : 30/10/2021 6:40 am
Powan and しらこ reacted
共有: