bootstrapを導入後、フォントがきれいでなくなっていた件を修正

twentyfourteen子テーマでフォントを変えてみる

でブログで使っているWordPressサイトのフォントを変更しました。

その後に気づいたのですが、メインサイト http://ryus.co.jp のフォントがいつの間にかなんかきれいじゃない!?

Image

あれ?おかしいな。。。最初にデザインしてもらったときはもっときれいなかんじだったような。と思ってフォントに何が使われているのかを調べました。

font-familyに日本語フォントの指定がなかった…

私が使っているchromeでは ctrl+shift+i でデベロッパーツールが開きます。
body の所を見てみるとこんな感じでした。

Image

おかしいな、確かフォントはクラスでしてしていたのに。。とこの指定をどこでしてるかを見ると、

Image

あう!なんと、bootstrap.cssでbodyの指定がされていました。

そういえば以前formのボタンをbootstrapのものにしたくて入れたことがあったけれど、そのときにbodyとかの指定もこちらが優先されていたようです。

bootstrapのbody指定を削除する!?…ではなくて…

RYUSサイトの場合、ちゃんとbodyの指定を考えてもらっていたのでそちらを生かしたいと思います。そのために、bootstrap.cssのbody指定を削除しました。

で修正してみました。結果的にそれで表示はきれいになりました。

…しかし、ちょっと気になりました。bootstrap.cssを直接いじるのではなくて後から指定したいデザインを上書きしたいなぁ、と。

そうしておけば、bootstrapのアップデートがあったりしたときでも対応出来るのではと思います。

XOOPS Cubeの場合、style.cssは一番最初にシステムで読み込んでいるようなのでtheme.htmlに書いてあるbootstrap読み込み行をどこに書いても上書きできそうにありません。

そこで、テーマのstyle.cssにimportする方法にしてみました。使っているテーマフォルダの

1.theme.htmlを修正

bootstrapを読み込んでいるこの行を削除する。

2.style.cssでbootstrap.cssをimportする

冒頭をこのように変更してみました。

修正結果はこんな感じになりました!

Image

XOOPS Cubeでbootstrapを使いたいときは

bootstrapは色々便利なcssフレームワークです。今後も使って行きたいと思いましたが、今回のようなことがないようにするには、と考えました。そして結論としては、XOOPS Cubeでbootstrapを使いたいときは使いたいテーマのstyle.cssの頭でimportする、という方法が良いと思われます。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る