上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★ 対象テンプレート: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

スタイルシートを編集します。
スタイルシートで該当する箇所を探す場合は、ナンバリング(「/*[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
最新バージョン : 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以降)。ご了承ください。


※検索でいらっしゃった方へ
この記事は、私が配布している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;
}



Recent Entries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。