Webフォント 反映されない

256 views
  1. コメントする
  2. 記事検索
  3. 更新

0
R iPhone 2019/08/01 11:31
はじめまして。
大手検索サイトで調べたり、こちらの方でも調べても分からなかったので質問させて頂きます、

CSSで装飾をしています。
フォントが適用されているのが子ページのみで、他のページ(トップページ、小説ページ、ノート)はされていないように見受けられます。
子ページと同じようにCSSをいじっても変わりないのですが、何故でしょうか?
分かる方いらっしゃいましたらご教授お願いします!

残り983件書き込み可

17
しち Firefox 2019/09/08 05:19
>>16
書き込んでから己の書いてることにおかしな点があると気付いたのでセルフ突っ込み(訂正)入れときますすみません。

> 今まで書き込まれたCSS(>>9)で実験してみると、自分のところでは反映されているんです……。
>>9(メールボックス)のCSSは、もっと優先度の高いトップページのCSSが影響してデザインが予期せぬものになっている可能性があると後述してるのに、ここ消し忘れました。
書き込まれたCSSを検証しても無意味でしたね……。メールボックスに関しては、多分トップページのCSSの影響が大きいのだと思います。
16
しち Firefox 2019/09/08 05:04
>>14
> 全部消して書き直したほうがいいかも?
ですね。どこが干渉しているか分からないときはとりあえず綺麗さっぱり無に帰したいです。

念のため【複製】でデザイン中のページと同じCSS・HTMLのページをスペアとして新たに作り。どちらかをバックアップとして残しておきながら、片方を大きく改造してみたりとか……。
あっちこっちを細々変更してると、結構凡ミスしがちなので……(実体験)。ばっさり色々削除して一から作るつもりくらいでいった方がいい場合もあります。

> 試しに青空明朝でやっていますが、反映されていない気がします。
このフォント、ぱっと見ではiOS(iPadやiPhone)のデフォルト明朝体フォントとあまり見分けが付かない気がします。本ッッ当に失礼で恐縮なんですが、実は反映されていたり、とかは……?(本当にすみません念のため…)

今まで書き込まれたCSS(>>9)で実験してみると、自分のところでは反映されているんです……。ちなみにAndroidとPC(win/IE・Chrome・Firefox)、およびiPadで確かめてみました。(iPhoneは無所持)

>>9 のCSS(メールボックス)で、送信ボタンは装飾できている
このCSSだと送信ボタンのスタイル指定が無いので、「装飾されている」ということはすなわち、トップページのCSSが影響してますね……。すみません、前回見たときメールボックスの仕様についてうっかり失念していました。

#メールボックスのデザインに関しては、トップページのCSSが大きく影響します。なのでメールボックスを独自のデザインにしたい場合はトップページのCSSも見ないと原因箇所は分かりません。
ALICE+ではメールボックスの【HEAD間編集】の内容より、トップページの【CSSファイル編集】の内容の方が後述されている(=優先度が高い)仕様です。
ので、トップページのCSSにフォントを指定していると、メールボックスのCSSにおけるフォント指定が上書きされる場合があります。
(ちなみに拍手ページも同じく、拍手のHEADよりもトップページのCSSの方が優先度が高いため、こちらもトップページのCSSを考慮しなければデザインできません)

よってトップページとメールボックスページのデザインを全く異なるものにしたい場合は、メールボックス独自のクラスセレクタなどを作ってHTMLを構築する必要があります。
(逆に、両ページ同じフォント・同じデザインにしたいのなら、メールボックスのCSSにまで body{……} でフォントを指定する必要は無いと言えます。無意味な重複になるので…)

> 若しくは、HPを見てもらったほうが早いでしょうか?
問題ページのHTML・CSSがセットで分かりさえすれば問題箇所は見つけられそうな気がします。
一番重要なのはCSSなのですが、HTMLに問題があってCSSの指定が反映されていない……とかも有り得るので。
とりあえず『トップページ』『メールボックス』にWebフォントが適用されないのは、トップページのCSSもしくは各HTMLが原因である可能性が高いように思えます。

> nendを最近利用し始めたのですが、小説の本文【全体デザインの文章画面編集】に設置したんですが、反映されていないようなのですが、どうすればいいでしょう?
nendとはクリック広告ですよね?すみません、使ったことがないので全くお力になれません……。
多分、【文章画面編集】に設置した広告表示用のコードだけ反映されない……というお話でしょうか。
全然nendを知らないので臆測ですが、例えば【文章画面編集】だけ『自動改行する』にチェックが入ってて、表示用コードに不要な改行<br/>が入っているとか……。それくらいしか思いつかないです;

(【全体デザイン】と【文章画面編集】【表紙画面編集】はそれぞれ違う編集画面なのですが、もしかして【全体デザイン】〔←#novel#という独自タグが書いてある編集画面です〕に設置したという話でしょうか……?
そうでなければ、【文章画面編集】と【表紙画面編集】にそれぞれ設置しているものを外し、【全体デザイン】のみに設置しても良いものではないかと……使ったことないので不明ですが)
(【全体デザイン】にコードを設置してるのに文章画面でだけ表示されない、という話でしたら何も思いつかないですすみません)
15
R iPad 2019/09/05 15:35
>>14 の追記です。

>>>(A)【デフォルトCSS設定】を「無効」にする
>(B)CSSに form{ font-family: inherit; } を入れる
どちらも実行しました。後ほど確認しようと思います。
14
R iPad 2019/09/05 15:16
>>13

また、遅くなりましたが、質問させて下さい。
キャッシュクリアの件、ありがとうございます。
後ほどやろうと思います。

>>要素ごとに異なるフォントを指定できます。
やはり全部削除して書き直したほうがいいかもしれませんね?

>>「トップページ(メールボックスのページ)のCSS」とあったのですが、<style>タグがあるのでこれ自体は【メールボックス設定】>【HEAD間編集】の内容ですよね……?
そうです。試しに青空明朝でやっていますが、反映されていない気がします。

>>【○○画面編集】等の内容+そのページの【CSS】も載せた方が早いかと…………。
若しくは、HPを見てもらったほうが早いでしょうか?
webフォントは絶対解決したいのですが、少々お時間いただくかもしれません。

>>とありましたが、この『.button』は使用しているセレクタでしょうか……??
ご心配ありがとうございます。
こちらは送信ボタンとは関係なく、送信ボタンはちゃんと装飾されています!

もう一つお聞きしたいのですが、nendを最近利用し始めたのですが、小説の本文【全体デザインの文章画面編集】にせっちしたにですが、反映されていないようなのですが、どうすればいいでしょう?
【全体デザインの表紙画面編集】には反映されており、他のトップページや小ページなども反映されています。
広告が反映されない箇所もあるということなのでしょうか?

13
しち Firefox 2019/08/12 06:07
>>12
また取り急ぎ、気になった部分だけ……
>CSSを編集したが、変更がすぐに反映されない
ブラウザのキャッシュをクリアすると反映されるかと。
キャッシュに古いCSSファイルが残っている場合は、無駄な通信を抑えるためにブラウザが新たなCSSファイルを読み込まないことがあります。
なので、キャッシュクリアで古いCSSファイルを削除すると、新しいCSSファイルを読み込んでくれます。

>一行テキストフォームとテキストエリアは別のフォントにしたい
もちろん可能です。
* body{ font-family:フォントA; }/*ページ全体*/
* input[type],textarea{ font-family:フォントB; }/*フォーム内だけ*/
という風に、要素ごとに異なるフォントを指定できます。
(今はただ、Webフォントがどこで無効にされているのか分からないため、とりあえず『font:』『font-family:』を削除してみているだけなので……)

「後に書いたスタイル指定の方が優先されてしまう」というのは↓みたいなときです。
* body{ font-family:フォントA; }
* body{ font-family:フォントB; }/*こっちの方が後述なので、ページ内のフォントは『フォントB』になる*/
同じセレクタ(この場合body)に同じプロパティ(この場合font-family)で何かを指定したら、後述のスタイルが優先されます。

あとは、<body>より内側の要素にfont-familyが何か指定されていても、body{}で指定したフォントが事実上無効になったりとか……。
とにかく、一旦全部のフォント指定を消してスッキリさせてWebフォントが使えるのを確認してから、改めて必要な場所にフォント指定を書いた方が良いかと……。

>>9 のCSSについて
「トップページ(メールボックスのページ)のCSS」とあったのですが、<style>タグがあるのでこれ自体は【メールボックス設定】>【HEAD間編集】の内容ですよね……?

*メールボックスページは、『メールボックスの【HEAD間編集】』に入れたCSSよりも、『トップページの【CSSファイル編集】』のスタイル指定の方が優先されます。
なので、トップページのCSSによってフォントが上書きされ、メールボックスで使いたいフォントになっていない……ということはないでしょうか?

メールボックスのデザインに関しては、これが原因では?というのがもう一つありました。
*ALICE+のデフォルトCSSが有効になっていると、スマホから閲覧した際は<form>にfont-familyがゴシック体フォントで指定されてしまうみたいです。
なので、
>(A)【デフォルトCSS設定】を「無効」にする
>(B)CSSに form{ font-family: inherit; } を入れる
のどちらかで解決する可能性もありです。

>あと、>>9 のCSSを自サイト子ページに突っ込んで擬似メルフォ作って表示確認してみた結果
私の環境(PC:Firefox、Android:Firefox・Chrome)でやってみたら、bodyに設定したあおぞら明朝が、期待通りの場所に表示できています。
(※CSSにform{ font-family: inherit; }を入れました)
(※メールフォーム部品のフォントはsans-serif[ゴシック体]が設定されていたので、その通りここだけはゴシック体で表示されています。それ以外のページ内テキストはすべてあおぞら明朝です)
……という感じで、私が見ると、とりあえずWebフォントは反映されているようです……。

HTML構造(【○○画面編集】や【デザイン編集】)が分からないので、他に原因となりそうな場所の発見はありませんでした。
『font:』『font-family:』を消したりデフォルトCSSを無効にしてみたりしても全く解決できそうになかったら、【○○画面編集】等の内容+そのページの【CSS】も載せた方が早いかと…………。

>Webフォントとは別なんですが、>>9のCSSでどうしても気になった箇所
*.button {
* -webkit-appearance: none;
* border-radius: 3px;
* 〜他、いろいろスタイル指定〜
*}
*.button:hover {
* background: #837841;
* color: #f2eee7;
*}
とありましたが、この『.button』は使用しているセレクタでしょうか……??
メールボックスや拍手の送信に使うボタンは、
* input[type="submit"]{…………;}
で装飾しますが……。>>9のCSSだと、送信ボタンのデザインが手つかずになっていませんか?
もしも送信ボタンを装飾しようとしてできないでいるようでしたら、『.button』の部分を『input[type="submit"]』に変更すると装飾できるかと……。(余計なお世話でしたらすみません)
12
R iPad 2019/08/11 21:33
>>11
遅くなりました。すみません。

>>《font:…………;》 というスタイル宣言も探して消してください
とりあえずトップページに適用されるCSSファイル編集で試しました。
すぐに反映されないのか見た目は変わりませんでした。

>>ここ(一行テキストフォームとテキストエリア)はゴシック体(sans-serif)でOKですか?
ここは別のフォントにしたいのですが可能でしょうか?

行間の指定やフッターリンクのこと大変勉強になります。
ありがとうございます。

11
しち SOV35 2019/08/07 21:51
>>9
とりいそぎ、Webフォントが使えなくなっている原因これかな?と思った箇所あったのでまずそこだけ……

#《font:…………;》 というスタイル宣言も探して消してください
それはフォント関連のスタイルを一括で指定するプロパティです。
これ一つで『文字サイズ・行間・フォントの種類(font-family)』……などの項目を指定できます。
(参考:『【CSS】fontプロパティをショートハンドで記述する順番と注意点』 https://delaymania.com/201404/web/css-font-short-hand/

これにより、font-family:あおぞら明朝 Regular; が上書きされ無効になった可能性があります。
#body以外の場所にある《font:……;》および《font-family:……;》を一旦すべて消してみてください

>>9 input[type='text'] や textarea において
*   font: 15px/24px sans-serif;
とありますが、ここ(一行テキストフォームとテキストエリア)はゴシック体(sans-serif)でOKですか?

これによりbodyに書いた「あおぞら明朝」の指定が「ゴシック体」で上書きされています。

#《font:》プロパティでの指定を消して、
font-size:15px;
line-height:1.5;
font-family:sans-serif; /*ゴシック体にする*/

と各項目ごとに分けて書く方法に変更することをお勧めします。
※Webフォントを適用させる場合は、最後の3行目は入れないでください。

line-height:1.5; というのは『一行の高さ(行間)を文字サイズの1.5倍にする』というスタイル指定です。
現状だと『24px』で指定されていますが、行間の指定は px でしない方がいいです。『1.5』のように、単位をつけず指定するのが基本的です。
理由は長くなるので割愛で……。

>フッターの部分が、パソコンとスマホでは明朝とゴシックで違う。
>これは直せたりしますか?デフォルトなのでしょうか?
ALICE+の仕様につき、フッターリンクの文字は『ゴシック体』から変更できません。(スマホからアクセスしたときのみ。何故かパソコンで閲覧した場合はフォント指定自由なので、Webフォントにも変更できるのですが)
最も強制力の高い書き方でフォントを指定されていますので、これはサイト管理人には弄れません。

このフッターリンクは、見えづらくすると規約違反となります。
よって、文字サイズやフォントを弄ることによって見えづらくなってしまうのを防ぐために、ALICE+側から強制的にスタイルを指定されているようです。

なお、フッターでフォント種類と文字サイズが変更不能なのは #copyright# といったリンク表示用独自タグで入れるリンク(=フッターリンク)のみです。
それ以外のリンクやテキストに関しては、他と同じように文字装飾を行えます。
10
R iPad 2019/08/07 13:31
>>6
>>7
わかりやすいご説明ありがとうございます!
参考にさせていただきます。

トップページ、小説のCSSを弄ってみましたが、やはり適用されている感じがしません。
webログノートの方は適用されましたので別のフォントに変えてみたいと思います。


9
R iPad 2019/08/07 12:47
>>5

>>率直に言って……一部分しか見ていませんが、Webフォント以外の部分にも無意味な記述・不要な記述があるように見受けられます……。
もしかしてテンプレを改造したり切り貼りしたりしていらっしゃいますか……?
今回初めてCSSを弄っているので、無意味な記述・不要な記述が多いかもしれません。
テンプレを改造したり切り貼りしているのは(画像2・3枚目)の(“和田研中角ゴシック”と“Cabin”を使うCSS)この部分だけで、他は検索して自分で打っています。
webフォントの部分は徐々に直していこうと思い、放置していました。


>>それと、このCSSだとWebフォントが反映されているということでしょうか?
Webフォントが反映できていないページのCSSは今回載せていない……んですね?
多分、反映できてない方のCSSを見た方が早いです……。
webフォントが反映されているページは子ページです。
反映できていないページ載せていませんでした、すみません。

下記は、トップページ(メールボックのページ)のCSSです。
今見ると余計なことをしているのが分かります。
<style type="text/css">
@font-face
{
font-family: あおぞら明朝 Regular;
src: url('https://cdn.leafscape.be/aozoramincho/AozoraMinchoRegular_web.woff2')
format("woff2");
}
body {
font-family: あおぞら明朝 Regular;
background-color: #130930;
margin-top: 100px;
margin-left: 50px;
margin-right:50px;
padding: 0;
letter-spacing: 0.1em;
}
.c {
font-size: 90%;
letter-spacing: 0.2em;
}
.d {
font-size: 80%;
letter-spacing: 0.1em;
}
.e{
color: #f2eee7;
}
.f{
width: 230%;
color: #f2eee7;
font-size: 80%;
letter-spacing: 0.1em;
}
a:link { color: #f2eee7; }
a:visited { color: #f2eee7; }
a:hover { color: #837841; }
a:active { color: #f2eee7; }
a {
text-decoration: none;
}
.date {
font-family: あおぞら明朝 Regular;
display:flex;
align-items:flex-start;
font-size: 80%;
color: #837841;
}
.date:before {
border-bottom:3px solid #837841;
content:"";
flex-basis: 168px;
}
.all {
position: relative;
width: 150%;
margin: 40px 3%;
}
input[type='text'] {
font: 15px/24px sans-serif;
box-sizing: border-box;
background-color: #f2eee7;
width: 30%;
padding: 0.3em;
transition: 0.3s;
letter-spacing: 1px;
color: #aaaaaa;
border: 1px solid #837841;
border-radius: 4px;
}
textarea{
font: 15px/24px sans-serif;
box-sizing: border-box;
background-color: #837841;
width: 200%;
padding: 0.8em;
transition: 0.3s;
letter-spacing: 1px;
color: #aaaaaa;
border: 1px solid #f2eee7;
}
.button {
-webkit-appearance: none;
border-radius: 3px;
box-shadow:none;
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background:#130930;
color: #837841;
border: solid 2px #837841;
transition: .4s;
}
.button:hover{
background: #837841;
color: #f2eee7;
}
</style>
他のページも載せた方が宜しいでしょうか?


>>1)Webフォントの埋め込みソースは、各CSSに間違いなく入っていますね?
  @font-face
  {
  font-family: "あおぞら明朝 Regular";
  src: url('https://……省略……')
   format("woff2");
  }  ……とかの奴です。※Webフォントによって異なる
コピペをしたので間違いないと思います。

>>2)【CSSファイル編集】にて、使用するCSSファイルが『下記の内容のCSSを適用』になっていますか?
どのページもそのようになっています。

>>3)パソコンから見てもスマホから見ても、そのページはWebフォントになっていない状態ですか?
なっていません。パソコンはいつも拒否していますが、確認はしてあります。
また、フッターの部分を自分のホームページ名にしていますが、パソコンとスマホでは明朝とゴシックで違うのですが、これは直せたりしますか?デフォルトなのでしょうか?

>>4)使いたいWebフォント以外のフォントを指定する《font-family:……;》がCSS内に存在していませんか?
存在していません。とりあえず、webフォントが適用されるかどうかあおぞら明朝で試しているのと“和田研中角ゴシック”と“Cabin”を使っている部分はテンプレートをコピペしているので適用されていなくても問題ないです。あとで直します。

>>5)ページ内すべての文字をWebフォントにしたいですか? or 見出しや強調部分など、一部分だけをWebフォントにしたいですか?
分かる部分だけで結構なのでご確認いただければ……。
ページによって異なりますが、例えばトップページはリンクの部分を2種類のwebフォントを使用したく、小説などはページ全体を同じwebフォントにしたいです。

>>CSSというのは、基本的に『後に記述したものが優先』されます。
そうなんですね。そうしますと同じページに違うフォントを2種類以上使用するのは不可能でしょうか?


.b{
font-family: 1;
}
.c{
font-family: 2;
}

bodyはページ全体、一部だけ変えたいならその都度CSSを書くのは理解できました。
それでもwebフォントが適用されないのはなぜでしょうか?
他の記述が邪魔しているとかはありますか?

>>すみませんこのCSSはどこのCSSでしょう……?
1枚目に提示していたのとは別の子ページでしょうか?それとも小説などの別ページでしょうか……?
これはwebログノートのページです。

8
R iPad 2019/08/07 11:52
>>4
禁止ワードの件、ありがとうございます。
次回から気をつけます。

>>このmetaタグ、どちらも不要です。削除した方が良いかと……。
余計なことをしてましたね。削除させていただきました。ありがとうございます!

>>『サイト全体に適用できる【共通head間編集】と、小説やトップページなどそれぞれの編集画面にある【HEAD編集】を併用(=どちらのHEADにも何かを記述)していないか?』
意図を汲み取れず、申し訳ございません!metaタグを書いていたのはサイト全体に適用できる【共通head間編集】のみです。小説やトップページなどそれぞれの編集画面にある【HEAD編集】は何も書いていません。弄っていません。

過去スレ参照させていただきます!

7
しち Firefox 2019/08/07 04:49
>>6
画像添付し忘れました><
800×249PNG
53KB
800×399PNG
41KB

6
しち Firefox 2019/08/07 04:48
>>3
>>4>>5と続いてますすみません
>フォントに関してはページごとに変えていきたい
(A)ページ全体のフォントをWebフォントにしたい
(B)もしくは見出しやリンクなど、ページ内の特定の要素のみWebフォントにしたい
……のどちらでお考えかによって書き方は変わりますが、フォントの指定の仕方はもうちょっと簡潔な書き方にもできるので、例を置いときます。

【Webフォントの変更等がやりやすいCSSの例】
使いたいフォント・使いたい場所が以下である場合の例です。
* 使いたいフォント:あおぞら明朝 Regular
* 使いたい場所:(A)ページ内すべて
*        (B)ページ内の一部分(見出しなど)
上記の例でCSSを書くとしたら……

#(A)ページ内すべてを同じフォントにしたい場合
@font-face
{
font-family: "あおぞら明朝 Regular";
src: url('https://cdn.leafscape.be/aozoramincho/AozoraMinchoRegular_web.woff2')
format("woff2");
}
body{
font-family:"あおぞら明朝 Regular";
}

#(B)ページ内の特定の要素のみ、あるフォントを指定したい場合
*例として、「h1(見出し)」「b(強調)」「a(リンク)」にフォントを指定
@font-face
{
font-family: "あおぞら明朝 Regular";
src: url('https://cdn.leafscape.be/aozoramincho/AozoraMinchoRegular_web.woff2')
format("woff2");
}
h1,b,a{
font-family:'あおぞら明朝 Regular';
}

*※(A)(B)共に、↑以外の場所で《font-family:あおぞら明朝 Regular;》を書く必要はない
*※(A)(B)共に、↑以外の場所で意図無く《font-family:……;》と別のフォントを指定する記述をしないことが大前提(CSSのルールに則って意図してやる分にはもちろん可。一部分だけあおぞら明朝以外のフォントにしたいときとか)

>(A)−−−−−
繰り返しになりますが、ページ内すべてを同じフォントにしたいならbodyに指定したら基本的に十分です。
ただしその後に別のフォントを指定する《font-family:……;》を書くと上書きされてあおぞら明朝じゃなくなったりします。

>(B)−−−−−
複数のセレクタ(h1とかaとか)をカンマで区切って並べると、一括でスタイルの指定ができます。
なので『同じフォントを使う部分は先に纏めて指定しちまえ』という方法です。
もちろんこの後で h1{文字色やサイズ;} という感じに細かなスタイル指定を別にやれます。あくまで『Webフォントを使う《font-family》だけ』別のところで一括指定しよう、という書き方です。

添付画像が上記2つのCSSをそれぞれ適用させた結果です。

こうしておくと、例えば違うWebフォントに変更したいな……と思ったら、
*  @font-face……
↑といったWebフォントを埋め込むためのソース部分を書き換え、Webフォントを使用したい部分のCSSも↓
*  Webフォントを使用したい部分{
*  font-family:'○○○';
*  }
とフォント名を書き換えてやれば、ページ内のWebフォント使用部分が一気に新しいフォントになります。
2箇所の書き換えでページの雰囲気を変えられるので、この方が楽なんじゃないかと思います。
5
しち Firefox 2019/08/07 04:45
>>2
>>4の続きです。
>(画像1・2枚目)子ページのCSSファイル
率直に言って……一部分しか見ていませんが、Webフォント以外の部分にも無意味な記述・不要な記述があるように見受けられます……。
もしかしてテンプレを改造したり切り貼りしたりしていらっしゃいますか……?

それと、このCSSだとWebフォントが反映されているということでしょうか?
Webフォントが反映できていないページのCSSは今回載せていない……んですね?
#多分、反映できてない方のCSSを見た方が早いです……。
(禁止ワードはmetaタグだったようなので、CSSは普通に載せられるかと思います)
他、確認しておきたい事項を先に列挙します。

#1)Webフォントの埋め込みソースは、各CSSに間違いなく入っていますね?
  @font-face
  {
  font-family: "あおぞら明朝 Regular";
  src: url('https://……省略……')
   format("woff2");
  }  ……とかの奴です。※Webフォントによって異なる
#2)【CSSファイル編集】にて、使用するCSSファイルが『下記の内容のCSSを適用』になっていますか?
#3)パソコンから見てもスマホから見ても、そのページはWebフォントになっていない状態ですか?
#4)使いたいWebフォント以外のフォントを指定する《font-family:……;》がCSS内に存在していませんか?
#5)ページ内すべての文字をWebフォントにしたいですか? or 見出しや強調部分など、一部分だけをWebフォントにしたいですか?
分かる部分だけで結構なのでご確認いただければ……。

>【font-family:あおぞら明朝 Regular;】が書いてある部分だけを載せた
あおぞら明朝以外を指定している《font-family…》があったりしませんか?
CSSというのは、基本的に『後に記述したものが優先』されます。

なので、最初にあおぞら明朝を指定していても、それより後に
『font-family:'MS ゴシック';』とか、
別のフォントを指定されていればそれが反映されます。
ゆえにCSSはせめて《font-family》が書いてある部分すべてを抜き出す必要があります……。(すでにそういう意図で抜き出されていたものでしたらすみません)

>他のページを確認したところ、【body】にしか【font-family:あおぞら明朝 Regular;】を書いていませんでした
正しく《@font-face…》と《font-family…》が書けていればそれで正しいはずです。
body{……;} は、簡単に言うと『ページ全体』のスタイルを書く場所なので。そこにフォントを指定すれば、ページ全体のフォントがあおぞら明朝になるはずです。

#なので画像1・2枚目の子ページCSSは、何度も「あおぞら明朝 Regular」を指定しているのが無駄です。
*【ページ全体をこのフォントにしたいのなら→】body{……;}だけに書けば十分
*【h1(見出し)など一部分だけこのフォントにしたいのなら→】body{……;}にfont-familyであおぞら明朝を指定しているのが無駄。(h1{……;}だけに書けば十分なので)
*ここだけ見ると、どこにどのフォントを使おうとしているのか不明な感じです……。ページ内のすべての文字をあおぞら明朝にしたいということでしょうか?

ただし上述したように、bodyより下のところに《font-family:……;》と別のフォントを指定する記述があればそれが優先されてしまいますので、原因でないとも言い切れませんが……。
その場合はCSSをちゃんと書き直す必要があります。

>(画像2・3枚目)もう一つフォントが適用されているかは見た感じ微妙ですがありました
>(“和田研中角ゴシック”と“Cabin”を使うCSS)
すみませんこのCSSはどこのCSSでしょう……?
1枚目に提示していたのとは別の子ページでしょうか?それとも小説などの別ページでしょうか……?
こちらのCSSも、やはりちょっと不要なスタイル宣言が見受けられます……。
4
しち Firefox 2019/08/07 02:22
(禁止ワードはmetaタグっぽいですね。<meta……>というタグ全部、大文字交えて記載します)

>>3(画像4枚目)全ページのHEADに入れているmetaタグについて
このmetaタグ、どちらも不要です。削除した方が良いかと……。

ALICE+さんで自動的に挿入してあったり、今のHTMLの仕様では省略して良いものだからです。
> <meta charset="UTF-8">
ALICE+さんでは“Shift_JIS”を指定していますので、不要です。どうしても書き換えたいなら仕方ないですが、そのUTF-8だとガラケーユーザーが閲覧した際に文字化けする恐れがあります。(一部機種に限り、とのことですが…)
> <meta http-equiv="Content-Style-Type" content="text/css">
HTML5においてはこれがデフォルトなので、省略します。
(ALICE+さんはデフォルトだとHTML5になっているはずです。要するにいりません)
*※ALICE+さんでは【HEAD編集】の[□DOCTYPE宣言]という項目の中に
<!DOCTYPE html>
*と最初から入れてくれています。これが「HTML5ですよ」という宣言です。もし入ってなかったら↑と入れるのがオススメです。


それと、
>>3(画像4枚目)全ページ以下の内容になっています
というのは、【共通head編集】に↑のmetaタグを入れているということでしょうか?
すみませんこれは私の尋ね方がややこしかったです申し訳ないです…!

『サイト全体に適用できる【共通head間編集】と、小説やトップページなどそれぞれの編集画面にある【HEAD編集】を併用(=どちらのHEADにも何かを記述)していないか?』という意図でした。

それが駄目な行為というわけではなくて、
管理人さんが【共通head間編集】の内容が適用される条件を誤解したまま使用
→【共通head間編集】に書いた内容が反映されずデザイン崩れへ――
というケースをいくつか見たことがあったので、一応お尋ねしました。

例えば今回のケースだと、『【共通head間編集】にWebフォント埋め込みソースを書いていて、各【HEAD編集】には埋め込みソースがないままCSSを書いている』という事態が考えられました……(これだと確実にWebフォントは表示できません)。
がそういうわけではなさそう?なのでとりあえずご放念ください。
気になる場合は過去スレご参照をば→(『共通head間編集について』 http://bbs.alicex.jp/support/98/
3
R iPhone 2019/08/04 19:31
>>2
続きです
621×552JPEG
102KB

2
R iPhone 2019/08/04 19:31
>>1
なぜか禁止ワードで投稿できないのでスクリーンショットを載せます。
621×953JPEG
166KB
621×946JPEG
179KB
621×951JPEG
155KB

1
しち Firefox 2019/08/03 18:55
>>0
HTMLやCSSを見てないので断言できませんが……
Webフォントが適用されなくなる原因はこの過去スレ→(『解析が表示されない。フォントが一部変更出来ていない』http://bbs.alicex.jp/defect/57/ )のケースがまず考えられます。

このケースなら、Webフォントを埋め込むソースから『http:』を削除する/もしくは『https:』に書き換えることで解決します。
なおグーグル的には後者、『https: への書き換え』が推奨らしいです。

ALICE+でWebフォントが表示されなくなるのはこういうときです↓(下記はGoogle fontsの例)
*<link href="http://fonts.googleapis.com/css?family=●●●" rel="stylesheet">
または
*@import url('http://fonts.googleapis.com/css?family=●●●');

【HEAD】か【CSSファイル】にこうした埋め込みソースがあるかと思うので、『http:』を『https:』に書き換えてみてください。
書き換えてもWebフォントが表示されない/そもそも『http:』と書いてないなら、CSSかHTMLの方にミスがあると考えられます。font-familyの名前が間違っているとか……埋め込みソースの書く場所を間違えているとか……。

>子ページのみWebフォント適用、それ以外のページでは適用されない
>子ページと同じようにCSSを弄ってもダメ
CSSというのは【CSSファイル】でしょうか?それとも、【HEAD】内に<style>で入れているCSSでしょうか?
例えば子ページ以外のページはWebフォント埋め込みソースが入ってない/埋め込みソースの記述が正しくない……ということはないでしょうか?
あとは、【共通HEAD】とそれぞれの機能ページの【HEAD編集】を併用しているとか……。

CSSファイル・HEADが分からないので分かりませんね。
そのWebフォントが適用されてないページの共通点が分かると類推しやすいのですが……。【共通HEAD】を使ってるとかトップページのCSSを適用してるとか、何か共通点はありませんか?
もしくは子ページにだけこういうことをしている、とか……。
1ページ中1ページ目

Back to Top