こちらの記事と、他のいろいろな記事をつなぎ合わせて、正しいと思うソースコードをstyle.cssに張り付けて、 正常にサイトタイトルのフォント変更ができ、やっと解決できました。 正しいソースコード この記事にかいてあることはこんなことだよ♪. Learn how to change font, font size, and font color in WordPress! 文字色、大きさ、フォント、背景色など様々なデザインが可能です。 このサイトでは、ヘッダータイトル文字を非表示にしています。ヘッダー画像のみですよね。そこに画像としてヘッダータイトルを表示させているのです。 フォントサイズ、行間、文字間が変わったか確認. ¨é›†ç”»é¢ã§ã€è¡¨ä½œæˆãƒ„ールが追加されていることが確認できる。 フォントサイズを変更するには・・・ 前述のようにWordPressでは、デフォルトではフォントサイズがh1～h6タグしか … やることは先ほど紹介したコードを貼り付けるだけですので、ぜひチャレンジしてみてください。, このサンプルコードは、解像度が960pxの場合にフォントサイズを18ピクセルにするという内容です。つまり960以上以上の場合は、これまで通りのフォントサイズで表示する（変更無し）という記述です。, サンプルコードを先ほど同様に追加CSSに貼り付けます（外観→カスタマイズ→追加CSS）。, サンプルコードはPCとスマホを想定したものですが、それ以外にもタブレットでは別サイズにするといった仕組みも可能です。, フォントサイズをCSSで調整する方法を紹介しました。 ワードプレス、シスコシステムズ社製ネットワーク機器担当。, WordPress(ワードプレス)のカスタマイズ専門会社ワードプレスカスタマイズネット。ホームページ・Web制作会社・デザイン会社向けワードプレス構築外注サービス. ¦ä¸Šå´ã®ãƒšãƒ¼ã‚¸ã®è¦‹æ „えが変わります。 影もちゃんとついていますね。 フォントサイズ 2.2 vw と書いてありますね。 フォントサイズ… その名前の通り、この数字を変更すると 文字の大きさが変えられます。 数字を大きく すれば、 文字が大きく なります。 あたりまえですか … もしタイトルのフォントサイズを大きくしたい場合は、19や20などより大きな数値に変更しながらタイトルの文字サイズを調整してください。, 初心者の方で、デベロッパーツールの使い方が不明だったりHTMLコードに関わりたくない方は以下のサンプルコードをお試しください。, ダッシュボードにログインし左側に表示されるメニューから「外観」→「カスタマイズ」を選択（下記図参照）。, 以上、作業完了です。フォントの大きさはCSSコード内のfont-sizeの数値です。サイトタイトルを大きくしたい場合はより大きな数字をfont-sizeに指定しましょう。, 「外観」が表示されていない場合、WordPressのデザインを変更する権限が足りない可能性があります。管理者権限でログインし再度、表示を確認しましょう。, タイトルのフォントサイズが変更されていない場合はブラウザのキャッシをクリアしながら確認しましょう。, 「キャッシュ」とは、インターネット閲覧時に使うブラウザ上に保存されるデータのことです。, サイトを閲覧する時、ブラウザはサーバー上のデータを見に行くのが普通です。ですが、同じサイトに短期間にアクセスしようとするとブラウザはサーバーにアクセスせずに、自分が保存しているデータを表示させます。ブラウザが自分で保存しているデータをキャッシュと呼びます。, 今回のような変更作業をすると、ブラウザはキャッシュを表示してきます。 wordpressで現在サイトを作成しています。サイトのヘッダーに表示されるサイトタイトルのフォントを変更したいのですがうまく変更できません。 私が行った方法は以下の通りです。 webで使用したいフォントのttfファイルをサーバー上の以下に配置しました。 wp/wp-content/themes/ ワードプレスのブログの記事を書いていくときに、初めてだと悩んでしまうのが、フォントサイズや文字色の変更です。文字の背景色なども簡単に変更できるプラグイン「TinyMCE Advance」の使い方を紹介します。 WordPressのプラグインの中で必ず入れておいたほうが良いプラグインです。 まとめ. ¦å³ã•ã‚Œã‚‹ã¨è¨€ã£ã¦ã‚‚過言ではありません。さらにはページの雰囲気も決まってきます。 Twenty Elevenで固定ページのフォントサイズを変えるには . WordPress(ワードプレス)のカスタマイズ・外注制作・作成専門・ホームページ制作会社, [:ja]【3分で解決】WordPressテーマの通貨表示$(ドル)を¥(円)にする簡単な方法[･･･, All-in-One Migrationインポート制限を解除【アップロードファイルサイズの容量制･･･, 【解決】BizVektorをPHP7にアップグレードしたらエラー「Fatal error:bre･･･, WordPressプラグイン「User Photo」で画像サイズを自由に変更する方法, 美容院・サロン向けWordPress有料テーマ【予約機能付きデザインがオシャレなおすすめテーマ】, WordPressでSEO対策ってどうやるの？自分で出来るサイトのアクセスアップ手順, 360度バーチャルツアーをWordPress無料プラグインで作成してみた【VRツアー制作】, 在庫管理・商品管理システムを構築する無料プラグイン「WP Inventory Manager」, WordPressブログに360度カメラの画像を埋め込むプラグイン【THETA、GoPro等】, 【ゼロから始める】副業ブログで月5万円を稼ぐ！当社スタッフが試してみた方法と成果を公表. WordPressの見出しはフォントサイズの大きさによって1番から6番まであります。 大きい見出しを使うほど本文との区別がついてわかりやすいだけでなく、適切に見出しを指定することでGoogleもそのコンテンツをより適切に評価できるようになります。 こんにちは！エンジニアのノムラです。 突然ですが、 「サイトのデザインを変えてみたけど、なんかしっくりこない」 「今のデザインに違和感を感じる」 と困っていませんか？ そんな時はサイトのフォントを変えてみましょう。 この記事では、 【基礎】Webフォントとは？ ‍, インラインコードの使用により多少サイトの読み込み速度を速くすることができることもあります, 同意のクッキー、同意しないクッキーを設定いただきますと、ここにその設定を保存し、お客様が同意しなかったものをお見せしないようにします。, WordPressは、ログインしたユーザーをトラックし、設定されたユーザー設定をWordPressユーザープロファイルに保存するクッキーをいくつか使用します。Kinstaのウェブサイトのメンバー（スタッフのメンバー）のみが対象になります。, Stripeは当社の支払いプロバイダであり、詐欺防止またはその他の課題に役立つクッキーを設定することがあります。これらは当社の支払いが機能するのに必要です。, このクッキーには、訪問者を紹介したアフィリエイトに関する情報が含まれています。クッキーには、訪問者に関する情報は一切含まれていません。, 視聴者に面白いコンテンツを提供するのにはAnalyticsを使用します。 当社は、IPを匿名化することにより個人識別情報（PII）が送信されないことを確認しました。, Googleが設定し、使用しています。コンテンツのA/Bテストを行うことにより、訪問者に最も必要なものを提供しているかどうかが確認できます。, ニュースレターに登録すると、ニュースレターの登録ボックスが削除されます。このクッキーには、サインアップしたかどうかの情報だけが含まれ、個人データは含まれていません。, Twitterにより設定かつ使用されます。広告の対象を設定することに、またはkinsta.comにアクセスしたユーザーへのコンテンツプロモーションに使用されます。, kinsta.comにアクセスしたユーザーへの広告のリマーケティング、パーソナライズ、およびターゲティングの為に、Google Adsにより設定かつ使用されます。(, Hubspotにより設定かつ使用されます。Facebookにより、kinsta.comにアクセスしたユーザーへのコンテンツのプロモーションまたは広告の対象を設定することに使用されます。Hubspotにより、当社に連絡するkinsta.comへの訪問者をよりよく支援できるようにすることに使用されます。, LinkedInにより設定かつ使用されます。広告の対象を設定することに、またはkinsta.comにアクセスしたユーザーへのコンテンツプロモーションに使用されます。, G2により設定かつ使用されます。広告の対象を設定することに、またはkinsta.comにアクセスしたユーザーへのコンテンツプロモーションに使用されます。, Redditにより設定かつ使用されます。広告の対象を設定することに、またはkinsta.comにアクセスしたユーザーへのコンテンツプロモーションに使用されます。, Pinterestにより設定かつ使用されます。広告の対象を設定することに、またはkinsta.comにアクセスしたユーザーへのコンテンツプロモーションに使用されます。, ユーザーのニーズをよりよく理解し、kinsta.comを最適化するために、Hotjarを使用しています。, ウェブフォントとは第三者のウェブサイトで提供され、あなたのサイトにリンクされるフォントのことを言います。, 「ウェブセーフなフォント」とは（ほとんど）全てのコンピューターにあらかじめインストールされている限られた種類のフォントのことを指し、閲覧者全員が同様に見ることができます。, テーマにウェブフォントのコードを書き込み、キューに追加する（思っているほど難しくありません）, 簡単：数行コードを追加するかプラグインをインストールするだけでいいので、フォントファイルをダウンロードしアップロードするよりも簡単。また、将来的にフォントを変えるのが楽です。, フォントの種類：何百万ものウェブフォントから選ぶことができ、その種類は常に増えています。, 更新：フォントスタイルや文字の種類の追加など、フォントファイルのアップデートが必要な場合でも、何もしなくても新しいバージョンにアップデートされます。, 既にあるあなたの印刷物に使用されているフォントを見て、同じフォントをウェブフォントから探してみましょう。同じものが無ければ、似たような物を探してみましょう。, 類似したサイトを見てみましょう。どのようなフォントを使っているでしょうか？同じフォントを使用するのはお勧めしませんが、あなたのサイトの「ターゲットに伝わりやすいイメージ」としてのフォントの種類があるかもしれません。, フォントでどのような雰囲気を伝えたいか、考えてみましょう。モダンなもの、伝統的なもの、楽しそうなもの、真面目そうなもの…それぞれ違った雰囲気のフォントがあります。, セキュリティの理由から第三者のリソースを読み込みたくない場合（自分のサイトのセキュリティなら自分でコントロールできる）, フォントファイルを購入し、それを使いたい場合（この際には、ライセンスに、ウェブサイトでの使用や印刷物への使用が含まれていることを確認しておきましょう）, サイトがイントラネットなど、ローカルサーバーでホスティングしていて、ユーザーがウェブフォントへのアクセスを持たない場合, キャッシュを利用し、ページを読み込む度に再構築する必要がないようにする（Kinstaのホスティングプランには、デフォルトで, 必要なフォントのみ利用する。使用しないフォントのバリエーション（太さやスタイルなど）をスタイルシートにエンキューしない（後から必要になれば、いつでも追加できます）, ウェブフォントを使用する場合、必ず正しい方法でエンキューする（ウェブフォントサービスが推奨していたとしてもスタイルシート内に@importを使用して読み込んではいけません）, CSSコードを手動で入力する時は、phpファイルの内ではなく、テーマのスタイルシートに記述（カスタマイザーやブロックを使用せずにテーマに手動でCSSコードを入力した方が良いのはこのためです。カスタマイザーやブロックでは、スタイルシートではなくページ内にインラインCSSが記述されてしまいます）, ページ読み込み速度を数ミリ秒速めるためにCSSインライニングの使用を検討する（これはBase64を使用してページを読み込む前にCSSコードをスタイルシートから追加するプロセスなので、ブラウザで余分なファイルが読み込まれるのを防ぎます。インラインCSSコードを記述しないという一つ前のアドバイスと相入れない考え方のように思えますが、別のCSSファイルで実行するのであり、手動でインラインCSSコードを記述するという意味ではありません。複数のフォントを読み込む場合、, フォントをローカルサーバーに置いている場合、必要なフォントやフォントのバリエーションのみをアップロードする。必要なバリエーションを追加するのに@font-face以外のコードを使用しない, フォントをローカルサーバーに置く際、woff2、woff、ttf、eotのフォーマットも含める（ブラウザが最も速く読み込むフォーマットを選択して表示します）, サイトのタイトルに複数のフォントを使用している場合、フォントライブラリ全てを読み込まず、必要な文字のみを読み込む, 新しいフォントは既存のフォントと調和していますか？同様のスタイルや雰囲気を備えていますか？, 既存の出版物に使用されているものとマッチする必要があるものの、同じものをウェブフォントとして使用することができない…という場合には、Google Fontsでできるだけ一致するものを見つけてみてください。, 選択したフォントは、あなたのブランドイメージと一致していますか？本格的なビジネスを運営している場合は、Comic Sansは避けたいものです。（実際、運営しているサイトの種類に関係なく、Comic Sansはなかなか使用しませんが）, フォントの色を変更する場合は、テーマのデザインに既に含まれているか、それと調和する色を使用するようにしてください。あまりにも多くの色を追加すると、サイトが派手で、プロフェッショナルさに欠けてしまいます。. 念のためトップページ、固定ページ、投稿の3種類確認 しましょう。 フォントサイズが変わっていれば作業完了 です。 お疲れ様でした！！ スポンサーリンク. つまり、上記は「サイト記事の各段落の文章の文字サイズを18pxに指定する」という内容となるのです。 WordPressでは15px前後が一般的な文字サイズと言われていますので、それ以上であれば文字が大きいという印象を与えられるでしょう。 WordPressの固定ページって、タイトル要らない場合が以外と多くないでしょうか。この記事では固定ページでタイトルを非表示にする方法を書いています。 設定が反映されているかを確認するのは、ブラウザのキャッシュを消すかキャッシュを読み込まずページを表示する必要があります。, PCサイトのサイトタイトルは、現状のサイズを維持しつつ、スマホサイトのみタイトルのフォントサイズを変更する方法を紹介します。, この方法はちょっと脱初心者の内容です。 ック」を使用しました。 フォントの大きさ・太さを変更. ¨é›†ã™ã‚‹æ–¹æ³•ã€ãã—てcssを用いる方法の3つがあります。 フォントのスタイル、カラー、サイズを変更するこれら3つの方法をそれぞれ詳しく見ていきましょう。 デベロッパーツール等でサイトタイトルのマークアップを特定しフォントサイズの変更にチャレンジしてみてください。, 人気記事　【ゼロから始める】副業ブログで月5万円を稼ぐ！当社スタッフが試してみた方法と成果を公表, うくさ などを設定してみます。検証したバージョンはLightning 3.0.2です。 」でOK です。 もしトップページ（フロントページ）を設定していて、そのタイトルを消したい場合は、以下の記述でもOK！ → ヘッダーのサイト名サイズとフォント変更について . 2.1 投稿時や固定ページの時だけ単発で文字サイズを変更する方法; 2.2 ワードプレス全体の文字サイズを変更する方法; 3 最後に WordPress公式ディレクトリーに公開されている無料ブログテーマのサイトタイトルは、個人的にちょっと大き過ぎるものが多い気がします。, 今回紹介したCSSの調整は、対象を特定する技術が必要です。 WordPress(ワードプレス)を始めたばかりの初心者の方で、固定ページの意味や使い方がよくわからず悩んでいる方も多いのでしょうか。本記事ではWordPress最新のブロックエディター版での固定ページの使い方・作り方について説明します。 ¨é›†ã™ã‚‹ãªã©è¤‡æ•°ã‚ります。 ここではその方法について、画像付きで丁寧に説明しています。 フォントを変えるだけでつまらないウェブサイトが一気に素敵になります。WordPressでフォントを変更する方法を学んで、あなたのウェブサイトをモダンでプロフェッショナルなものにし、ブランド力を高めましょう。, でも、WordPressのサイトではどのようにフォントを使用すれば良いのでしょうか？また、どのようにして、サイトのデザインに合ったフォントを選べば良いのでしょうか？, このガイドでは、WordPressのフォントに関する必要な知識を全て網羅しています。具体的には次のようなことをご紹介していきます。, 実際にサイトにフォントを追加する前に、どのような選択肢があるか知っておくと良いでしょう。, フォントはサイトのデザインの一部であり、多くの場合テーマの中でコーディングされますが、そうでない場合もあります。時には、より多くの種類のフォントが使えるよう、プラグインを使用したい場合もあるでしょう。いくつか選択肢をご紹介します。, 大きく分けて二つです。自分のウェブサイトの外に置かれたウェブフォントを利用するか、フォントファイルを自分のサーバー上に置くか。このガイドではそれぞれのメリット、デメリットもご紹介します。, では、何故ウェブフォントを使った方がいい場合があるか、そしてその追加方法など、ウェブフォントについて詳しく見ていきましょう。, ウェブフォントは、ウェブサイトで使用できるフォントの種類を大量に簡単に追加できるため、フォント追加の手段として最も人気です。, ウェブフォントとは第三者のサービス提供者のウェブサイト上に置かれるフォントを指します。ファイルをあなたのサイトにコピーするのではなく、サービス提供者のサイトにリンクを貼ることで、そこからフォントが読み込まれます。, つまり、自分のサーバー上のスペースを占領することなく、大量のフォントから選べるようになるのです。また、フォントファイルが更新された時に、ファイルをわざわざアップデートしなくても、サービス提供者側が更新する新しいバージョンに自動で更新されます。, 通常、ウェブフォントは無料、または有料の定期購読プランで提供されます。人気のあるウェブフォントサービスは次のとおりです。, これらのサービスではいずれもWordPressサイトにコードを書き加えるか、もしくはプラグインを追加することでサービス提供者のサーバーから直接フォントが利用でき、プラグインを使用する場合、コードを書き加えずにウェブフォントを利用できます。, これは何らかの理由で訪問者がウェブフォントをうまく読み込めない場合の備えとして使うことができます。これについては、後ほど詳しくご紹介します。, さて、ウェブフォントとは何かということを理解したところで、次は自分のサーバーにフォントを置くのではなくウェブフォントを利用するべき理由を見ていきましょう。, 多くのサイトはウェブサイトにバックアップとして、ウェブセーフなフォントを組み合わせて使用しています。WordPressではそれがとても簡単にできるのです。, ウェブフォントを使用することを決めたら、次はどのフォントを使うべきか、という難しい決断が待っています。, 昔は、ウェブ開発者は予めインストールされているウェブセーフなフォント以外の選択肢がなかったため、フォントの選択はとても容易でした。せいぜい「serifかsans-serifか」という選択肢程度です。（serifは文字の太い方の線の端にひげ飾りがつきますが、sans-serifにはつきません）それ以外の選択肢はとても限られていました。, フォントを選んだら、それをよく吟味してみましょう。Google Fontsなどのサービスでは、好きな文章を打ち込んで選んだフォントがどのように表示されるか確認することができます。実際の文章を確認することでフォントが決定しやすくなるかもしれません。, ウェブフォントを使用すれば、フォントの変更も簡単なので、 テーマを作成している最中や、サイトの設定をしている最中に別のフォントに変更することも可能です。, テーマのファイルにコードを追加するのが嫌だという人は、Goggle Fontsにアクセスし好きなフォントを利用できるようになるプラグインをインストールすることができます。, Google Fonts TypographyプラグインではGoogle fontsのライブラリの全てのフォントにアクセスでき、 WordPressのカスタマイザーで閲覧することができます。, 外観＞カスタマイズからカスタマイザーを開きます。「Google Fonts」という項目が表示されます。, Basic Settings（基本設定）: 本文、見出し、ボタンのデフォルトのフォントの設定を行います。次のスクリーショットでは、本文には読みやすいセリフのフォントを、見出しにはより目立つフォントを選んでいます。, Advanced Settings（詳細設定）:ここでは、ブランディング（サイトのタイトルと説明）、ナビゲーション（メニュー）、そして本文と見出しの詳細設定やサイドバー、フッターの設定が可能です。また、どこにも指定せずにフォントを読み込むことができるので、カスタマイザー内のお好きなカスタムCSSに追加することができます。, Font Loading（フォントの読み込み）：不要なフォントのスタイル（太字、イタリック体など）、それらのチェックを外すことでサイトが不必要に重くなるのを防ぐことができます。, Debugging（デバッグ）：この機能を使用すると正常に作動しないフォントを強制的に表示できます。, これらの設定を色々と変えてみて、希望するとおりに表示されることをカスタマイザー内で確認しましょう。設定に満足がいったら、「公開」をクリックします。公開ボタンを押す前にカスタマイザーを離れてしまうと変更した設定が消えてしまいますのでご注意ください。, 無料版のプラグインでは、フォントカラーは編集できません。カラーの変更をするには有料版のプラグインを利用するか、カスタマイザー内の「追加CSS」を利用します。, カスタマイザーのホーム画面に戻り、「追加CSS」のタブをクリックします。独自のCSSコードを追加できる空白のテキストエリアが表示されます。, 編集したい要素を確認するには、その要素を選択し、ブラウザで要素を検証し、現在のスタイルを確認します。, 次の例ではGoogle Chromeを使用して、 h1（見出し1）を選択しました。, このWordPressテーマでは、本文のカラーを踏襲しています。もっと具体的に指定したい場合、CSSのテキストエリア内に変更したい要素の色を記載します。この場合、次のようになります。, 同じように全てのテキスト要素の色を変更できます。また、他の画面に含まれていないフォントに変更することもできます。フォント変更のためのCSSコードを知りたい方は、記事を読み進め「CSSでフォントを変更する方法」についての説明箇所をご参照ください。, プラグインをインストールしたくない場合、テーマのコードを編集できるのであれば、functionsファイルとスタイルシートにコードを追加することでウェブフォントをインストールし、使用できます。, 自らのサイトでオリジナルのテーマを使っている場合には、functionファイルとスタイルシートをテーマから編集しましょう。WordPressテーマディレクトリから購入または入手した、サードパーティのテーマを利用している場合には、子テーマを作成が先決です。そして、functions.phpとstyle.cssという2つのファイルを作成します。, それでは手動でウェブフォントを追加する方法を詳しく見ていきましょう。もっとも一般的であり無料でもあるGoogle Fontsを例にして説明していきます。, まずはGoogle Fontsでフォントを選びます。横にあるプラスのアイコンをクリックしてライブラリに追加します。, 次に画面下部のライブラリのタブをクリックすると、サイトに追加するコードが表示されます。他のスタイルも追加したい場合は、Customizeのタブをクリックし、追加したものを選択します。そしてEmbedのタブに戻ります。, ここで、表示されたコードを全てコピーしてはいけません。サイトのヘッダーの内でフォントを呼び出すのではなく、フォントをキューに入れます。WordPressではこれが正しい方法です。, テーマのfunctionsファイルを開き、フォントへのリンクを、選んだフォントのものに差し替えて、次のコードを書き加えます。, これでGoogle Fontsのサーバーからスタイルが読み込まれます。今後、さらにフォントを追加する必要がある場合は、functionsファイルに新しい行を追加するか、同じ行の中にこのように書き加えます。, こうするとMerriweatherとRalewayのフォントの両方を読み込みます。, functionsファイルにコードを加えるだけでは、サイトにはまだ反映されません。テーマのスタイルシートにもコードを追加する必要があります。, テーマのstyle.cssファイルを開き、ウェブフォントを個別の要素に指定します。コードは他のフォントに関するCSSコードの後に追加するようにしましょう。そうしないと既存のコードが優先されてしまいます。, どの要素に適用するかは自由ですが、本文は読みやすいフォントを使用し、見出しには少し変わったフォントを使用するのが一般的です。, 上記の場合、h1、h2、h3にはMerriweatherが適用され、それ以外にはRalewayが適用されます。, あとは、スタイルシートを保存し、思った通りにサイトが表示されているかどうかを確認しましょう。新しいフォントが表示されない場合は、ブラウザのキャッシュをクリアし、スタイルシート上の後に記載したフォントに関するコードに上書きされていないかを確認しましょう。このようなことがあるので、新たなコードはスタイルシートの最後尾に記載するか、元のフォントのコードを削除して記載する（こちらの方がより良いでしょう）ことをお勧めします。, 何かしらの理由でサイトの訪問者にウェブフォントが表示されないことがあります。閲覧者の接続状況が悪いか、ウェブフォントが表示されない古い端末を使用している可能性などが考えられます。または、ウェブフォントサービスに技術的な問題が発生していることも考えられます。, Google fontsで表示されるコードには既に簡素化された予備のフォントとしてserif、またはsans-serifが指定されますが、もう一工夫することも可能です。, サイト訪問者の端末に既にインストールされているフォントを指定した上で、そのフォントがインストールされていないときのためにさらなる予備として、serif、またはsans-serifを指定しましょう。, こうすると、特に問題がない場合、設定通りのウェブフォントが表示され、何か問題がある場合はHelveticaとGeorgiaが、それも表示できない場合は、利用者のブラウザが読み込むことのできるserifとsans-serifが表示されます。, 開発者の中にはウェブフォントを使用せずに、自分のサーバー上にフォントを置きたいという人もいます。あなたも、もしかしたらその一人かもしれません。, これにはセキュリティ、 パフォーマンス、もしくは予算上の都合など、いくつかの理由が関係しています。, パフォーマンスが心配だ、という方に関しては、この記事の後半でウェブフォントのパフォーマンスを最適化する方法をご紹介しています。しかし、それでもローカルで貫くと決めた場合、その方法を知っておかなければなりません。, ウェブフォントの使用はより簡単で柔軟な上、サーバーの容量を食わないというメリットがあります。しかし、フォントをローカルに置く方が適切な場合もあるでしょう。, ウェブフォントの中にもダウンロードしローカルサーバー上に置けるフォントは多く存在しますが、ライセンス上許可されているかを確認する必要があります。Google Fontsの場合、許可されています。, また、ウェブフォントとして使用できないものの、ダウンロードして自らのサーバー上に置けるフォントもあります。パソコンにダウンロードできるフォントは全てウェブサイトにアップロードし、保存することができます。ウェブフォントとして利用できないけれども自分のブランドに使用したいフォントがある、という場合には、この方法が一つの解決策となりますが、こちらもライセンスで許可されているかを良く確認しましょう。, フォントを自分のローカルサーバーで利用すると決めたところで、今度はその設定方法を学びましょう。, その設定方法はウェブフォントを使用する場合とは異なります。フォントファイルをサイトにアップロードしてスタイルシート内でリンクします。Functionsファイルでのエンキューは必要ありません。, まずは使用したいフォントをダウンロードします。Google Fontsの場合、ライブラリのフォントに表示されるダウンロードアイコンをクリックしましょう。, フォントのZipファイルをコンピューター上で解凍し、サイトで使用しないスタイルを削除します。使用することのないファイルをアップロードする意味はありません。, ウェブサイトで使用するにはファイルは.woffフォーマットである必要があります。.woffフォーマットになっていない場合（Google fontsでダウンロードすると、このフォーマットになっていません）Convertioなどのサービスを利用し変換します。, 次はフォントファイルをwp-content/themes/themename（＊themenameの部分があなたのテーマのフォルダになります）にアップロードすることで、テーマに組み込みます。テーマのフォルダの中で、フォントのファイルを例えば「fonts」などの名前をつけたフォルダにまとめて保存しておくと良いでしょう。, サードパーティ製のテーマを使用している場合、フォントファイルとスタイルシート用の子テーマを作成してください。, フォントの部分を実際にあなたが使用するフォントに置き換え、次のコードを追加してください。, このように必要なだけ追記します。太字やイタリック体など、そのフォントの別のスタイルを利用したい場合、上記の例でRalewayの太字と通常の太さをそれぞれ指定しているように、その都度@font-faceで始まるコードを用いて、それぞれの太さとスタイルを指定する必要があります。, WordPressのサイトにフォントをインストールする方法をご紹介しました。さて、ではこれを編集したり変更したりするには、どうすれば良いのでしょうか？, フォントを編集するには、カスタマイザーで編集する方法、投稿・固定ページ編集画面で編集する方法、そしてCSSを用いる方法の3つがあります。, フォントのスタイル、カラー、サイズを変更するこれら3つの方法をそれぞれ詳しく見ていきましょう。, Gutenbergエディタが採用された最近のバージョンのWordPressを利用している場合、投稿や固定ページのテキストを編集している最中にフォントのスタイルの変更が可能です。, 編集したいテキストを選択し、アイコンをクリックすると太字やイタリック体に変更できます。その横の矢印のアイコンをクリックすると、取り消し線も選択できます。, 古いバージョンのWordPressを使用している場合や、Classic Editorのプラグインをインストールしている場合でも、フォントスタイルの編集が可能です。（Gutenbergエディタを使用したくない場合はWordPressをアップデートした上でGutenbergを無効にすることをおすすめします）, Classic Editorのメインの編集パネルの上部にはツールバーがあり、テキストスタイルが編集できます。ツールバー切り替えのアイコンをクリックすると、取消し線など、その他のオプションも表示されます。, 特定の要素のフォントスタイルを変更したい場合、カスタマイザーから手動でCSSコードを追加することもできます。, カスタマイザーを開き、追加CSSをクリックします。CSSコードを打ち込める画面が開きます。, テキストボックスの中にCSSコードを打ち込みます。全てのh1とh2の要素をイタリック体にしたい場合、次のように打ち込みます。, スタイルシートにコードを追記するのに抵抗がないのであれば、次の方法をお勧めします。, サードパーティの作成したテーマを使用する場合、自分のスタイル専用の子テーマを作成しなければ、テーマをアップデートした際に全ての変更内容が失われてしまいます。WordPressが子テーマであることを認識できるように、子テーマ内にスタイルシートを作成し、そこでフォントのスタイルを記載します。, 独自のテーマを使用している場合、直接スタイルシート内のCSSコードを編集します。ファイル名はstyle.cssで、wp-content/themesのテーマのフォルダの中にあります。, フォントスタイルのコードを追加する際は、別のコードによって上書きされないよう、スタイルシートの最後にコードを追記します。または、特に必要ない場合は元々のフォントスタイルのコードを削除、もしくは上書きしてしまうとより良いでしょう。, サイト内の特定のテキストの色を変えたいという場合もあるでしょう。ただし、色はあまり変えすぎないように注意しましょう。テーマは元々調和した色合いで構成されているので、色を追加しすぎると、けばけばしく、プロフェッショナルな雰囲気を損なってしまいます。, WordPressサイトのホスティング会社が遅いことにうんざりしていませんか？WordPressの専門家による超高速サーバーと24時間年中無休の世界クラスのサポートを提供しています。当社のプラン一覧をご確認ください。, Gutenbergのテキストブロックでは、テキストのカラーと背景色を変更できます。変更したいブロックを開き、画面右側のブロックの項目の色設定をクリックします。, なお、色の組み合わせが読みづらい場合、上の例のように警告が表示されます。色の変えすぎには注意しましょう。テーマの色味がサイトの雰囲気に合っていたからそのテーマを選んだのでしょうし、色を使いすぎると、主張し過ぎになりかねません。, 色設定の下の高度な設定のタブをクリックするとそのブロックにクラス名を追加し、カスタマイザーもしくはスタイルシートでスタイルを指定することができます。例えば、ブロックに.featuredというクラス名を追加すると、そのクラスにスタイルが適用されます。, 旧エディタのツールバーを使えば、選択したテキストの文字色を変えることができます。特定の単語を選択し、その部分だけ色を変えることも可能です。下の例では、文章を赤色に変更しました。, このように高い柔軟性がありますが、色の変えすぎには注意しましょう。テキスト内に色を使用しすぎると、読みづらいサイトになってしまいます。, ご使用のテーマがサイトのカラースキームを変更できるものであれば、この方法が最適でしょう。, 例えば、次の例では、テーマ全体のカラースキームを選択できるテーマを使用しています。こうすることで、新しい色が調和し、一貫性のあるものになります。, ここでのオプションはお使いのテーマによります。例えば、見出し、リンク、その他の要素を選択し、色を変更できるようなテーマがあります。, ご使用のテーマのオプションでは、色を変更したい要素が選択できない場合、カスタマイザーでCSSコードを追加することができます。, カスタマイズ>追加CSS をクリックし、テキストボックスにCSSコードを入力します。, これで正しく適用されない場合、さらに具体的なCSSコードを使用する必要があるかもしれません。このテーマの場合、サイトの見出しのリンクには#site-titleというIDが使用されているので、次のようなCSSコードを入力します。, フォントスタイルと同様に、テーマのスタイルシート（もしくは子テーマを作成して）からフォントカラーを変更することもできます。, 次の例の色の部分を実際使用する色に変更します。例の中では、サイトの本文の色をbody要素を使用して変更しています。, 別のコードに優先し適用されていることを確認するとともに、他の要素にはその色を適用したくない場合は、それらの要素には元のスタイルが引き続き適用されていることも確認しましょう。個別に指定されていない限りbody要素の色が全てのテキストに適用されます。, 見やすさの観点から、テーマのデフォルトのフォントサイズよりも文字を大きくしたいこともあるでしょう。または、例えばウィジェットエリアの見出しが小さすぎると感じることもあるかもしれません。, ブロックを選択し、画面右側のブロックの項目のテキスト設定のタブをクリックします。次の例のように、ブロック内のテキストの文字サイズを大きくしたり小さくしたりできます。, でもやりすぎには注意しましょう。ページ内の段落の文字サイズがばらばらだと、まとまりがなく、読みづらくなります。, 旧エディタでは特定のテキストの文字サイズを変更する機能はありません。そのため、この機能を使いたい場合には、残念ながらGutenbergにアップグレードする必要があります。, テーマによっては、カスタマイザーでサイト全体、もしくは見出しや本文を指定してフォントサイズを変更することができます。, お使いのテーマでカスタマイザーでのフォントサイズの変更ができない場合でも、追加CSSで文字サイズの変更が可能です。カスタマイズ＞追加CSSをクリックし、テキストボックスにCSSコードを入力します。, スタイルシートでフォントサイズを変更する方法は、フォントの色やスタイルを変更する方法と同じです。, テーマのスタイルシートのフォントを変更する場合は、実際のサイトを台無しにしてしまわないように、まずは、必ず、ステージングサイトで検証するようにしましょう。, ウェブフォントを使用していても、サーバー上に置いたフォントを使用していても、フォントを最適化するに越したことはないでしょう。, ウェブフォントを使用している場合、別のサーバー上に置かれているからといって読み込みが遅くならず、なるべく早く表示されるよう、できる限り工夫をしたいと考えるのは当然です。, したがって、サイトのタイトルがKinstaだとすると、次のようなスタイルシートを作成することで、パフォーマンスを少し改善できます。, フォントのパフォーマンスを最適化するだけでなく、視覚的な最適化もしておきたいものです。つまり、フォントがサイトのデザインやオフラインの素材にうまく合致するようにしましょう。, これは、プラグインまたは子テーマを使用して、テーマに既にバンドルされているフォントの他に追加のフォントを導入する場合に、特に言えることです。色やスタイルのバラツキのあるフォントを多用すると、テーマ全体が乱雑に見えるリスクがあります。, 使用するフォントは、訪問者がサイトにアクセスしたときに抱く印象に大きな影響を与えます。これを考慮し、ブランドイメージを強化するフォントを選択するようにしましょう。, バリアブルフォントは、サイトへの多くのフォントの追加をより効率的にする新しい種類のフォントです。, より多くの情報を1つのフォントファイルに保存できるので、フォントのバリエーション（太字、斜体など）が必要な時に、複数のフォントファイルを読み込む必要はなく、1つだけを読み込む仕組みです。, 複数のフォントの太さ、スタイル、傾斜といったスタイルを持つフォントの場合、これにより多くのファイルスペースが節約でき、@fontfaceを使用してフォントをエンキューまたは追加するプロセスも容易になります。, バリアブルフォントは、Chrome、Edge、Firefox、およびSafariの最新バージョンでサポートされていますが、古いブラウザーには対応していません。したがって、これを使用する際にはフォールバックが必要になります。そして、まだ利用できるバリアブルフォントは多くありません。Google Fontsには含まれていませんが、Googleは仕様をサポートしているため、今後追加される可能性は考えられます。, フォント開発者は日夜、より多くのバリアブルフォントの作成と信頼性の向上に取り組んでいます。そのため、さらに開発が進んだ頃には、バリアブルフォントを使って、フォントの最適化を図ることができるように、今から注目しておきたいものです。, WordPressサイトのフォントを変更するのは簡単な作業ではありません。以下のように、さまざまな可能性があります。, いずれかを選んだ後には、パフォーマンスを向上させるためにフォントを最適化する方法に焦点を当てる必要があります。今回の記事のヒントを活用すれば、WordPressでフォントを変更するだけでなく、テーマでフォントをより細かく制御できるようになるはずです。, この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。, このフォームを送信することにより、米国へのデータ転送を含む、Kinstaの個人情報保護方針に従ったデータ送信など、個人データの処理に同意したことになります。, Kinstaからサービス、イベント、プロモーションなどに関連する情報を受け取ることに同意したことになります。配信停止をご希望の場合には、各ニュースレターの下部にある配信停止ボタンからご連絡ください。, 当社は、ウェブサイトの機能の一部に、また訪問者をよりよく理解しより良いユーザーエクスペリエンスを提供するために分析した上でのパーソナライズ広告のためにクッキーを使用します。すべてのクッキーに一括で同意することもできますが、クッキー設定で調整することもできます。, これらのクッキーは、支払いゲートウェイのセキュリティと重要な機能を提供することにより当社の正しくウェブサイトが機能するために必要なものです。したがって、これらのクッキーが常にオンになっていますが、個人識別情報（PII）は含みません。, マーケティングクッキーは、広告の対象を特定するのに役立ちます。主にKinstaを訪問したユーザーに広告を表示するのに使用します。.

原付 オイル交換 目安, インスタグラム Pc クローム, サイドミラー 修理 費用, Visual Studio 2015 Community 日本語, セレナ ドアミラー 自動格納 C25, いとしのエリー コード 分析, 外国人 就労ビザ コロナ, 子供 ガウチョパンツ 作り方, 赤ちゃん 充電器 なめる 対策, しようかな 英語 冗談, バックナンバー ドラマ 石原さとみ, グラクロ 韓国 サイト, メガネ 丁番修理 自分で, 合コン 服装 メンズ 大学生, イラレ 使え なくなっ た, 風呂場 換気扇 窓 ない, 友 ヶ 島 ベストシーズン, 年 長 自転車 後ろ, 黒い砂漠 鉄の塊 使い道, Ps4 サブ垢 セーブデータ 削除, 結婚式 オープニングムービー 素材 無料, スマホ パスワード 何通り, Iphone アドレス入力 呼び出し, ヴァイオレットエヴァーガーデン 外伝 配信, マルジェラ ジャズクラブ トップノート, 静岡 艦 これ 聖地, ニューバランス 選び方 サイズ,