初心者でもできる簡単FC2ブログの作り方

一体どんな画像なの？という方の為に見本を作ってみました。



元の画像がこれです。


　

白黒にするとこの様になります。

（環境によっては白黒になって見えない方もいます）

白黒にすると昔なつかしいという感じがしませんか？スタイルシートを編集すれば、一括ですべての画像を同じような白黒にすることもできるし、記事を作る時に画像のタグに少し手を加えれば、上記の様に個々の画像を白黒にする事もできます。


新しい記事を書く画面で画像をアップロードしてサムネイルか元画像を選ぶと、

---

<a href="http://blog〜〜〜.jpg" target="_blank">
<img src="http://〜〜〜.jpg" alt="画像の名前.jpg" border="0">
</a><br clear="all">

---

この様に記入されますよね。

この<img src="http://〜〜〜.jpg" alt="画像の名前.jpg" border="0">にSTYLE="filter: gray();"を記入すると白黒にする事ができます。

実際にどこに記入するのかというと、border="0"の後ろにSTYLE="filter: gray();"
を記入します。

つまり上の白黒画像を例にすると、

---

<a href="http://blog-imgs-41.fc2.com/r/g/r/rgrg/200.jpg" target="_blank"><img src="http://blog-imgs-41.fc2.com/r/g/r/rgrg/200.jpg" alt="ひまわり" width="250" height="166" border="0" STYLE="filter: gray();"></a><br clear="all">

---

と記入しています。


まずテンプレートの設定からスタイルシートの編集を開いて下さい。
スタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
img{filter: gray();}
を記入します。そして記入できたら更新を押して保存をします。

これだけで全ての画像が白黒になります。


まずテンプレートの設定からHTMLの編集を開いて下さい。開いたら<!--topentry-->を探して下さい。メモ帳などにコピペして検索で探すと見つけやすいと思います。

見つけたらその近くに<%topentry_body>があると思います。ここの2つの間にclass="〜"やid="〜"などがあると思います。（"〜"の中に%が入っている物は省いて考えて下さい）

例えば僕の場合なら・・・

---

<!--topentry-->
<div class="entrybox" id="a<%topentry_no>">
<h2><a href="<%topentry_link>" title="<%topentry_year><%topentry_month><%topentry_day>-<%topentry_title>" accesskey="T"><%topentry_title></a></h2>
<div class="entry_body">
<%topentry_body>

---

となっていて2つありましたね。この"〜"に囲まれた物を使うのでこれを覚えて下さい。複数ある場合はどれでもいいですが僕はentry_bodyを使いたいと思います。これを覚えたら今度はスタイルシートの方を見ます。

スタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
.か#さっき覚えた物 img{filter: gray();}
を記入します。（class=なら「.」を使って、id=なら「#」を使います。）

僕の場合なら、
.entry_body img{filter: gray();}になります。

くれぐれも「.」や「#」と忘れないで下さい。忘れると白黒になりません。

これらの指定をしておけば、いちいち1回1回、タグを画像に入れなくても、普通に画像を使うだけで全部の画像が指定された白黒になります。


毎回は白黒にしたくないけど、使う回数も結構多いからいつも個別に指定するのも面倒だなという人や絵文字をたくさん使うんだけど、絵文字は白黒にしたくない人はこの方法がいいと思います。

まずテンプレートの設定からスタイルシートの編集を開きます。

開いたらスタイルシートを一番下までスクロールさせて、一番下に書かれているタグから一行あけて
.好きな名前 img{filter: gray();}
を記入します。

そして、画像を使う新しい記事を書く時に少し手を加えます。
画像を選ぶと、

---

<a href="http://blog〜〜〜.jpg" target="_blank">
<img src="http://〜〜〜.jpg" alt="画像の名前.jpg" border="0">
</a><br clear="all">

---

この様に記入されますが、白黒にしたい時はこの前後に、
<div class="さっきつけた好きな名前">〜〜〜</div>
を付け加えます。

反対に白黒にしたくない時は、何もつけずにいつもの様にそのまま画像を使います。

例えば名前を「sirokuro」にしたら、
.sirokuro img{filter: gray();} と指定して
白黒にしたい画像を使う時に、
<div class="sirokuro">〜〜〜</div>
とします。

画像を使う時に少し面倒ですが、この語句を辞書登録しておけば全然苦にならないと思います。

◇他にもフリーソフトを使ってあらかじめ画像を白黒にした画像を使うという方法もあります。

◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。