新バージョン el plano(Ver.1.1.3.6)での『源ノ角ゴシック(Source Han Sans)』Webフォントを設定する

この記事で紹介しているテーマは、100%GPLではないテーマです。WordPressコミュニティは、100%GPLライセンスを推奨しています。私も、現在は100%GPLライセンスのテーマのみを推奨しています。100%GPLテーマの記事はこちらです。

この記事は2年以上前に公開された記事です。情報が古くなっています。現在は状況が異なる可能性があります。

GoogleとAdobeの共同開発で生まれたオープンソフト フォント 『源ノ角ゴシック(Source Han Sans)』を、”ものくろぼっくす”(Webフォントに設定して)の表示フォントとしています。

ものくろ的には気に入っています。読みやすいなぁと、自画自賛ですけど。

そんなグッド!なブログだぜって思っていたのですが、テーマであるel planoをアップデートしたら、設定が無効になってしまい、、、あれ?と。

再度、Webフォントの設定をしたので、まとめました。el plano の『Ver.1.1.3.6』以降の場合の設定方法です。

CSSのファイルバスが変更

新しいel planoでは『オリジナルスタイルシート設定が格納されているCSSのファイル 保存場所』が変更になっています。

以前は『 wp-content > themes > dp-elplano > css 』の中に保存されていました。新しいバージョンでは『 wp-content > uploads > digipress > el-plano > css 』の中にある『visual-custom.css』に、オリジナルスタイルシート設定が格納されています。

オリジナルスタイルシート設定

バージョンアップでスタイルシートの場所が変わり、CSSに書いてある”Webフォントを探しに行ってくれー”という場所指定(ファイルパス)が、ずれてしまってフォントを見つけられなくなったんです。

オリジナルスタイルシートはそのまま

トラブルを解決するには、スタイルシートに書いてあるWebフォントがある場所を修正するか、Webフォントの保存場所を変更するか?どちらかの作業が必要です。

つまり、スタイルシートからWebフォントを見つけられる状態にすればいいんです。Webフォントをサーバーへ再度アップロードする方が簡単なので、CSSの”記述”はそのままにしておきます。

css

Webフォントを再アップデート

『wp-content > uploads > digipress > el-plano > css』の中に『webfont』フォルダを作成し、WebフォントのSourceHanSansJP-Light.woffをアップデートします。

SourceHanSansJP-Light.woffの入手方法はこちら のエントリーを参考にしてください。

これでOKです。ブログをリロードし”源ノ角ゴシック”で文字が表示されているのを確認します。

関連記事


この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

広告

あわせて読みたい

記事のタイトルとURL をコピーする!

広告

新着記事

著者プロフィール

ものくろ(大東 信仁)

ブロガー/Web&Blogコーチ/親指シフト orzレイアウト開発者/ものくろキャンプ運営。のべ1,000名のブログサポートに携わる。WordPressが得意。

Facebookを使うノウハウ公開中

農家・フリーランス・経営者向け SNS使いこなしセミナー (2018年1月版)の内容を全文公開中!

無料 メルマガ発行中

運営しているものくろキャンプの講座・イベント開催情報や、ちょっと役立つ情報をお届けしています。

ほぼ毎日発行しています。

Web・Blogコーチのご依頼はこちら

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。

  • Webを活用して本気でビジネス・人生を切り開きたい方
  • Webのテクニカルな改善でお悩みの方
  • アイディアはあるのに、記事の文章にするのがうまくいかない方
  • 親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みも見つけます。

ダイレクトにアドバイス。そして、ご自身の問題解決力を手にしていただく時間を。このブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

ものくろキャンプ Web・Blogコーチ セッション

お申し込みはこちらのお問い合わせフォームからお願いします。

お申し込みはこちらのお問い合わせフォームからお願いします。

ものくろキャンプ イベント案内

ものくろキャンプの開催スケジュールはこちら

広告