2014-03-03 16:48

私の使用しているテンプレート

 イザからFC2に引っ越してきて大いに戸惑う事、テンプレートである。
私もいろいろ変えてみて、どうやら今のテンプレートで不満足ながらマアマアだと納得している。
昨日友遊さんのブログにコメントした際、私の使っているテンプレートはドレかと言う質問を受けた。
そこで私の使っているテンプレートとオリジナルをどのように変えて使っているかを纏めてみた。

テンプレートでお困りの方に何かの参考になればと思う。

最初に私の使っているテンプレート
・共有テンプレートの「sd_blue_sky_blue 」です。


それを私用に改造したのがどうなっているかを示します。

最初にこれがオリジナルのテンプレートの画面(70%に縮小しています)


2014-3-3ブログキャプチャー画面オリジナル


これはオリジナルテンプレートのコメント欄

2014-3-3ブログキャプチャー画面オリジナルコメント欄


これが現在使っている一部改造したテンプレート

2014-3-3ブログキャプチャー画面現在使用中


そしてこれがそのコメント欄

2014-3-3ブログキャプチャー画面現在使用中コメント欄



こんな風になっています。
オリジナルのテンプレートに対し文字が大きくなっている事、横幅が長くなっていることが分かると思います。
また字体が少し太めの感じで読み易くなっていると思います。

ではどう改造したのかと言いますと

① 改造する所は「sd_blue_sky_blue のスタイルシート編集」の所です。

スタイルシートの該当部分をコピー貼付してありますのでそのままコピーペースト出来ます。

② フォントサイズとフォント追加

/* body部分指定 */
body {
background-color: #ffffff;
font-size: 90%;
font-family: Verdana, sans-serif;
color: #333333;

これを
/* body部分指定 */
body {
background-color: #ffffff;
font-size: 100%;          ←90%を100%にしました
font-family: Meiryo, Verdana, sans-serif;  ←フォントにmeiryo(メイリオ)を追加しました
color: #333333;

フォントサイズはコメント欄、右側のプロフィル欄も共通です。この為もっと大きくすると要らないプロフィル欄が大きくなりますのでこんな所にしました。
フォントは3種類書いてありますが、そのコンピュータが使えるフォントを順に表示するのでほとんどメイリオになります。メイリオはウィンドウズ用の日本語フォントで読みやすいです。
特にB(ボールド強調)がきれいに出ます。



③ 本文全体の幅を広げる

/* メイン部分指定 */
#main{
width: 900px;
margin: 0px auto;
text-align: left;
}

/* 左ブロック指定 */
#left{
float: left;
width: 660px;


それを

/* メイン部分指定 */
#main{
width: 1000px;     ←900を1000にしました(これは全体の幅)
margin: 0px auto;
text-align: left;
}

/* 左ブロック指定 */
#left{
float: left;
width: 760px;     ←660を760にしました(これは左側部分)

これは見れば分かると思います。+100が本文だけになるようにしてあります。


④ 記事部分の文字をさらに大きくした

/* 記事部分h2 */
#left h2.etitle{
font-size: 1.2em;

それを
/* 記事部分h2 */
#left h2.etitle{
font-size: 1.5em;    ←1.2から1.5に


⑤ コメントフォームの幅

/* コメントフォーム幅 */
.cmt{
width: 400px;
}

それを
/* コメントフォーム幅 */
.cmt{
width: 600px;     ←400を600にした

これでコメント書き込み欄が広がったので少しは書きやすくなったのではないでしょうか。


こんな所です。
他にもタイトルの上に時刻が表示されており、これも文字が小さくなってますが、まあこれは趣味の世界。
何処を変えると変わるか試してみてください。

また皆さんからより良いアイディアなど有りましたら是非お願いします。
何せ私もこんな事は全くの素人、試行錯誤の闇の中をさまよってますので・・
  1. 日常の話題
  2. TB(0)
  3. CM(6)

コメント

ありがとうございました。
完全に真似させて戴きました。
とても見やすくなりました。

  1. 2014-03-03 18:08
  2. URL
  3. yuyuu #-
  4. 編集

とても見やすいです。

本文とコメントの両方が小さい字は、拡大すればいいんですけど、
片方だけ小さい文字だと、拡大作業が増えて面倒です。
主様のブログは両方の大きさが揃っているので助かります。

それと、メイリオってちょうどいい太さですね。
  1. 2014-03-03 20:05
  2. URL
  3. 胴長人 #-
  4. 編集

Re: タイトルなし

> ありがとうございました。
> 完全に真似させて戴きました。
> とても見やすくなりました。


お役にたって良かったです。
  1. 2014-03-03 22:00
  2. URL
  3. 短足おじさん二世 #-
  4. 編集

Re: タイトルなし

> とても見やすいです。
>
> 本文とコメントの両方が小さい字は、拡大すればいいんですけど、
> 片方だけ小さい文字だと、拡大作業が増えて面倒です。
> 主様のブログは両方の大きさが揃っているので助かります。
>
> それと、メイリオってちょうどいい太さですね。


ややッ ここにも胴長さんが・・・ 私も胴長短足、おまけにスケベ人間。
これからも宜しくお願いします。

メイリオは日本語用に開発されたフォント、それでやや太めで見やすい。
メイリオは明瞭なんですが、メイリオの方が一文字少ないからそうしたんだとか。
私にはボールド(強調、太字)が読みやすくていいですね。
  1. 2014-03-03 22:05
  2. URL
  3. 短足おじさん二世 #-
  4. 編集

素晴らしい。
小生FC2はテンプレの関係で放置状態ですがこれなら使えそうです。何とか使えるようにしようと思って本買ってきたところでしたが助かりました。

exciteはコメンたらんがどうにもきついので遠からぬうちの移転を考えてます。有難うございました。
  1. 2014-03-05 17:50
  2. URL
  3. kazk #-
  4. 編集

To:kazkさん

> 素晴らしい。
> 小生FC2はテンプレの関係で放置状態ですがこれなら使えそうです。何とか使えるようにしようと思って本買ってきたところでしたが助かりました。
>
> exciteはコメンたらんがどうにもきついので遠からぬうちの移転を考えてます。有難うございました。


エキサイトは私には字が小さいので書きにくかったです。
是非使ってみてください。
不具合は有ると思います。一緒に研究して改善しましょう。
  1. 2014-03-05 21:16
  2. URL
  3. 短足おじさん二世 #-
  4. 編集

コメントの投稿

管理者にだけ表示を許可する