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

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へのリンクは消さないでください。ただし、ベーステンプレートを私が制作したということが確実に分かるような書き方であれば、多少表記を変更してもかまいません。
関連記事


コメント

  1. 匿名希望 | I4t1ZHtI

    Re: 画像差し替えでの注意点

     テンプレートをFC2ブログ内で使わせていただいております。
     多少の表記の変更は認められるということですが、
     確認したいことがありますので書き込みします。

     たとえば、TemplateDesign [ herba-3col-mini ] By Nefertを
    TemplateDesign By Nefert、という風に変えるのは構わないでしょうか。

    ( 16:50 [Edit] )

  2. rimse | 4HNZ8mMg

    Re: 画像差し替えでの注意点

    あ、はい、大丈夫です。
    全然問題ありませんe-465

    お使いいただきましてありがとうございます!
    どうぞ使い倒してやってくださいませe-466

    ( 17:21 [Edit] )

  3. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 01:49 )

  4. rimse | 4HNZ8mMg

    Re: 画像差し替え時の注意

    >> 3番目のコメントの方へ
    昔に書いて埋もれてしまっていた記事を加筆・修正してみました。
    http://rimse.blog73.fc2.com/blog-entry-95.html
    いかがでしょうか?

    ( 07:27 [Edit] )

  5. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 14:04 )

  6. rimse | 4HNZ8mMg

    Re: 画像差し替え時の注意

    masaさん初めまして。

    [PR] クレジット プチ整形 ダイエット / FC2Ad /FC2ブログ
    この部分は、FC2の広告表示にあたるので、削除することは出来ません。HTMLでいうと、
    <div class="ad"><%ad>/<%ad2></div>
    の部分にあたります。

    Template [Snowdance] by Nefert
    この部分は私のクレジット表示になります。
    残しておいていただけるとありがたいです。

    Photo [Snow Magic] by katmere (Flickr)
    この部分はデフォルトの画像のクレジット表示になっています。画像を差し替えた場合は、差し替え後の画像にあわせてクレジットを変更してください。
    HTML中では
    Photo [Snow Magic] by <a href="http://www.flickr.com/photos/katmere/98832482/">katmere (Flickr)</a>
    の部分に当たります。


    …すみません、なんだか記事と殆ど変わらない内容になってしまいました。いかがでしょうか?

    ( 22:45 [Edit] )

  7. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 10:17 )

  8. rimse | 4HNZ8mMg

    Re: 画像差し替え時の注意

    >> 9番目のコメントの方へ
    一応、出来るかと思います。
    ただ、お使いのテンプレートによって編集内容が異なりますので、恐れ入りますがどのテンプレートをお使いか教えていただきたいです。
    よろしくお願いいたします。

    ( 13:14 [Edit] )

  9. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 23:46 )

  10. rimse | 4HNZ8mMg

    Re: 画像差し替え時の注意

    新規記事にて解説をいたしました-。
    http://rimse.blog73.fc2.com/blog-entry-206.html
    どうぞお試しくださいませe-68

    ( 02:51 [Edit] )

  11. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 20:34 )

  12. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 17:35 )

  13. emizo | -

    Re: 画像差し替え時の注意

    テンプレートを使用させてもらおうと思っています。
    ただ、初心者なもので質問があります。
    画像の変更からphoto[○○○]までは上手くできました。
    そのあとの「by aprillynn77(Flickr)」の部分なんですが
    過去の記事を読ませていただくと
    href="http://www.~    (Flickr)</a>
    の部分を変更するということで読ませて頂きましたが、
    この部分を削除してしまうのはNGでしょうか?
    それとも何か作成して(使用している画像のurlなどをつけて「by aprillynn77」部分を変更(自分の名前等)にする。
    というやり方なんでしょうか?
    説明がわかりにくくてすみません。
    お返事をいただけると大変ありがたく思います。
    素敵なテンプレート、大変気に入りました。
    どうぞよろしくお願いいたします。

    ( 16:07 )

  14. rimse | 4HNZ8mMg

    emizoさん初めまして。コメントありがとうございます。
    返信したはずなのですがちゃんと投稿されていなかったみたいです。ごめんなさい。

    ライセンス表示の書き方は特に厳格に決まりがあるわけではないので、誰が権利を保有しているかが分かれば書き方はご自由にしていただいて結構ですよ。

    emizoさん自身が著作権を保有する画像に変更していて、とくにそういったことを明記する必要を感じていなければ、
    > Photo [使用している画像のタイトル] by <a href="画像の著作者へのリンク">画像の著作者</a>
    これに当たる部分は削除してしまっても大丈夫です(明記しなくても著作権は発生します)。
    ただし、この部分を削除する場合はCCライセンスの部分も削除しておいた方が良いでしょう。

    emizoさんが著作権を保有していない場合は、きちんと画像の著作者のページへリンクし、誰が著作権を持っているかを明記する必要があります。この場合には、「使用している画像のタイトル」、「画像の著作者へのリンク」、「画像の著作者」の部分を編集してください。

    ( 17:13 [Edit] )

  15. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 21:16 )

  16. rimse | -

    直前のコメントの方へ

    提示された情報だけでは判断ができませんので、ブログのURLを教えてください。

    ( 23:52 )

  17. 名無し | -

    はじめまして。
    よくわからないことがあるので質問いたします。

    以下表記は削除してはいけないのでしょうか?

    <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>

    ( 02:11 )

  18. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 20:02 )

  19. rimse | -

    んー…ごめんなさい。きちんと表示されているため、症状が確認できません。
    もしかすると、ちょうど画像サーバーなどの調子が悪い時間とぶつかってしまったのかもしれませんね。

    ( 00:44 )

  20. rimse | -

    ななしさんへ。
    > 以下表記は削除してはいけないのでしょうか?
    >
    > <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>

    この記述ですと、消してしまっても大丈夫です。
    ただし、「継承(Share Alike)」の項目が適用されている場合は、消してはいけません。

    ( 01:41 )

  21. 白い犬 | TY.N/4k.

    色の設定で質問です

    こんにちは、テンプレート愛用させて頂いています。
    デザインをリニューアルし、どうしてもわからない部分があるので聞いてもいいでしょうか。

    エントリータイトルの横の、小さな赤いサンカク を 色を変えるか、小さな画像に差し替えたいのですが、ここをいじれる部分がわからないのです;
    初心者なりに頑張っているのですが・・・すみません。

    お時間のある時に、お答えいただけますと嬉しいです。

    ( 04:22 [Edit] )

  22. rimse | 4HNZ8mMg

    Re: 色の設定で質問です

    白い犬さん、コメントありがとうございます。

    > エントリータイトルの横の、小さな赤いサンカク を 色を変えるか、小さな画像に差し替えたいのですが、ここをいじれる部分がわからないのです;

    http://rimse.blog73.fc2.com/blog-entry-185.html
    こちらの記事のコメント5番をご覧下さい。

    ( 11:17 [Edit] )

  23. 白い犬 | PLO2bkK6

    rimse様、
    やってみましたら上手くできました!本当にありがとうございます。

    ただ、 文字と画像がくっつきすぎていて padding : 2em; というのを追加したらかっこ悪くエントリータイトルの上下にスペースが出来てしまいました。
    このままでも構わないのですが、もしお暇がありましたらココの修正までお付き合い頂けますと幸いです。
    もうひとつブログを持つことになったので、そちらでもこのテンプレを使わせて頂きたく、修正方法が分かると助かります!

    ( 11:17 [Edit] )

  24. rimse | 4HNZ8mMg

    白い犬さん

    > ただ、 文字と画像がくっつきすぎていて padding : 2em; というのを追加したらかっこ悪くエントリータイトルの上下にスペースが出来てしまいました。


    「padding : 2em;」という記述は、上下左右に2文字分の余白を作るというものです。
    上下に余白を作らないのであれば、「padding : 2em;」ではなく、「padding : 0 2em;」としなければいけません。
    もっと細かく指定するのであれば、「padding : 2em;」を

    padding-top : e-3;
    padding-left : e-3;
    padding-right : e-3;
    padding-bottom : e-3;

    とし、e-3の部分を書き換えて下さい。

    詳しくはスタイルシートについての解説サイトなどをみると良いでしょう。
    http://www.tagindex.com/stylesheet/box/padding2.html
    ↑こちらなどがわかりやすいと思います。

    ( 00:33 [Edit] )

  25. 白い犬 | M8fmrdFo

    何度も丁寧に、本当にありがとうございます。
    とても助かりました!

    お体に気を付けて、2012年も素敵な日々をお過ごしください♪

    ( 21:49 [Edit] )

コメントの投稿

(コメントの編集・削除時に必要)
(管理者にだけ表示を許可する)

質問の際のお願い

テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


トラックバック

Trackback URL
Trackbacks


Recent Entries