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

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

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

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

Q&A

解決済

2回答

2446閲覧

Wordpress内のソース・コードのバックスラッシュを円マークで表示したい

Chironian

総合スコア23272

WordPress

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

0グッド

0クリップ

投稿2017/01/12 09:27

ソース・プログラムを表示する時、SyntaxHighlighter Evolvedを使っているのですが、この中で円マークがバックスラッシュで表示される問題を解決できません。

preタグで出力されるようなで、CSSカスタマイズでpreタグのfont-familyを指定してみましたが反映されません。
¥を使っても、そのまま¥などと表示されます。
何か良い方法はないでしょうか?

SyntaxHighlighterに拘わりはありませんので、ソース・コードをお手軽に記述して綺麗に表示されるものなら他のプラグインでも問題ないです。

なお、Wordpressのbody部分なら、bodyのフォントを日本語フォント指定することで円マークを表示できました。しかし、問題はソース・コードなのです。

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

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

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

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

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

guest

回答2

0

ベストアンサー

【SyntaxHighlighter Evolved — WordPress Plugins】
https://ja.wordpress.org/plugins/syntaxhighlighter/

使用されているのが上記プラグインであれば、等幅フォントを指定するために !important を設定されているため上書きできない&preではなくcodeで表示されているのでは?

CSS

1html .syntaxhighlighter code { 2 font-family: "MS ゴシック" !important; 3}

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/01/12 16:03

kei344

総合スコア69366

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

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

Chironian

2017/01/12 16:57

回答、ありがとうございます。 まず、使っているものはおっしゃる通りSyntaxHighlighter Evolvedです。 そして、できました!! しかも、CSSカスタマイズでできるのでSyntaxHighlighter Evolvedのアップデートにも安心ですね。これは有り難いです。 デベロッパー・ツールの画面初めてみました。随分強力そうなツールですね。その使い方の紹介ありがとうございます。
guest

0

wp-content └plugins └syntaxhighlighter ├syntaxhighlighter2 │ └styles └syntaxhighlighter3 └styles

上記位置のstylesフォルダ2つに、shCore.cssというファイルがあり、
その中の54行目あたりに font-familyの指定がありました。
2つファイルのどちらがいつ使われるものなのかよくわかりませんが、
とりあえず両方のファイルで font-familyの先頭に Meiryo等を指定してやると
円マークで表示されるようになりました。

投稿2017/01/12 15:35

oika

総合スコア425

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

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

Chironian

2017/01/12 16:12

回答ありがとうございます。 2つのshCore.cssのfont-familyの記述も見つけることができたのでMeiryoに変更してみたのですが、変更されませんでした。 検証はchromeを使ってたので、ふとfirefoxでやってみたら、円マークに変わってました。 う~む、ブラウザ依存がどこかにあるのですね。 試しにfont-weightをboldにしたら、firefoxは反映されるのですがchromeはダメでした。 メジャーなブラウザでは解決したいので頭痛いです。何故ブラウザ依存するのか分かると助かります。
kei344

2017/01/12 16:35

WordPressのプラグインファイルを書き換えてしまうとアップデートの際に上書きされるため、あまりお勧めしません。 > chromeはダメでした。 デベロッパーツール(F12を押すと出てくる)を表示した状態で「再読み込みボタン」右クリックすると、キャッシュを破棄して再読み込みすることができるので、一度それを確認されてみてはいかがでしょうか。 【【Chrome】ブラウザの頑固なキャッシュを完全に削除するスーパーキャッシュクリア方法 | CMSマニュアルサイト】 http://cms.aiosl.jp/manual/kowaza/1077/
Chironian

2017/01/12 17:02

chromeのキャッシュには時々ハマってましたので、ツールの設定を変えて表示が変わることを確認しつつやってました。なのでキャッシュ問題ではないと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問