今回は「WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法」についてです。, 局所的なフォントサイズ変更ならエディタで簡単に出来ますがデフォルトのフォントサイズを変えるのはCSSを操作した方が良いと思います。, やり方は色々とありますが【初心者向け】で簡単にデフォルトフォントサイズ、行間、文字間を変更するCSSの操作方法をご紹介します。, 実行前にCSSファイル(使用テーマのstyle.css)のバックアップを必ず行ってください。 読者の記憶に残るブログにするにはデザインもこだわった方が影響が大きいです。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, お名前.comでドメインを取得しエックスサーバーで使用【方法】 るーしーです。 今回は「Google(グーグル)アナリティクスとSearch Console(サーチコンソール)を10分で連携させる方法」についてです。 両ツールとも必須ツールですが連携 ... こんにちは! ※現在、文字の大きさは115％です. ©Copyright2020 そろりかく。.All Rights Reserved. WordPress ワードプレスで文字の大きさを変更する方法（Stork ストーク） 方法は2つのステップです。おばさんでも出来ました。 1 まず、外観→テーマの編集 文字サイズ変更のコードを入力（下に記載） You also agree to receive information from Kinsta related to our services, events, and promotions. このページでは、WordPressテーマ『SWELL』で本文中のフォントサイズを設定する方法について解説していきます。フォントに関する設定項目は、「外観」＞「カスタマイズ」＞「サイトの全体設定」＞「基本デザイン」というメニューの中に用意されています。 具体的にどの部分の文字列を変更されたいのでしょうか？, お助けできるかはわかりませんが、 スポンサーリンク 自サイトに訪問したドコモ(docomo)の検索ワードを確認する方法 WordPress(ワードプレス)管理画面を開く 左メニュー「jetpack」の「サイト統計情報」をクリック 「リ ... Google Analytics(グーグルアナリティクス) Search Console(サーチコンソール) ホームページ. 日本とアメリカを行き来しながら、高校修了までアメリカで生活を送る。, 日本へ帰国し、Webの仕事に携わる中、 やることは先ほど紹介したコードを貼り付けるだけですので、ぜひチャレンジしてみてください。, このサンプルコードは、解像度が960pxの場合にフォントサイズを18ピクセルにするという内容です。つまり960以上以上の場合は、これまで通りのフォントサイズで表示する（変更無し）という記述です。, サンプルコードを先ほど同様に追加CSSに貼り付けます（外観→カスタマイズ→追加CSS）。, サンプルコードはPCとスマホを想定したものですが、それ以外にもタブレットでは別サイズにするといった仕組みも可能です。, フォントサイズをCSSで調整する方法を紹介しました。 親テーマを編集してもアップデートすると. ストーク の場合「stork_custom」です。, （/*ロゴを自由な大きさに*/） 縦は500pxまでが良いのではないかと思っています。, ブログに使用するファイルの拡張子はいろいろありますが、 WordPressでデザインテーマを色々選んでも、結局細かいデザインがちょっと気になる、ということがあると思います。そんな時はテーマの一部の色や文字サイズを気軽に変えてみましょう。「追加CSS」はこの用途にピッタリの機能。CSSをすぐにいじれるような解説付き！ 他との差別化をしたほうがいいです。, 「親テーマ」を編集することは基本的にないです！ そんな感じなので、サイトを訪れる読者にはどこも同じに見えてしまいます。, 訪れてくれた読者にブログを覚えてもらうためにも！ 英語圏と日本の情報量・サービスのレベルの差に驚愕する。, この言語の壁を取っ払い、日本の中小企業も世界レベルで戦えるようにすべく、 時と場合により使い分けします。 テーマの子テーマを使用していれば、親テーマをアップデートしても上書き(追記分がなくなる)はされません, 2017年11月16日：膠原病(こうげんびょう)の外来検査１：血液検査・レントゲン, 2017年12月始め：膠原病(シェーグレン症候群・全身性エリテマトーデス)の検査入院, 【初心者向け】で簡単にデフォルトフォントサイズ、行間、文字間を変更するCSSの操作方法をご紹介, 全く同じ文章、HTMLのタグでもCSSの定義が異なれば皆さんの画面に表示されるデザインは異なります。, 使っているWordPress(ワードプレス)のテーマによってCSSの定義が異なるから, 作業をする直前の状態であるstyle.cssファイル内容をバックアップできました。, テーマを最新バージョンに更新すると追記した分が全て無くなるのでバージョンアップしたら再度追記, 【所要時間3分】ブログのサイトマップをPS Auto Sitemap(ピーエスオートサイトマップ)で作成する方法, Search Console(サーチコンソール)に自分のサイトを5分で登録する方法. ということは、h4のHTMLタグが付いた文字だけ表示が変わっていたんですね。, その為、全く同じ文章、HTMLのタグでもCSSの定義が異なれば皆さんの画面に表示されるデザインは異なります。, 今回はCSSでpタグに囲まれたフォントのサイズ、行間、文字間を変える設定をします。, そうする事でpタグに囲まれたフォントは全てサイズ、行間、文字間が変わります(例外あり)。, 段落として定義されている部分全てpタグが入っている(はず)なのですがどうなるかは実物を見た方が早いと思います。, ファイル名は中身が何かわかればいいので、「20180201バックアップしたスタイルシート.txt」等で大丈夫です。, 「.txt」は拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。, これで今回作業をする直前の状態であるstyle.cssファイル内容をバックアップできました。, 以後の操作でレイアウトが崩れてしまった場合は、現在使用しているテーマのstyle.cssファイルへ今回作成したバックアップファイルの内容をコピペすれば復旧しますので大事に保存してください。. You may unsubscribe at any time by following the instructions in the communications received. 今後制作するコンテンツの参考にもさせていただければ幸いです。, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。. 文字の大きさを変える場合は子テーマを編集する . (adsbygoogle = window.adsbygoogle || []).push({}); ファイル名は「現在この内容を使っている」という事が分かるように、「【20180201使用中】スタイルシート.txt」という具合にしましょう。, テーマを最新バージョンに更新すると追記した分が全て無くなるのでバージョンアップしたら再度追記しましょう。, たかが文字サイズ、行間、文字間ですが少し変わっただけで印象はガラリと変わりました。, やり方は沢山ありますが、あれこれ試行錯誤した上でこの手順が最も手軽に実行できる手段だと判断しました。, 商用のしっかりしたサイトでやるべきではない手段なのですが個人サイトにつき許して……という感じです。, なので今回の方法もやるやらないは皆さんの判断にお任せします。※結果も自己責任でお願いします。, とはいってもこれからもどんどん役に立つような情報を発信していきますのでまたこのブログを見に来てくださいね！！. WordPress初心者向けにタイトルのフォントサイズを大きくしたり、小さくしたりする方法を紹介します。, CSS（シー・エス・エス）を追加しフォントサイズを自由に変更する方法を紹介します。, まずは人気のテーマごとのサンプルコードを紹介します。サンプルコードの設置場所については、ページの中頃で紹介します。, font-sizeの右にある「18」がフォントサイズです。 写真のようなロゴを使う場合、「.jpg」の方がキレイだったりします。, これで他のブログとの差別化ができたと思います。 ワードプレス、シスコシステムズ社製ネットワーク機器担当。, WordPress(ワードプレス)のカスタマイズ専門会社ワードプレスカスタマイズネット。ホームページ・Web制作会社・デザイン会社向けワードプレス構築外注サービス. 横は1200px前後で また、レイアウトが崩れてしまった等の結果についても自己責任でお願い致します。, 「/」は閉じタグと言われ、「/」無しのタグで始めて「/」付きのタグで閉じるのが基本。, このソースを見てみると どういったことでお悩みなのか、ご教示いただければ Learn how to change font, font size, and font color in WordPress! 「.pngファイル」は背景の色を透過させています。 「.png」と「.jpg」が主です。, 使用用途にもよりますが、ロゴは「.pngファイル」の方が相性が良いです。 1-1:子テーマのCSSを編集する とご記載ございますが、タイトルや段落全体のサイズ変更はできるのですが「一文だけ」という編集ができません。 スポンサーリンク WordPressでサイトを運営している人の中には、文字サイズを簡単に変えられるようにしたいという人も多いでしょう。デフォルトの文字サイズだけではメリハリがなくて読みにくい文章となり、その結果ユーザーにコンテンツを読んでもらうことも難しくなります。, WordPressやコーディングにあまり詳しくない人でも、簡単に文字サイズを変えることは可能です。今回は、CSSを編集したりプラグインを活用することで文字サイズを変える方法をご説明します。, WordPressを利用する際には、使用しているテーマによって差があるものの、文字のデフォルトサイズ、つまり基本となる文字の大きさや文字と文字の間隔はあらかじめ決められています。, デフォルトのテーマの場合は、編集画面に文字サイズを変更するメニューもないため、デフォルト設定の文字サイズで延々と記事を書くことになってしまいます。テーマによっては文字サイズを変更できる種類もありますが、変更できる文字サイズが限られている場合も多いでしょう。, また、テーマを変えるとサイトのデザインが一新されてしまうため、文字サイズのためだけにテーマを変えるというのも実際の問題としてなかなか難しいのではないでしょうか。, ですから、大きくサイトデザインを変更せずに文字サイズを変える方法を知る必要があります。, 文字サイズを変更するメリットの1つは、メリハリが付いてコンテンツが見やすくなることです。, ブログやWEBサイトは、書籍とは異なり読まれるものではなく見られるものだとよく言われます。わざわざお金を出して本を買うのとは異なり、ネットユーザーがサイトを訪れるのはたまたまネットサーフィンをしていたらたどり着いたなど偶然に近いケースが多いです。, つまり、ユーザーとしては記事を読もうとする動機があまり強くないのです。そのような場合にコンテンツの文字サイズが全て同じだと、パッと見た瞬間に「内容がよく分からないな」「読みにくそうだな」と判断され、内容を吟味されることなくサイトから去ってしまう可能性が高いでしょう。, たとえ誰もが感心や関心を寄せる素晴らしい内容を含んだ記事をリリースしても、読まれなくては意味がありません。, 特に読んで欲しいポイントやインパクトを持たせたい箇所の文字サイズを大きくすることで、コンテンツ全体にメリハリが生まれ、パッと見て読みやすい記事だなと判断されやすくなります。訴求したい部分の文字サイズを大きくすることで目立たせ、見込み客を惹きつけるメリットも期待できます。, また、サイトが高齢者をメインターゲットにしている場合などは、全体的な文字サイズを大きくすることでより読まれやすいコンテンツになるでしょう。, たとえ競合サイトと同様の内容であっても、読みやすさ、内容の把握のしやすさという点で勝ることでアドバンテージを獲得することができます。, 文字サイズを変更する方法は複数ありますが、共通してまず行っておくべきことはCSSファイルのバックアップです。, CSSファイルとは、サイトのデザインを設定するためのファイルで、スタイルシートとも呼ばれます。CSSファイルを編集することで、たとえば「見出しのフォントはゴシック体で色は赤」「本文のフォントは明朝体で文字サイズは14px」などと好きなデザインにアレンジすることが可能となるのです。文字サイズを変更できる状態にするということは、このCSSに変更を加えることになります。, 問題なく変更できれば良いのですが、場合によっては文字サイズを変更したらサイトのレイアウトが崩れてしまうなどトラブルに発展する可能性もないとは言えません。そのような時にバックアップを取っていれば、ファイルを差し替えるだけで元の状態に復旧することが可能です。, バックアップを取ることで万が一の保険となり、より良いサイトにできるよう積極的にWordPressのカスタマイズにトライする後押しにもなるでしょう。, まず、WordPressの管理画面（ダッシュボード）にある「外観」から「テーマの編集」に入ります。テーマ編集画面の右上に「編集するテーマを選択」という項目がありますので、自身が使っている、もしくは編集したいテーマを選択してください。, その後、画面右側にずらっと並んでいる項目の中から「スタイルシート (style.css)」をクリックします（一番上に表示されていることが多いです）。画面中央の「選択したファイルの内容」にスタイルシートの内容が表示されますので、全て選択してコピーをしてください。コピーした内容をメモ帳やWordなどのテキストファイルに貼り付けて保存すればCSSファイルのバックアップは完了です。, バックアップファイルには「〇〇（テーマ名）CSSバックアップ.〇年〇月〇日」といったような名前を設定しておけば、何のファイルだったか忘れずに済みます。, 文字サイズを変更する最も基本的な手段は、CSSファイルを直接編集（コーディング）する方法です。, CSSを変更するとデフォルト文字サイズを変更できるため、文章全体の文字を大きくしたい、あるいは小さくしたい時には特に役に立ちます。, ただし、編集を行うにはCSSの構造について一定の知識とスキルが必要となり、WordPress初心者に向いている方法とは言い難いでしょう。, また、繰り返しになりますが、必ずCSSのバックアップを取るという点も忘れないようにしてください。編集前の内容を失ってしまえば、トラブルがあった際に元に戻すことが難しくなります。, CSS編集の手順は、途中まではCSSファイルのバックアップを取る手順と同じです。管理画面の「外観」→「テーマの編集」から文字サイズを変更したいテーマのスタイルシートを表示させます。そして、スタイルシートの一番下に以下の記述を新たに加えてください。, 記述内容については、まず「p」は段落を表しており、これを記述することで「ここから段落内の文章についてスタイルを設定します」と指定することができます。具体的な設定内容は｛｝内に記述してください。「font-size:」は文字の大きさを設定する記述で、px（ピクセル）という単位で指定します。, つまり、上記は「サイト記事の各段落の文章の文字サイズを18pxに指定する」という内容となるのです。, WordPressでは15px前後が一般的な文字サイズと言われていますので、それ以上であれば文字が大きいという印象を与えられるでしょう。記述が終わった後は、直下の「ファイルを更新」ボタンをクリックします。問題なく処理されれば、指定したとおりに文字サイズが変更されます。, これは、スタイルシートの記述のどこかにエラーが発生していること示す警告です。このまま更新すると、不具合が高い可能性で発生します。, 原因としては、追記内容にミスがあるかもしれませんし、あるいは不可欠な箇所を誤って削除した可能性もあります。, もし修正箇所が分からなければ、戻るボタンを押して編集内容を破棄してください。編集前の内容に戻ります。, 使用しているテーマによって、シートが細分化されていたりデフォルトの記述が異なっていたりする場合があります。それらに適切に対応できるノウハウがないと、思うように文字サイズが変更されないことも多いです。, したがって、WordPress初心者にはCSSファイルを直接編集することはおすすめできません。文字サイズを変更できるプラグインを活用した方が確実で手間も省けるでしょう。, プラグインで文字サイズを変更する際には、「Visual CSS Style Editor」がおすすめです。, このプラグインを使用することでCSS編集（コーディング）をせずに文字サイズをカスタマイズできます。使い方も非常に直観的かつシンプルです。, まず、プラグインのインストールと有効化を行い、WordPressにログインしたまま編集したいページの画面を表示すると、上部に「Edit With YellowPencil」というボタンが現れます。これをクリックすると編集画面に移り、文字サイズを変更することが可能となります。, 変更したい段落や見出しをクリックすると文字サイズや色を編集するスライド式のパラメーターが現れ、これを操作すれば文字サイズの変更は完了です。, 「TinyMCE Advanced」は非常に多くのユーザーに愛用され、また多くのWordPress情報サイトで推奨されているプラグインです。, 文字サイズを変更するまでのプロセスが非常に簡単で、手軽に文字サイズを変更することが可能です。, プラグインをインストールした後は、管理画面の「設定」から「TinyMCE Advanced」メニューを開きます。メニュー下部に「フォントファミリー」や「顔文字」などさまざまなツールメニューが表示されていますので、その中から「フォントサイズ」を選んで画面上部の使用可能なメニュー群にドラッグ＆ドロップしてください。, すると記事を書くためのページ編集画面のビジュアルエディタに「フォント」メニューが追加されて文字サイズが変更できるようになります。設定可能な文字サイズは、8pt、10pt、12pt、14pt、18pt、24pt、36ptの7種類。普段使用する分には十分な選択肢と言えるでしょう。, 「WP-chgFontSize」はサイトを閲覧するユーザーが文字の大きさを変更することができるプラグインです。, サイトを閲覧する人それぞれに合った文字のサイズにできるため、導入することで非常にユーザビリティが高くなるでしょう。, プラグインを有効化した後、設定画面で文字の最小・最大サイズを指定します。その後、ウィジェット画面でサイドバーなど任意の場所に設置してください。, サイトの設置箇所に大文字の「A」と小文字の「a」が表示され、「A」をクリックすると文字を大きくでき、「a」をクリックすると文字が小さくできるようになります。このプラグインは管理画面の「プラグイン」から新規追加するほか、配布サイトから入手することも可能です。その際はZipファイルをダウンロードして、プラグインフォルダにファイルをアップロードし有効化することで使用可能となります。, 「FitText」は、画面サイズに合わせて文字のサイズを変えられるレスポンシブ対応のプラグインです。, スマートフォンやタブレットでのネットサーフィンが普通となった今では、ユーザーの利便性を高める意味で非常に役に立つプラグインだと言えます。, こちらのプラグインはWordPressの管理画面ではなく、配布サイトからダウンロードすることで使用可能です。導入の際はHTMLの編集が必要となりますので、WordPressを始めたばかりの人にとっては少し運用が難しいかもしれません。, 記事を作成しながら柔軟に文字サイズをカスタマイズしたいというケースもあるでしょう。, そのような時に役に立つプラグインが「Elementor Page Builder」です。これは専用の編集画面を用いることで、見出しや文章、画像、動画などを自由に配置したコンテンツを作成できるプラグインです。, どのようなテーマにも対応していると公言しており、また日本語に対応しているので使いやすさも抜群です。, インストール・有効化するとページ編集画面の上部に「Elementorで編集」というボタンが現れますので、これをクリックすると専用の編集画面に遷移します。, 編集画面では左側にテキストや画像、SNSボタンなどさまざまなアイコンが並んでおり、これを右側にあるページ画面にドラッグ＆ドロップするだけで自由にコンテンツをデザインすることが可能です。, 文字サイズについても、スライド式のパラメーターで感覚的に調整可能です。段落の1文字目だけ大きくするなどオシャレなデザインもボタン1つで設定できます。, また、レスポンシブ対応なため、どの端末で見てもユーザビリティの高いサイトになるでしょう。, ユーザビリティを向上させるためにも、文字サイズを調整し、ターゲットとするユーザーが見やすいサイトにアレンジすることは非常に大切です。, あなたのECサイト・ネットビジネスに善循環をもたらし、ライバルと差をつける情報を公開します。, 英語圏には日本ではあまり知られていないWordPressのプラグインがたくさんあります。それらを知らずにビジネスを行うにはあまりにももったいない。, このようなプラグインの情報をご登録いただいた方に先行してお届けします。今すぐこちらからご登録ください。, 生後10ヶ月で父親の仕事の都合でアメリカへ渡り、