文字サイズを変更する

★ 対象テンプレート：Certapax

スタイルシートを編集します。

■ ページ全体のフォントサイズの変更

/*────────────────────────────────────────
 ■ ページ全体の設定
        ページ全体に適用するスタイルを設定しています。
────────────────────────────────────────*/
body {
    margin          : 0;
    padding         : 0 3.5em;
    background-color    : #fff;
    background-image    : url("http://blog-imgs-26.fc2.com/r/i/m/rimse/certapax_background.jpg");
    background-repeat   : no-repeat;
    background-position : center top;
    line-height     : 1.4;
    color           : #555;
    font-family     : "Verdana" ,"tahoma" ,"MS UI Gothic" ,"Osaka" ,sans-serif;
    font-weight     : normal;
    font-size       : 90%;
    
    /*　for IE5　*/
    text-align      : center;
}

この中の、「font-size : 90%;」の部分を変更してください。

画像差し替え時の注意

画像を差し替えをする際の注意点を三つあげています。必ずご確認くださいませ。

1. 「画像が表示された！」で安心しないで。

普段InternetExplorerをお使いの方は、気づかないうちにミスをしていることがあります。
自分のパソコンでは画像が見えていても、他に人には画像が表示されていない、なんて事態になってしまう大変厄介なミスです。
事実、ミスに気づかず運用している方が結構いらっしゃいます。
必ず次の部分を確認してください。


簡易カスタマイズ内、タイトル画像の変更に関する部分は、テンプレートによって多少コメントの違いがありますが、基本的には以下のようになっています。

/* -- ▼ 改行禁止（ 「折り返される」のはOK ）*/
  background-image : url("画像のURL");
/* -- ▲ 改行禁止ここまで */ 

もし、「background-image」から「;」までの間で改行が入ってしまった場合、InternetExplorerでは画像が表示されるが、そのほかのブラウザでは表示されないということが起こります。

そのため、「改行禁止」と注意書きをしているのですが、結構多くの方が、

/* -- ▼ 改行禁止（ 「折り返される」のはOK ）*/
  background-image : url("画像のURL
");
/* -- ▲ 改行禁止ここまで */ 

としてしまっているようです（しかもそのことに気づいていない）。

ということで、画像を差し替えるときには、「background-image」から「;」の間に改行を入れず、一行にするようにしてください。表示上折り返されてしまうのは大丈夫です。
気になる方は、折り返しの設定を外したテキストエディタなどで該当箇所を編集し、テンプレート側へコピー・ペーストするようにすればより安全になるかと思います。

また、タイトル画像を差し替えたときには一度FirefoxやOpera、Chromeといったブラウザで動作を確認したほうが良いでしょう。
改めて言いますが、このミスは普段InternetExplorerをお使いの人は気づいていないことが多いです。

HTMLやCSSは、ちょっとの記述ミスで問題が生じますので、簡単な編集でも、しっかりと動作確認するようにしてください。

2. 「ファイルアップロード」を使いましたか？

ファイルアップロードをつかわず、FC2ブログ以外の場所に置いてある画像を使おうとしても、「自分では画像が見えるけど、他の人からは画像が見えない」ということになる恐れがあります。使用する画像はかならずFC2ブログの機能である「ファイルアップロード」を使ってアップロードしてください。

3. 画像差し替えがうまくいったら

Nefertで公開しているテンプレートは、基本的に「クリエイティブ・コモンズ・ライセンス」（以下、CCライセンス）でライセンスされています。

CCライセンスの表示はフッター部分にあります。もしこのフッター部分のCCライセンスの表示を残したまま画像を差し替えて使用していると、その表示をみた人が、“あなたが著作権を持つ画像”をCCライセンスで配布されている画像であると勘違いし、別のところで再使用してしまうということが考えられます。

さらに悪いことに、差し替え後の画像が“あなたが著作権を持たない画像”であった場合は、あなたが「無断」で、しかも「著作者を偽って」、しまいには「再配布」までしているのと同じことになってしまいます。

そのため、画像を差し替えた際には、HTMLのフッター部分も編集するようにしてください。
なお、フッター部分を編集しなかったことによって、無断使用やその他の問題が発生したとしても、私は一切関知致しません。

編集内容は以下を参考にどうぞ。

まず、フッタ部の基本構造はこのようになっています。
※HTMLのバージョンによって、記述が異なることがあります。

<!-- 【 ▼フッタエリア ここから 】 -->
<hr class="separator" />
<div id="footer">
<div class="ad"><%ad>/<%ad2></div>
<p class="design">
Template[テンプレート名・バージョンなど] By <a href="http://rimse.blog73.fc2.com/">Nefert</a> / 
Photo [使用している画像のタイトル] by <a href="画像の著作者へのリンク">画像の著作者</a>
<p class="licence">
このテンプレートは、<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.ja">クリエイティブ・コモンズ・ライセンス</a>の下でライセンスされています。<br />
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.ja">
<img src="http://blog-imgs-15.fc2.com/r/i/m/rimse/creativecommons-by.png" alt="Creative Commons License" style="border-width:0" /></a>
</p>
</div>
<!-- 【 ▲フッタエリア ここまで 】 -->

CCライセンスの表示を外す場合は、

<p class="licence">
このテンプレートは、<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.ja">クリエイティブ・コモンズ・ライセンス</a>の下でライセンスされています。<br />
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.ja">
<img src="http://blog-imgs-15.fc2.com/r/i/m/rimse/creativecommons-by.png" alt="Creative Commons License" style="border-width:0" /></a>
</p>

この部分を削除してください。

また、

Photo [使用している画像のタイトル] by <a href="画像の著作者へのリンク">画像の著作者</a>

という部分が元画像の著作者のクレジット表示となっていますので、差し替え後の画像にあわせ、必ず修正を施してください。

なお、テンプレートのベースとなるHTML・CSSは、CCライセンス【表示】でライセンスしていますので、クレジットとなるNefertへのリンクは消さないでください。ただし、ベーステンプレートを私が制作したということが確実に分かるような書き方であれば、多少表記を変更してもかまいません。

表示幅を固定する@Fall-Time

★ 対象テンプレート：fall-time

スタイルシートを編集します。
スタイルシートで該当する箇所を探す場合は、ナンバリング（「/*[3.4]*/」など）を参考にすると便利かと思います。

/*[2.3]*/
#wrapper {
  margin : 0 auto;
  min-width : 600px;
  border-left : 1px solid #fff;
  border-right : 1px solid #fff;
  border-bottom : none;
  /*for IE5*/ text-align : left;
}

この中の、

  min-width : 600px;

を次の記述で置き換えてください。

  width : 800px;

ここでは、例として表示幅を800ピクセルで固定していますが、「800px」の部分を変更することで、自由に幅を指定することが可能です。

続いて、

/*[2.4]*/
/* hide from Mac IE \*/
* html #wrapper {
  width : expression(
  (document.documentElement.clientWidth < 600)? "600px" :
  "auto");
}
/* end MacIE */

という記述がありますので、この部分を削除してください。

これでカスタマイズは完了です。
お疲れ様でした。

fall-time

クリックでテンプレートのプレビューができます。

★ 基本情報

テンプレート名 : fall-time
最新バージョン : 2.0

更新履歴 - Update history

09/10/18 : バージョン表記無し→2.0

[Modify] 追記開閉スクリプト実装

[Modify] 全記事一覧表示に対応

[Modify] 「前後の記事へのリンク部分」のスタイル変更

[Modify] プラグイン3の出力方法を変更

[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応

[Modify] 簡易カスタマイズ改良

[Modify] IE8用の微調整

[Modify] MacIEへのスタイル適用を除外

[Modify] pre、hrなどのデフォルトスタイル変更

[Modify] その他色々大幅更新

秋のイメージを大胆にデザインしました。
左右カラムの切り替え、幅可変／固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています（blanc 2.0以降）。ご了承ください。

★ テンプレート更新通知機能つき

ver.2.0より、テンプレートの更新通知機能がつきました。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

• 表示幅を固定する
  ver2.0では、幅固定への切り替え機能を標準で用意しています。詳しくはスタイルシート上部のカスタマイズ項目をご覧ください。

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。 詳しくはスタイルシート上部を参照してください。
（バージョンによって項目に多少差があります）

• フォントの設定
  • 基本となるフォント
  • ブログタイトルのフォント
• フォントサイズの変更
  • 全体の文字サイズ
  • タイトルの文字サイズ
  • ブログ紹介文の文字サイズ
  • メインカラムの文字サイズ
  • 記事の本文の文字サイズ
  • サブカラムの文字サイズ
• 文字色の変更
  • 全体の文字色
  • 記事の文字色
  • ブログタイトルの文字色
  • ブログ紹介文の文字色
  • サブカラムの文字色
  • 一部のアクセントカラー
• カラム幅の変更
• 記事中の画像に枠をつける
• 幅可変／固定の切り替え
• カラム配置設定

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。
（バージョンによって項目に多少差があります）

1.要素の回り込み

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。

指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。

<img src="画像のurl" class="f-left" />

太字の部分を追加すればOKです。

なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、

<img src="画像のurl" class="f-left photo" />

というように、半角スペースとともにクラス名を追加してください。

2.写真風の枠

画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="photo"」を追加してください。

<img src="画像のurl" class="photo" />

太字の部分を追加すればOKです。

3.シンプルな枠

画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="imgbox"」を追加してください。

<img src="画像のurl" class="imgbox" />

太字の部分を追加すればOKです。

4.枠をつけない

記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ（スタイルシート上部、簡易カスタマイズ内に項目があります）と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。

指定方法 imgタグに 「class="noimgbox"」を追加してください。

<img src="画像のurl" class="noimgbox" />

太字の部分を追加すればOKです。

★ 使用条件・ライセンスについて

このテンプレートは、 クリエイティブ・コモンズ・ライセンス の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

タイトル部写真

"against the white sky"/Ozyman (Flickr)

HTML・CSS

"fall-time" / rimse

[ Close ]

画像に枠をつける

※検索でいらっしゃった方へ
この記事は、私が配布しているFC2ブログテンプレート専用の記事です。ご了承ください。


画像に枠をつけるためには、二つの方法があります。

■ 方法1
一つ目の方法は、「携帯の管理画面から記事を投稿する際に絵文字を使用していない」という条件を満たしていれば、スタイルシートに次の記述を追加するだけで可能です。おそらく、殆どの方はこちらの方法で大丈夫だと思います。なお、この方法では記事中の絵文字以外のすべての画像に自動的に枠がつけられます。

.entry img{
  border : 1px solid #555;
  margin : 1px;
}
img.emoji {
  border : none;
  margin : 0;
}

携帯の管理画面から投稿する際に絵文字を使用すると、一つ目のやり方だと絵文字にも枠がついてしまうようです。（一般の管理画面からだと、img要素に「emoji」というクラスがつけられるのですが、携帯の管理画面からの投稿の場合、クラス名がついていないimg要素が生成される仕様のようです。）
携帯の管理画面からの投稿が少ない＋絵文字を使う頻度が少ないのであれば、エントリーの編集から、絵文字部分のタグに「class="emoji"」というのを追加することで枠を消すことができますが、絵文字を多く使っている場合は、二つ目のやり方を試してみてください。


■ 方法2
一つ目の方法では記事中のすべての画像に枠がつけられるのに対し、二つ目のやり方では、枠をつけたい画像を選んでスタイルを適用させます。枠をつけたい画像が決まっている場合などは、こちらの方法が良いかもしれません。
この方法を使うには、次の手順を踏むことになります。
1.スタイルシートに枠をつけるための記述を追加する
2.枠をつけたい画像に対し、1で設定したスタイルを適用させる

それぞれのやり方は以下の通りです。

1.スタイルシートに枠をつけるための記述を追加する
スタイルシートに、次の記述を追加してください。

img.img-b {
  border : 1px solid #555;
  margin : 1px;
}

2.枠をつけたい画像に対し、1で設定したスタイルを適用させる
次に、枠をつけたい画像に対して、次のように修正を施します。

<img src="（画像のURL）" alt="（画像のタイトル）" border="0" />

↓（class="img-b"を追加）

<img src="（画像のURL）" alt="（画像のタイトル）" border="0" class="img-b" />

なお、ここでは適当なクラス名：「img-b」を設定しましたが、このクラス名は変更することも可能です。
クラス名を変更するには、1・2の編集の際に「img-b」という箇所を別のクラス名で置き換えてください。
（クラス名に日本語は使えません。良くわからない人は触らない方がいいかと。）

方法2の利点は、画像の種類に合わせて枠のデザインを選べることです。方法1と組み合わせることで、より自由度の高いデザインが可能になります。
例として、私がflickrの写真をブログに貼る際に適用させているスタイルを紹介しますね(*＾-')ノ
クラス名は「flickr」としています。

.flickr {
  background-color:#f5f5f5;
  padding:1px;
  border:1px solid #333;
  margin:1px;
}