2008年09月18日
文字の大きさを少し大きくする。行間を空ける。
はまぞうのテンプレート、個人的にだが、文字の大きさが小さい気がする。
そして、行間は広げたほうが読みやすいと思う。
ということで、実はこのページは、本当に少しだが、文字が大きいのだが、お気づきだろうか?
はまぞうのテンプレートのスタイルシートのある箇所を変えると、文字が大きくなる。
その方法を以下にまとめます。興味がある方は、ぜひ試してみてください。
そして、行間は広げたほうが読みやすいと思う。
ということで、実はこのページは、本当に少しだが、文字が大きいのだが、お気づきだろうか?
はまぞうのテンプレートのスタイルシートのある箇所を変えると、文字が大きくなる。
その方法を以下にまとめます。興味がある方は、ぜひ試してみてください。
変更箇所ですが、管理画面から、テンプレート を選び、
「使用中」になっているテンプレートの [ カスタマイズ ] をクリックします。そして、
スタイルシート:
の入力欄から
.main{
と書かれた場所を探します。そして、その下にある「font-size:」を探します。
そして、その数字の部分を増やすと、文字が大きくなります。
たとえば以下のような感じ。
font-size:12px;
↓
font-size:14px;
テンプレートによっては、
font-size:78%;
というように、% を使っている場合がありますが、数を増やせば、大きくなるのは同じです。
そして、main-continues{ というのがその下にありますので、そこに一番近い font-size も同様に修正してください(「続きを読む」の文字の大きさが、ここで指定されています。)
行間も同様に、.main{ の下の line-height: の値を変更します。
line-height:100%;
↓
line-height:150%;
これを登録する。これだけです。元に戻すときは、元の数字に直すだけ。
で、もし、元に戻らなかったら、テンプレートそのものを設定しなおせば、簡単に戻ります。
はまぞうのデザイン変更の練習代わりに試してみてください。
<追記>
コメント欄も文字を大きくしたいという風にいただきましたので、一応その場所も(ただ、ごめんなさい、未確認です)
コメントの文字の大きさの変更は、上の記事の時と全く同じ方法で、.comments-body{ の下の font-size: の値を変更します。
あと、コメントのタイトルや、投稿欄のあたりも文字の大きさをあわせたほうがいいでしょうから、.comments-head{ や .comments-post{ の下の font-size: も、.comments-body{ と同じ値にしておくと良いと思われます。
こちらも、ぜひお試しを。
上の方法が、もし参考になりましたら、よろしければブログの記事で紹介していただき、リンクしていただくか、お気に入りなどで、このブログ (http://secondopinion.hamazo.tv) を加えていただけると、非常にうれしいです(必須ではありません) あと、コメント大歓迎 です。励みになります。
<関連記事>
はまぞうの画面上部にメニューをつけよう!
http://secondopinion.hamazo.tv/e1437147.html
文字の大きさを少し大きくする。行間を空ける。
http://secondopinion.hamazo.tv/e1446713.html
はまぞうの「説明文」の色を変えよう。
http://secondopinion.hamazo.tv/e1475373.html
ホームページで「音」は御法度
http://secondopinion.hamazo.tv/e1433573.html
記事の中に「メッセージを送る」ボタンを埋め込む
http://secondopinion.hamazo.tv/e1447693.html
「続きを読む」に記事のタイトルを埋め込む方法
http://secondopinion.hamazo.tv/e1491533.html
<<「はまぞうについて」一覧に戻ります。
「使用中」になっているテンプレートの [ カスタマイズ ] をクリックします。そして、
スタイルシート:
の入力欄から
.main{
と書かれた場所を探します。そして、その下にある「font-size:」を探します。
そして、その数字の部分を増やすと、文字が大きくなります。
たとえば以下のような感じ。
font-size:12px;
↓
font-size:14px;
テンプレートによっては、
font-size:78%;
というように、% を使っている場合がありますが、数を増やせば、大きくなるのは同じです。
そして、main-continues{ というのがその下にありますので、そこに一番近い font-size も同様に修正してください(「続きを読む」の文字の大きさが、ここで指定されています。)
行間も同様に、.main{ の下の line-height: の値を変更します。
line-height:100%;
↓
line-height:150%;
これを登録する。これだけです。元に戻すときは、元の数字に直すだけ。
で、もし、元に戻らなかったら、テンプレートそのものを設定しなおせば、簡単に戻ります。
はまぞうのデザイン変更の練習代わりに試してみてください。
<追記>
コメント欄も文字を大きくしたいという風にいただきましたので、一応その場所も(ただ、ごめんなさい、未確認です)
コメントの文字の大きさの変更は、上の記事の時と全く同じ方法で、.comments-body{ の下の font-size: の値を変更します。
あと、コメントのタイトルや、投稿欄のあたりも文字の大きさをあわせたほうがいいでしょうから、.comments-head{ や .comments-post{ の下の font-size: も、.comments-body{ と同じ値にしておくと良いと思われます。
こちらも、ぜひお試しを。
上の方法が、もし参考になりましたら、よろしければブログの記事で紹介していただき、リンクしていただくか、お気に入りなどで、このブログ (http://secondopinion.hamazo.tv) を加えていただけると、非常にうれしいです(必須ではありません) あと、コメント大歓迎 です。励みになります。
<関連記事>
はまぞうの画面上部にメニューをつけよう!
http://secondopinion.hamazo.tv/e1437147.html
文字の大きさを少し大きくする。行間を空ける。
http://secondopinion.hamazo.tv/e1446713.html
はまぞうの「説明文」の色を変えよう。
http://secondopinion.hamazo.tv/e1475373.html
ホームページで「音」は御法度
http://secondopinion.hamazo.tv/e1433573.html
記事の中に「メッセージを送る」ボタンを埋め込む
http://secondopinion.hamazo.tv/e1447693.html
「続きを読む」に記事のタイトルを埋め込む方法
http://secondopinion.hamazo.tv/e1491533.html
<<「はまぞうについて」一覧に戻ります。
Posted by SE風味 at 14:25
この記事へのトラックバック
Clogブログ(HamaZoなど)では、テンプレートによって、記事、コメント内の文字(font)が小さく、読みにくい場合があります。あちきも目が衰えてきていて・・・そこで、テンプレートのカ...
ブログ記事とコメントの文字サイズを大きくする方法【COACH***涙色の街***】at 2008年09月19日 10:04
この記事へのコメント
は~い。
早速やってみました。
良いですね~
早速やってみました。
良いですね~
Posted by COACHでし。 at 2008年09月18日 16:31
いつもありがとうございます。スタイルシートの編集としては、かなり初歩だとは思いますが、効果は大きいと思うんですよね。普通あまり触らない箇所という意味でも、いい体験になると思います。
で、文字の大きさ、このぐらいは大きくてもいいと思うんですけどねぇー(^^)
・・・で、問題があるとしたら、この大きさで見慣れると、他のサイトが見づらくなってくるんですよ(涙)
で、文字の大きさ、このぐらいは大きくてもいいと思うんですけどねぇー(^^)
・・・で、問題があるとしたら、この大きさで見慣れると、他のサイトが見づらくなってくるんですよ(涙)
Posted by SE風味
at 2008年09月18日 16:39

テンプレートによりますね。
あちきはシンプル3カラム(100%)をカスタマイズしています。
14.1inchのノートで画面いっぱいに表示することを目的として
いますでし。
あちきはシンプル3カラム(100%)をカスタマイズしています。
14.1inchのノートで画面いっぱいに表示することを目的として
いますでし。
Posted by COACHでし。 at 2008年09月18日 16:50
commentについてもアレンジしてみました。(14px)
Posted by COACHでし。 at 2008年09月18日 17:02
私もやってみました。
ん~いい感じ。ありがとうございました。
ん~いい感じ。ありがとうございました。
Posted by げんちゃん
at 2008年09月18日 18:00

やってみました!
わたしのような パソコン初心者のオバサンでも
できました~ありがとうございます
わたしのような パソコン初心者のオバサンでも
できました~ありがとうございます
Posted by かいくんばあば at 2008年09月18日 20:09
はじめまして、見やすくなって
これいいですね。
これいいですね。
Posted by ポチ改めロイジ
at 2008年09月18日 21:56

この情報はいいですね。
こういったテクニックをブログ村で聞けると、ありがたいのですが、自分が気づかないので、今まで聞きませんでした。
こういったテクニックをブログ村で聞けると、ありがたいのですが、自分が気づかないので、今まで聞きませんでした。
Posted by FP鈴木
at 2008年09月19日 00:09

皆様、コメントありがとうございます!
で、お返事をまとめてしまってすいません。>COACHでし。様、げんちゃん 様、かいくんばあば 様、ポチ改めロイジ 様、FP鈴木 様
次の記事で、ちょっと書いていますが
http://secondopinion.hamazo.tv/e1449451.html
漠然と気になっていても、直せると思わないものや、自分とは難しそうで無理と思うものは、直そうなんて意識もないから、話題にも上らないんでしょうね。
逆に、わたしなんかは、これが仕事ですから、ちょっと大きくしよう。ぐらいに思うんですが、人に教えるなんて、そんな大したことではないしと、思ってしまうわけです。
仕事で受けたら、「こういう風に直して」とは言わず、「この方がいいですよね。直しましょう」と、説明するより早く直し終えてると思うんで(笑)
私も、いい勉強になりました。皆様、ありがとうございます。
で、よかったら、このブログを紹介してもらえないでしょうか(もう書いてくださった方は、もちろん、もういいですよ。申し訳ないですから)
このブログ、アクセス数は多いんですが、実はユニークユーザー数は4分の1ぐらいしか、来てないんですよ(笑)
直帰率(1ページ見ただけで帰っちゃう)が少ないのは、それは一つの成果なんですが、いろんな人に、見てもらいたいものですから。
今後とも、どうぞ、よろしくお願いいたします。
で、お返事をまとめてしまってすいません。>COACHでし。様、げんちゃん 様、かいくんばあば 様、ポチ改めロイジ 様、FP鈴木 様
次の記事で、ちょっと書いていますが
http://secondopinion.hamazo.tv/e1449451.html
漠然と気になっていても、直せると思わないものや、自分とは難しそうで無理と思うものは、直そうなんて意識もないから、話題にも上らないんでしょうね。
逆に、わたしなんかは、これが仕事ですから、ちょっと大きくしよう。ぐらいに思うんですが、人に教えるなんて、そんな大したことではないしと、思ってしまうわけです。
仕事で受けたら、「こういう風に直して」とは言わず、「この方がいいですよね。直しましょう」と、説明するより早く直し終えてると思うんで(笑)
私も、いい勉強になりました。皆様、ありがとうございます。
で、よかったら、このブログを紹介してもらえないでしょうか(もう書いてくださった方は、もちろん、もういいですよ。申し訳ないですから)
このブログ、アクセス数は多いんですが、実はユニークユーザー数は4分の1ぐらいしか、来てないんですよ(笑)
直帰率(1ページ見ただけで帰っちゃう)が少ないのは、それは一つの成果なんですが、いろんな人に、見てもらいたいものですから。
今後とも、どうぞ、よろしくお願いいたします。
Posted by SE風味
at 2008年09月19日 05:08

.comments-body{ 、.comments-head{、 .comments-post{
のFontを12Pxから14Pxに変更して、サイズが変わったことを確認してます。
大きくて見やすくなってますね。
のFontを12Pxから14Pxに変更して、サイズが変わったことを確認してます。
大きくて見やすくなってますね。
Posted by COACHでし。 at 2008年09月19日 09:40
こんにちは!
やってみました。
ほんと、簡単に大きく出来ました!またまた感激です。
ありがとうございました m(__)m
やってみました。
ほんと、簡単に大きく出来ました!またまた感激です。
ありがとうございました m(__)m
Posted by 吉田商店のよねこ
at 2008年09月19日 10:01

> COACHでし。様
デバグ(!?)、ありがとうございます!たすかります。
お待たせの(?)、メニューのテンプレート版を用意しました。
<div class="blog"> の下におけばいいのが、だーしゃさんのブログで分かったので、ほとんど内容としては同じで、センタリングだけ加えてみました。こんな感じで、どうでしょう(^^;;
> 吉田商店のよねこ 様
良かった、簡単に直せたようで。
一応は、テンプレートに手を入れる作業なので、分かる人は、簡単に分かるんですが、そうでない人にはハードルが高いかなと思っていたものですから、多くの方から、うまくいったと連絡をいただくと、ホント、書いた甲斐を感じます。
デバグ(!?)、ありがとうございます!たすかります。
お待たせの(?)、メニューのテンプレート版を用意しました。
<div class="blog"> の下におけばいいのが、だーしゃさんのブログで分かったので、ほとんど内容としては同じで、センタリングだけ加えてみました。こんな感じで、どうでしょう(^^;;
> 吉田商店のよねこ 様
良かった、簡単に直せたようで。
一応は、テンプレートに手を入れる作業なので、分かる人は、簡単に分かるんですが、そうでない人にはハードルが高いかなと思っていたものですから、多くの方から、うまくいったと連絡をいただくと、ホント、書いた甲斐を感じます。
Posted by SE風味
at 2008年09月19日 14:02

初めてコメントします。
時々拝見させて頂いています。
今更なのですが、フォントを大きくしてみました。
ブログは商用ではなく個人の楽しみで続けていますが、すごく参考になることがあります。
また、また参考にさせていただきます。
時々拝見させて頂いています。
今更なのですが、フォントを大きくしてみました。
ブログは商用ではなく個人の楽しみで続けていますが、すごく参考になることがあります。
また、また参考にさせていただきます。
Posted by ななし
at 2008年09月27日 09:24

ぜひ、いくらでも参考にしてください。
商用/個人 関係なく、意識してほしいようなネタもはさんでますので、参考にしていただければ幸いです。
もしご迷惑でなかったらですが、このブログをお気に入りかかにかで、ブログからリンクしていただけるとうれしいです。
商用/個人 関係なく、意識してほしいようなネタもはさんでますので、参考にしていただければ幸いです。
もしご迷惑でなかったらですが、このブログをお気に入りかかにかで、ブログからリンクしていただけるとうれしいです。
Posted by SE風味
at 2008年09月28日 00:34

ありがとうございます。
了解しました。今日は時間がないのでまた明日にでもリンクさせていただきます。
了解しました。今日は時間がないのでまた明日にでもリンクさせていただきます。
Posted by ななし
at 2008年09月28日 21:18

こちらこそ、ありがとうございます。
お時間取れたときでいいですから。無理はなさらないでくださいね。
お時間取れたときでいいですから。無理はなさらないでくださいね。
Posted by SE風味
at 2008年09月29日 04:51
