ご利用の Internet Explorer は古いブラウザで Microsoft社も利用は危険であると発信しています。このウェブサイトも Internet Explorer での表示は保証しておりません。, 最新のモダンブラウザ(Microsoft EdgeやGoogle Chromeなど)をお使いください。, ヘッダーロゴ、グローバルメニュー、タイトル、テキストの4つの項目でそれぞれフォントスタイルを変更できます。, 【 カスタマイザー 】>【 Lightning フォント設定 】から設定してください。, Google Fonts の日本語フォントを使いたいという要望がありましたので、Lightning Pro 0.7.0 で対応しました。, 今まではメニューのフォント指定について、ヘッダーのグローバルメニューしか指定できませんでしたが、Lightning Pro 0.8.0からグローバルメニューのサブテキストは別のフォントが指定できるようになりました。, また、モバイルメニュー / モバイル固定ナビのフォントもグローバルメニューに指定したフォントが適用されるようになしました。, シンプルでカスタマイズしやすい 「ユーザーは絶対ここにウィジェットを入れます!」と確信して作ってるのでしょうね。, でも、私は入れませんw ◇phpファイルをいじる方法 消して大丈夫です。 邪魔者は消しましょう。, 他の方法としては、 【コピペでOK】WordPressのカスタマイズ集21選【ほぼ必須のカスタマイズあり】. この記事で使った画像: Image.zip ロゴ画像を設定する. (ちなみにWindowsなら7-zipを使うのがオススメ), この拡張子がついているファイルがフォントを変更するのに必要になるので確認してください。拡張子は「.ttf」や「.woff」になっていることが多いと思います。, では次にWordPressでフォント管理を行える Font Organizer というプラグインをインストールしましょう。その手順は次の通り, そして新規追加画面からプラグイン名で検索すると次のプラグインが見つかるのでに「今すぐインストール」を押してインストールしてください。, https://ja.wordpress.org/plugins/font-organizer/, あとインストールが終わったら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、それを押すのも忘れずに, Font Organizerでは「設定」ー>「Font Settings」から設定画面を開けます。, その中に次のような「Custom Fonts」という項目があるのでそこでダウンロードしたファイル(.ttfなど)をアップロードしてください。, 「Font Weight File」というところで「ファイルを選択」ボタンを押し、ダウンロードしてきたフォントファイルを選択してください。, 「Font Name」には任意の分かりやすいフォント名を入力、そして「Upload」ボタンを押すとサーバー上にフォントがアップロードされ利用可能になります。, 実際にフォントをサイト全体に適用するには「Known Elements Settings」の「 Font」からアップロードしたフォント名を選び、下の方にある「変更を保存」ボタンを押すとフォントが反映されます。(下画像参照), もしフォントを変更したのに反映しないというときはChromeブラウザなら「Shift+F5」でキャッシュを削除して更新すれば変更が反映します。, もちろんブログ全体ではなく、h1タグやpタグなどタグごとにフォント設定することも可能。そこは好きなように試してみてください。, 「Manage Fonts」からアップロードしたフォント名を選び、「Delete Font」ボタンをクリックするとサーバー上からフォントファイルが削除され元に戻ります。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, 自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします, 「WordPressは難しい」、「ブログ初心者には向いてない」・・・こういう固定観念を捨てればWordPressほど効率よく記事編集できて安全にブログ運営できるツールはありません。Let's ワードプレス!, 「やることが多くてブログを継続できない」、「中々成果が出なくて挫折しそう」・・・こういう方に役立つブログ更新を継続するコツ・挫折しないためのブログ術をまとめました。, 昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。, 自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします。好きな言葉は「不言実行」「千里の道も一歩から」. WordPress Popular Postsを記事内に表示する時のカスタマイズ法, おしゃれなリンクボタンが簡単に作れるWPプラグイン「MaxButtons」の使い方, WordPressを一発でhttps化!Really Simple SSL の設定手順, 記事をグリッド表示できるWPプラグイン「The Post Grid」の使い方を解説, 複数ウィジェットを簡単コピー!WP Widget Clipboardを公開しました – Ver1.2.15. icon-clock-o2017.9.4 icon-refresh2017.10.28 また、レイアウトが崩れてしまった等の結果についても自己責任でお願い致します。, 「/」は閉じタグと言われ、「/」無しのタグで始めて「/」付きのタグで閉じるのが基本。, このソースを見てみると 解説記事. 現在は有料テーマのSANGOを使用しており、デフォルトのフォントですが、以前はフォントをいじって見やすいサイトにしていました。, フォントを変更することでブログのテーマに合わせた印象に変えることが簡単にできますので、是非試してみて欲しいです。, 記事の前半ではフォントの変更方法、記事の後半では文字の色や大きさの変更方法について書いていきます。, ConoHa Wingで提供されている無料のフォントを使用する方法(有料の物が無料で使える), WordPressのCSSのfont-family{..., ..., ...}の部分を変更するだけです。, 私の場合、最初にかわいげなフォントを検索して、設定してみたものの、全く変わらないということが起きました。, これを解消するためには、フォントファイルをどこからかとってくる必要が出てくるわけです。, 日本語フォントは普通読み込みが遅いものなのですが、このサイトのフォントならば読み込み速度も速いので、サイトが遅くなるということもないためおすすめです。, 文字(テキストの部分)をクリックすることで自由に書き換え/フォントサイズの調節などもできます!, 気に入ったフォントのタイトル(+ボタンも可)をクリックすると次のページに飛びます。, style.cssの一番上に、オレンジ色で囲った部分をコピペします。 の部分は必要ありません。, 次に、取り入れたフォントを全体で使用するために青色で囲った部分を以下の部分にコピペします。, となっている部分のfont-familyの所を青色で囲ったコードに書き換えれば全体に反映されます!, 記事全体のフォントが書き変わるので、変更後はざっとみてイメージ通りか見てくださいね。思わぬ部分も変わっている可能性があります。, CSSを変更したのにフォントが変わらないという場合、以下の原因があるので探ってみてください。, 現在国内最速と言われているサーバーであるConoHa WINGでは、「モリサワWebフォント」が提供する「TypeSquare」から33書体無料で利用できます。, 3ドメインのみ使用でき、月間75000PVまででの使用が目安のようなのですが、設定方法も簡単です。, ConoHa WINGのサーバーを私も使用しているのですが、以前使っていたロリポップと比較してページの表示速度も大きく変化しましたし、管理画面での操作のスピードもサクサク動くようになりました。, その結果、回遊率も上がりPVも増えましたので、乗り換えてフォントも新しくする!というのもアリです。, ConoHa WINGは乗り換え用のツールがあるので、乗り換えもかなり簡単でした!, せっかくなら、この機会にフォントだけでなく、フォントのサイズ・色も変えてみましょう。, 変え方は、同じくstyle.cssにて、pタグとbodyタグの部分を以下のコードに書き換えるだけです。 style.css内でctrl+Fを押して文字検索をし、pタグとbodyタグに関する設定の部分を探し、以下のように書き換えましょう。, bodyタグでサイト全体のフォントの大きさを17pxに指定(16~17pxが見やすい)し、pタグの文字の大きさも同じになるよう、1emにしています。 単位が違いますが、どちらも同じ文字サイズです。, これで、一気に見やすくなると思います。文字の大きさも大きくなり、行間や段落の間も大きくなって見やすくなります。, 色を選択する際には原色大辞典が一番見やすいと思います。 少し灰色にするのがポイントで、真っ黒(#000)よりも目に優しくなります。, フォントを変えようと思ったときにうまくいかずに悩んでいる人もいたのではないでしょうか。, 「読まれるサイト」は「見やすいサイト」だと思っていますので、これからもちょくちょく見やすくできるように工夫を凝らしていこうと思います。, Web系エンジニアのうさぎ。 プログラミング・ブログ運営・生活の質を高める方法やお金に関する知識(FP2級取得済み)を書きます。 「ひょんなことから」なにかを始めたい人に役立つ記事が書けたら幸せです。. ◇Mac(Mavericks以降):游ゴシック souken, 「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。, *Lightning – シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ, *北福岡歯科クリニック | 北福岡駅より徒歩2分の痛くない歯医者 WordPressでサイトを運営している人の中には、文字サイズを簡単に変えられるようにしたいという人も多いでしょう。デフォルトの文字サイズだけではメリハリがなくて読みにくい文章となり、その結果ユーザーにコンテンツを読んでもらうことも難しくなります。 WordPressテーマ「Lightning」をカスタマイズ(その3)フォントの変更・クレジットの非表示 icon-clock-o 2017.9.4 icon-refresh 2017.10.28 WEBデザイン souken ツイート プラグインやウィジェットの使い方がわからない場合、まずは設定ガイドのページをご確認ください。, Lightningをコンテンツマーケティングやメディアサイトとして活用するためにデザインと機能を強化したのが有料の拡張デザインスキン「Variety(ヴァラエティ)」です。. るーしーです。 今日は2018年2月18日に緊急でお伝えした「Quick Adsense(クイックアドセンス)のバージョンアップ」についてです。 ver2.1にバージョンアップすると設定 ... こんにちは! The following two tabs change content below. テーマの子テーマを使用していれば、親テーマをアップデートしても上書き(追記分がなくなる)はされません, 2017年11月16日:膠原病(こうげんびょう)の外来検査1:血液検査・レントゲン, 2017年12月始め:膠原病(シェーグレン症候群・全身性エリテマトーデス)の検査入院, 【初心者向け】で簡単にデフォルトフォントサイズ、行間、文字間を変更するCSSの操作方法をご紹介, 全く同じ文章、HTMLのタグでもCSSの定義が異なれば皆さんの画面に表示されるデザインは異なります。, 使っているWordPress(ワードプレス)のテーマによってCSSの定義が異なるから, 作業をする直前の状態であるstyle.cssファイル内容をバックアップできました。, テーマを最新バージョンに更新すると追記した分が全て無くなるのでバージョンアップしたら再度追記, WordPress(ワードプレス)のパーマリンク設定を「%postname%」にすべき理由, 【ワードプレス】Quick Adsense(クイックアドセンス)の再バージョンアップがきたぞ!!, WordPress(ワードプレス)のデータバックアップを「BackWPup」で簡単に行う方法, All in One SEO(オールインワンSEO)の設定でカテゴリー記事一覧をインデックスさせる方法. 「Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. technology.」 今回は「WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法」についてです。, 局所的なフォントサイズ変更ならエディタで簡単に出来ますがデフォルトのフォントサイズを変えるのはCSSを操作した方が良いと思います。, やり方は色々とありますが【初心者向け】で簡単にデフォルトフォントサイズ、行間、文字間を変更するCSSの操作方法をご紹介します。, 実行前にCSSファイル(使用テーマのstyle.css)のバックアップを必ず行ってください。 ◇CSSで消す ◇スマホ・タブレット:OSのデフォルトフォント, メイリオって嫌いじゃないけど、あの丸っこい感じがなんとも軽々しくて、真面目なサイトや重々しい法人サイトなどでは不向きだと思います。, たまに士業の堅物サイトなどでメイリオで表示されているところを見かけますが、いかにもチグハグで残念な感じを受けますね。, 逆に、ノリが軽妙なサイトや、可愛い系のサイトなどでは向いてると思います。 BootstrapベースのWordPress.org登録テーマ. こんにちは! 「フッターウィジェットエリア3」 これらが左・中央・右と平行3列に入るエリアです。, そもそも何も入れない場合は、自動的に非表示にしてくれればいいのにね・・ これを最近の歯科サイトに多い、淡い明るい色に変えたいと思います。, ここにはウィジェットエリアの3つ、 WEBデザイン というLightningのクレジット表記があります。, 「いやいや、消して大丈夫なの?」というそこの貴方! ◇Mac(Mountain Lion以前):ヒラギノ角ゴシック WordPressをインストールしてLightningを適用したばかりのサイトは、トップページが下記のように … LightningもWordPress自体もGPLライセンスなので、こういうのは表示しなくて問題ありません。 ヘッダーロゴ、グローバルメニュー、タイトル、テキストの4つの項目でそれぞれフォントスタイルを変更できます。フォントスタイルは明朝体とゴシック体、游ゴシックから選択できます。【 カスタマイザー 】>【 Lightning フォント設定 】から設定してください。 WordPress(ワードプレス)のフォント変更をする方法は、FTPソフトを使用したり追加CSSを編集するなど複数あります。 ここではその方法について、画像付きで丁寧に説明しています。 2018/5/4 たとえば当ブログもWindowsで見ると「メイリオ」で表示されます。, で、この歯科サイトでは真面目さを重視して、フォントは「游ゴシック」をメインにしたいと思います。, ◇Windows8.1及び10:游ゴシック ということは、h4のHTMLタグが付いた文字だけ表示が変わっていたんですね。, その為、全く同じ文章、HTMLのタグでもCSSの定義が異なれば皆さんの画面に表示されるデザインは異なります。, 今回はCSSでpタグに囲まれたフォントのサイズ、行間、文字間を変える設定をします。, そうする事でpタグに囲まれたフォントは全てサイズ、行間、文字間が変わります(例外あり)。, 段落として定義されている部分全てpタグが入っている(はず)なのですがどうなるかは実物を見た方が早いと思います。, ファイル名は中身が何かわかればいいので、「20180201バックアップしたスタイルシート.txt」等で大丈夫です。, 「.txt」は拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。, これで今回作業をする直前の状態であるstyle.cssファイル内容をバックアップできました。, 以後の操作でレイアウトが崩れてしまった場合は、現在使用しているテーマのstyle.cssファイルへ今回作成したバックアップファイルの内容をコピペすれば復旧しますので大事に保存してください。.