質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

299閲覧

wordpressで作ったサイトのアイコンが表示されなくなった

ryoo_chksl

総合スコア69

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/04/04 11:45

現在wordpressを使ってサイトを作っています。

今日の話なのですが、サイトを作っている途中のどこかのタイミングで、サイトのヘッダーにある検索ボタンやメニューボタン、Twitterのアイコン、wordpressの管理バーのアイコンが表示されなくなり、代わりに「□(スマホでサイトを見ると☒)」が表示されています。

F12を教てその部分のコードを見てみると、いずれにも「::before」と書いてありました。

アイコンを正しく表示させるにはどのように改善すればいいのでしょうか?

今作っているサイトです

https://chksl01.com/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

CSSをカスタマイズするプラグインか何か使ってませんか?
ここが原因です。

css

1 /*フォントをメイリオに変更*/ 2*{ 3font-family: "メイリオ", Meiryo, Osaka, sans-serif !important; 4}

投稿2018/04/04 12:07

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryoo_chksl

2018/04/04 12:13

そのようなプラグインはいれていないはずです。 しかし、テーマはlionmediaを使っていて、「外観」→「カスタマイズ」→「追加CSS」から確かにそのコードを僕が追記しました。 それを消したら治りました! ただ、フォントをメイリオにしたいのですが、その場合はどのように追記すればいいのでしょうか。 質問内容が変わってしまい申し訳ないです。
defghi1977

2018/04/04 12:13

ああ、多分これですね. フォント設定を上書きしちゃっている
defghi1977

2018/04/04 12:31 編集

> ただ、フォントをメイリオにしたいのですが、その場合はどのように追記すればいいのでしょうか。 質問内容が変わってしまい申し訳ないです。 もっとテーマのCSSを読み込んで適切な箇所に手を入れないと今後も似たような問題が起きますよ. 特に!importantでスタイルを上書きするのは最終手段です. (style.cssにbody要素に対するfont-family設定があるから, ここを書き換えてみたら如何でしょう?)
Lhankor_Mhy

2018/04/04 12:32 編集

普通に body{ font-family: "メイリオ", Meiryo, Osaka, sans-serif; } じゃダメなんですか?   lionmediaの子テーマを使っているようですが、ググったらCSSのカスタマイズ法がありましたので、URLを張ります。 https://mutakko.info/post-1210/ 子テーマのCSSの方が後に記述されるので、優先されると思います。たぶん。
ryoo_chksl

2018/04/04 14:04

>defghi1977さん !importantが何かもよく分からずに、調べて出てきたコードをコピペしてました。ご指摘の通り書き換えてみます。 回答していただきありがとうございました!
ryoo_chksl

2018/04/04 14:07

>Lhankor_Mhyさん 教えていただいたコードで大丈夫です! !importantをいれたコードにしていたのは、調べたらそれが出てきたので、単にコピペしていただけなので。 サイトのアイコンの表示異常だけでなく、フォントの変え方まで教えていただきありがとうございました。
guest

0

下記の推測は直接的な原因ではありませんでした.


察するにicon.cssにおけるicomoonで作成したアイコンフォントへの参照がうまく行っていません.

CSS

1@font-face { 2 font-family: "icomoon"; 3 src: url("../fonts/icomoon.eot?gizg5m"); 4 src: url("../fonts/icomoon.eot?gizg5m#iefix") format("embedded-opentype"), 5 url("../fonts/icomoon.ttf?gizg5m") format("truetype"), 6 url("../fonts/icomoon.woff?gizg5m") format("woff"), 7 url("../fonts/icomoon.svg?gizg5m#icomoon") format("svg"); 8 font-weight: normal; 9 font-style: normal; 10}

上記に記載されているフォントファイルが正しくサイトに存在する(もしくはアクセスできる)ことを確認して下さい.

投稿2018/04/04 12:12

編集2018/04/04 12:15
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問