PAGEKitテクニック 
2025年7月17日
3．編集を保存 
どのデバイスでも読みやすく！オリジナルCSSでフォントサイズを自在にコントロール
2025年7月17日オリジナルCSSとは？
PAGEKitでは、テンプレートのデザインを大きく崩すことなく、柔軟にスタイルを調整できる「オリジナルCSS」機能が用意されています。
この機能を活用すれば、見出しや本文のフォントサイズ、余白、色など、細かなカスタマイズを追加CSSで実現できます。
スマホとPCでフォントサイズを変えるには？
たとえばパソコンでは大きめの文字を、スマホでは読みやすいよう少し小さめにしたいというニーズがあります。
そんなときに使えるのが「メディアクエリ」というCSSの仕組みです。
メディアクエリとは？
メディアクエリは、画面サイズ（幅）に応じてCSSのスタイルを切り替えるための指定方法です。
以下のように記述することで、幅950px以下の画面（主にスマホ）にだけ適用されるスタイルを記述できます。
@media screen and (max-width: 950px) {
.target-text {
font-size: 14px;
}
}
.target-text {
font-size: 14px;
}
}
実際の手順
1．編集ページを開く
フォントサイズを調整したいページを編集画面で開きます。
2．対象のテキストにclassを指定する
「HTML部分編集」を使い、対象テキストにclassを指定します。以下のような形です。記入後は更新ボタンで編集画面に反映させます。
< div class=”target-text”>見出しテキスト< /div>
保存ボタンでページの編集を終了します。
4．デザイン編集画面へ移動
上部メニューから「背景・カラー」→「デザイン編集」へ移動します。
5．オリジナルCSSを編集
「オリジナルCSS」欄の編集ボタンをクリックして、以下のCSSを記述します。
/* PC用スタイル */
.target-text {
font-size: 18px;
}
/* スマホ用スタイル */
@media screen and (max-width: 950px) {
.target-text {
font-size: 14px;
}
}
.target-text {
font-size: 18px;
}
/* スマホ用スタイル */
@media screen and (max-width: 950px) {
.target-text {
font-size: 14px;
}
}
6．反映する
「設定」ボタンでCSS編集を終了し、「オリジナルCSSを利用する」にチェックを入れたうえで「変更を反映する」ボタンをクリックしてください。
まとめ
オリジナルCSSを使えば、ページ全体のデザインを壊さずに、表示環境に応じた柔軟なスタイル調整が可能です。
今回ご紹介した「メディアクエリ」と組み合わせれば、スマホとPCで見やすいフォントサイズを切り替えるといった対応も簡単に行えます。
フォントサイズはユーザーの読みやすさに直結する大事な要素。ぜひこのテクニックを使いこなして、より快適な閲覧環境を実現しましょう。
ABOUT ME  |
ホームページかんたん作成のPAGEKit（ページキット） ホームページを作るのは、むずかしそう。 そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。 専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。 まずは一度、実際の使いやすさを体験してみませんか？ |