スポンサーサイト

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

--年--月--日 スポンサー広告 トラックバック(-) コメント(-)

FC2ブログ記事作成時の工夫など

どうも。こんばんは。スレイブユニットがまた増えたkimです。
今日はブログ記事を書くにあたって知ってたら良いんじゃないかってことをいくつか書きたいと思います。
今回は文字だらけです。

上と下の写真で画質が大幅に違うの、わかりますか?
IMGP6021.jpg
IMGP6021_20131122214151430.jpg

IMGP5074.jpg
IMGP5074_2013091301171889e.jpg

.
.
.
はいどうも。
全部見るのダリーんだよって人のためにメニューを設けときます。

・ブログ更新時の注意
・追記編集時の工夫
・大量写真一括アップロードの方法
・サムネイル作成法の違いによる写真の画質について
・cssの組み込み方


・ブログ更新時の注意
前、ブログ更新時の注意という表題の記事で書きましたが、ブログ書いてる途中にブラウザがクラッシュしたことないですか?
以前FC2ブログでこの現象が頻発してまして、せっかく書いた記事が全部パーになったせいで記事更新を諦めたって例が何件かありました。

そんな時はブログ更新時の注意を読んで下さい。対処法が書いてあります。
対処法をここで簡単に言うと、ブログ書く時ブラウザをファイアフォックスにしたら安心ってことです。


・追記編集時の工夫
全然大したことじゃないんですが、ブログで続きを読むっての押して記事の続き出てきますよね。
あれ最初の文章がブラウザの上ギリギリにくるんですよ。

で、そのせいで一ヶ月放置記事とか出てくると文字が隠れるし、そもそも表示がブラウザの一番上ギリギリ過ぎて見難いっていう問題があるんです。

ですが、追記文章書くにあたって一番最初に改行しまくっても、何も文字が無ければその改行は無視されて、やっぱり最初の文章が上ギリギリに表示されちゃいます。

だからピリオド.とか使って
.
.
.
こんな感じで追記記事書く前に強制改行させると、続きを読む押した後記事が読みやすいですよ。
そんだけ。


・大量写真一括アップロードの方法
写真のアップロードについてですが、たくさん写真ある場合いちいち写真アップするのめんどくさくないですか?ブログのアップロード機構で一度に選べる写真は5枚だけだし…

僕は結構たくさん写真を記事に載せる方なんで、とてもめんどくさく感じてました。

そこでなんかないかなって探してみたら有ったんですよ。
こういうのが。
FC2Upload

こいつを使えば初期設定をしておくだけで、後はブログ書きたい時起動して、アップしたい写真選んでドラッグアンドドロップでツールまで持ってってアップボタンポチっと押すだけで自動的に写真をアップしてくれます。

FC2Upload.jpg


写真が多い時はとても便利です。

僕は記事を書く時、まず撮った写真眺めながらアップする写真を選別して、それをブログに全部貼り付けた後に文章入れて行くんで最初一気に写真たくさんうpするんですが、こいつがあればほっとくだけで大量の写真をアップしてくれるんで重宝してます。

このツールはこの後の記事の・サムネイル作成法の違いによる写真の画質についてでも非常に役立ちます。


・サムネイル作成法の違いによる写真の画質について
さて、お次は表紙でもちょっとだけ触れた、サムネイル作成法の違いによる写真の画質についてです。
長文です。

表紙の写真をもう一度貼ります。
IMGP6021.jpg
IMGP6021_20131122214151430.jpg

二枚の写真を見比べてみると、下の方が画質がいいことが分かるでしょうか。
猫の模様やヒゲ、目などを見ると良く分かると思います。

星の写真ではもっと分かりやすいです。
IMGP5074.jpg
IMGP5074_2013091301171889e.jpg

上の写真は星が潰れてて、下はクッキリしてるのがわかると思います。


この二枚は何が違うかというと、サムネイル作成の方法が違います。
上はブログが自動的に作ったサムネイル画像、下は僕が自分で作ったサムネイル画像です。

サムネイルっていうのは、簡単に言うと大きな画像を縮小した画像のことを言います。
大きな写真をブログとかに載せる時に、大きさそのままだと画面に入りきらないので、画像を縮小して載せ、クリックすると大きな画像が出てくるようになってるわけです。

ちなみに洞窟写真だとこのくらい差があります。
上がFC2サムネイル、下が今回紹介する方法によるサムネイル。

IMGP7543.jpg
IMGP7543_2013091301244273c.jpg


IMGP7554.jpg
IMGP7554_20130913012459846.jpg


IMGP7541.jpg
IMGP7541_20130913012424b11.jpg


IMGP5758.jpg
IMGP5758_201309130120436a4.jpg



IMGP5723.jpg
IMGP5723_2013091301202737b.jpg


現在の探検部ブログの設定では、 横幅470px 縦幅600px以上の画像をアップした時、自動的にサムネイルが作成されるようになっています。

しかし、FC2ブログが自動的に作成してくれるサムネイルは、残念なことに結構画質が悪いのです。
ぼやぼやになってしまいます。

では、どうすれば画質をあまり落とさずにブログに写真を貼れるのでしょうか。
まず、そもそもサムネイルを作成する必要が無い大きさの画像をアップすれば、画質はそのままで劣化はありません。
色々するのはめんどくさいけど画質が落ちた画像は貼りたくないなという人は、予め自分で小さくした画像を貼る方法がオススメです。
この時、一枚一枚縮小するのが面倒な場合も、
縮小専用。
このツールを使えば何枚でも任意の大きさに縮小した画像を作成してくれます。

ただこの方法では、詳しく見てみたい画像があってクリックしても、出てくる画像の大きさはサムネイル画像と同じで小さいままなのでちょっと悲しくなります。

そこで一つの方法として、大きな画像をHTMLタグで無理やり小さくしてサムネイルとして表示する、というのがあります。
ただこの方法ではサムネイル画像が重いので、スマホ等で記事表示した時に色々困ってしまう可能性があります。

二つ目の方法として、サムネイル用の画像と、クリック表示用の大きな画像、二つをアップして一つにまとめてしまおう、というのがあります。
僕が知ってる中では、この方法が記事表示時の重さの軽減や画質の点で言っても最も良いのではないかと思います。(もっといい方法があるかもしれないので、知ってる人は教えてください)

現在のこのブログの設定では、同じファイル名の画像がアップされた場合、最初の画像はそのままのファイル名、二枚目以降はFC2ブログが自動的にファイル名の末尾に文字を付け足してくれる仕様になっています。

一枚目にアップした画像のファイル名
IMGP6021.jpg
二枚目にアップした画像のファイル名
IMGP6021_20131122214151430.jpg

と言う感じに。

したがって、一枚目にアップした画像をブログに貼った場合ソースは、
<a href="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021.jpg" target="_blank"><img src="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021s.jpg" alt="IMGP6021.jpg" border="0" width="470" height="313" /></a>
となり、
二枚目は
<a href="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021_20131122214151430.jpg" target="_blank"><img src="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021_20131122214151430.jpg" alt="IMGP6021_20131122214151430.jpg" border="0" width="470" height="313" /></a>
となるのです。

青で示した文字列はリンク用緑で示した文字列はサムネイル表示用のHTMLです。赤はファイル名です。
一枚目と二枚目で赤の部分が違います。


これを利用します。

「縮小専門。」でクリック用の大きめ画像とサムネイル用の小さな画像をそれぞれ用意し、大きな画像をアップした後、サムネイル用の画像をアップすると、

大きな画像(クリックで大きな画像に飛べるが、サムネイルが汚い)のソースは
<a href="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021.jpg" target="_blank"><img src="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021s.jpg" alt="IMGP6021.jpg" border="0" width="470" height="313" /></a>
となり、
サムネイル用の画像(サムネイル画像はきれいだが、クリックしても大きなが画像が出てこない)のソースは
<a href="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021_20131122214151430.jpg" target="_blank"><img src="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021_20131122214151430.jpg" alt="IMGP6021_20131122214151430.jpg" border="0" width="470" height="313" /></a>
となるのです。

ここで、
サムネイル用の画像ソース

<a href="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021_20131122214151430.jpg" target="_blank"><img src="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021_20131122214151430.jpg" alt="IMGP6021_20131122214151430.jpg" border="0" width="470" height="313" /></a>

オレンジで示した部分だけ消すと、リンク用のソースだけ大きな画像のものと同じになり、きれいなサムネイルを使いつつ、クリックすると大きな画像に飛べるようになるのです。


「縮小専門。」は、縮小した画像を任意の名前のフォルダに入れてくれるので、大きな画像(1024pxくらい)と小さな画像(470px以内)を作る時は、「縮小専門。」を二つ起動し、それぞれ別の名前のフォルダに保存されるように設定して、選んだ画像をぶち込めば良いでしょう。(元の画像のサイズが2MB以下なら大きな画像をわざわざ「縮小専門。」で作る必要はありません。)
また、「FC2Upload」は、ドラッグ&ドロップしたファイル順にアップしていくようになってるので、大きな画像をまずドラッグ&ドロップした後、続けて小さな画像もドラッグ&ドロップしてアップロードボタンを押すと自動的に大きな画像をアップした後に小さな画像がアップされます。

後はFC2の画像貼り付けフロートから小さな写真の方を選んで「この画像で記事を書く」を押して出てきたソースをちょっとだけいじればいいのです。

なんかまわりくどくて分かりにくいと思いますが、どうしても分からなかったら直接僕に聞くなりコメントするなりして下さい。説明は難しいですがやってることは別に難しいことではないので…

あ、ちなみに一つ目として紹介した、大きな写真をタグで無理やり縮めてサムネイルにする方法は、大きな画像をアップした後に、このソースの
<a href="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021.jpg" target="_blank"><img src="http://blog-imgs-57.fc2.com/q/d/a/qdaitankenbu/IMGP6021s.jpg" alt="IMGP6021.jpg" border="0" width="470" height="313" /></a>

赤で示した部分を消すだけです。
ううむ、簡単でいいな…


・cssの組み込み方

とりあえずこれで最後です。
また何か思い出して追記するかもですが…

カスケーディングスタイルシート cssをご存じの方も多いと思います。
かっこいいホームページなんか作る時は必須ですね。

このcss、ブログ記事書く時も簡単に使えます。
知ってる人も多いと思いますが、
<font style="ここにcssを書く">文章</font>
上のようにすることで、ブログ記事内で簡単にcssが使えます。

これを使うと例えば、HTMLタグでは文字の大きさを最大でも

この大きさまでしかできませんが、cssを使って、
<font style="font-size:100px">あ</font>
とすれば、





この様に、いくらでも文字を大きくすることができます。
逆に小さくもできます。(グーグルクロームでは下限あり)
書いてて疲れたけど、読むほうも疲れるだろうなぁこの記事… 誰か読んでくれるかな…

他にも、


長文疲れた

こんなことができます。

使い方によっては記事にスパイスを加えることができると思うので、よかったら使ってみてください。

あ、タグを閉じるのをお忘れなく。
場合によってはブログ全体に影響しちゃうので…笑

というわけで、とても長くなりましたが「FC2ブログ記事作成時の工夫など」でした!
それでは。
スポンサーサイト

2013年11月23日 お知らせ トラックバック(0) コメント(0)












管理者にだけ公開する

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