文字サイズを変更してみよう

こんにちは。あきです。


それでは早速前回の記事でも書いた以下の箇所の文字サイズを変更していきます。


※前回の記事を読んでない方で文字サイズを変更したい場合は、まず前回の記事を読むことを強くお勧めします。

 


・ブログのタイトル:<%blog_name>


・ブログの説明文:<%introduction>


・記事のタイトル:<%topentry_title>


・本文:<%topentry_body>



自分のテンプレートには<h1>~<h3>タグが指定されていないので、上記の各変数に<h1>~<h3>タグを付加していきながら文字サイズを変更していきます。



テンプレートによって、下の「3」~「6」の<h>タグの付加作業は必要ありません。



いつもと同じようにFC2ブログ
よりログインし管理者ページを表示します。



1.「テンプレートの設定」をクリックします。

 


 




2.現在使用しているテンプレートの「編集」をクリックします。

 


 




3.青枠の部分をクリックし「Ctrl + F」キーを押下して、検索ダイアログを表示します。 その後検索する文字列にブログのタイトル変数「<%blog_name>」を入力し「次を検索」をクリックします。


  以下の箇所で「<%blog_name>」が検索されますがこれは<title>タグで囲まれています。これは画面の一番上のタイトル部分

 を表示する為のタグなので無視して「次を検索」をもう一度クリックします。


 


 




4.以下の様にブログのタイトル「<%blog_name>」が<h1>タグで囲まれていません。


<h1>タグを黒枠のように挿入します


 


 




5.次はブログの説明文「<%introduction>」を「Ctrl + F」キーで同じように検索し以下の様に<h2>タグを挿入します。

 


 




6.次は記事のタイトル「<%topentry_title>」を「Ctrl + F」キーで同じように検索し以下の様に<h3>タグを挿入します。



 


 




7.次は本文「<%topentry_body>」を「Ctrl + F」キーで同じように検索し以下の様に<h4>タグを挿入します。と言いたいところですがこの<h(n)>タグは見出しを設定するためのタグなので特に本文に指定する必要はありません。


「<%topentry_body>」の場合は、この変数に設定してあるタグクラス名をチェックします。この場合「main_txt」がクラス名となります。


 


 




8.「更新」ボタンをクリックします。

 


 




9.画面を下に少しスクロールさせスタイルシートの編集欄の適当な位置に

h1 {font-size : 40px;}
h2 {font-size : 30px;}
h3 {font-size : 30px;}


と以下の黒枠の様に追加してください。


※テンプレートによって既にh1~h3がスタイルシートに設定済みの為、この設定は不要です。既に設定されている場合は「7」の「本文」で行った操作のように各変数に何の見出しタグまたはクラスが使用されているか確認し、既存の要素にフォントサイズを適用してください。

 


 




10.プレビューボタンをクリックすると以下の様にフォントサイズが変更されています。

変更前



変更後

 


 




11.「7」で確認した本文の文字サイズを変更していきます。スタイルシートの編集より「7」でチェックしたクラス名「main_txt」を探し、フォントサイズを以下の様に変更します。

 


 



12.プレビューボタンをクリックすると以下の様にフォントサイズが変更されています。

変更前


変更後

以上がフォントサイズの変更方法です。


ほとんどのテンプレートは「7」の本文で行った操作のように、変数に使用されているタグを確認し、CSSを直接編集するだけでフォントサイズの変更が可能です。



少し分かりにくかったかと思いますが、cssの仕組みを少し理解するだけで、色々なカスタマイズを自分でできるようになるので挑戦してみてください。



文字サイズを変更してみよう」への9件のフィードバック

  1. Jun

    こんにちは。
    AKIさんすごく詳しいですね~
    難しそうですが順を追っていけばできそうな・・・
    自分ももっといろいろカスタマイズできるようになりたいです。
    応援していきます^^

    返信
  2. またまた桃です!

    こんばんは。またまたオジャマです♪
    相互リンクしていただけて嬉しいです。
    ありがとう。゚+.ヾ(´∀`*)ノ
    これからもよろしくね。
    ・・・!!!
    なんか、すっごくマニュアル化してるぞ。
    一冊の本にできそう。すごい丁寧(*^_^*)
    わかりやすいですね~♪
    FC2行こうかな(笑)
    では、今まで以上に 仲良くしてくださいネ。

    返信
  3. shopanet

    こんにちは、ランキングから来ました。かなりわかりやすい説明ですね。絵の使い方が初心者とは思えないです。びっくりしました。
    また来ます。応援ポチ♪

    返信
  4. shopanet

    先日は我がブログへの訪問ありがとうございます。言っておきますが、僕も本当の恋愛の方は、
    さっぱりです・・・・。
    また来ます。応援ポチ♪

    返信
  5. AKI

    ●Junさん
    コメントありがとうございます。
    実は自分も最近知ったんです。
    今回のは少しややこしかったかもしれません。
    ●桃さん
    コメントありがとうございます。
    こちらこそ相互リンク本当に感謝っす。
    これからもよろしくです。
    ●shopanetさん
    コメントありがとうございます。
    >絵の使い方が初心者とは思えないです。びっくりしました。
    ありがとうございます。
    これからも分かりやすい説明を続けていけるよう
    がんばります。
    ●なおさん
    コメントありがとうございます。
    そうか。無料レポートにすればいいのか。
    作ってみようかな。
    ●Nitaさん
    コメントありがとうございます。
    自分も最近までCSS全然知りませんでした。
    まだ実は良く分かってません。
    ●りりりのりんさん
    コメントありがとうございます。
    自分も最初は苦労しました。
    分かればそんなに難しくないですよね。

    返信

ド素人が情報商材買ってみました・りりりのりん にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>