スポンサーサイト

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

FC2ブログで画像を綺麗に載せるコツ

Aion0320s_20120922195813.jpg
こんにちは、サトリです
前回の「FC2ブログの広告は簡単に消せる」が大好評だったので
気をよくして今回も元NCブログユーザー向けのFC2ブログ攻略です

ゲームブログと言ったらスクリーンショットの掲載でしょう
と、言うわけで今回はNCブログとは勝手の違う画像掲載の手順の紹介です








デフォルトのアルバム機能を切っておく

まず、一番最初にやっておくべき設定があります

FC2ブログの初期状態でアルバム機能というのがONになってるんですが
これがONのままだと、記事の画像がクリック出来る状態になっていて
クリックしたらアルバムとかいう画面に飛ばされます

画像をローテーションで見れる機能ですが、アルバムは記事の画像と同じ大きさで
元画像を見るにはもう一度クリックする必要があって煩わしい
ブログ記事スルーで画像だけぐるぐる見られても・・・

とにかく画像だけ見てもらえればいいと言う人もいるかもだし
アルバム機能で面白いブログを作れたりするかもしれないけれど
普通のブロガーは切っておいたほうがいい機能です


koukoku1.jpg
管理画面左下の環境設定ボックスの「環境設定の変更」をクリック

gazou8.jpg
上部のプルダウンメニューブログの設定から「投稿設定」をクリック



gazou114.jpg
画像のリンクの「元画像にリンクさせて」か「画像タグのみ」を選択
アルバムは「追加しない」を選択して下にある更新ボタンをクリックすれば完了

画像リンクの設定のお勧めは「画像タグのみ」です
記事の画像がクリックできず、無駄に画像直のページに飛ばなくなります
小さめの画像しか使わないひと、記事の幅を超えるサイズの画像を使わない人
こんな人なら画像をクリック出来る状態にする必要がありません

逆にサムネイルを多用したい人は「元画像にリンクさせて」を選択しよう
サムネイルのサイズもここで設定しておくと楽です
詳しくは後述しますが縦幅は最大の999にして横幅だけ詳細に設定するのがいいです

これで準備完了です









サムネイルを使わず大きな画像を載せる

gazou13.jpg

gazou14.jpg
「画像タグのみ」の設定で加工してサイズを調整したものをアップロード

gazou5.jpg
「この画像で記事を書く」で画像タグを挿入して完成
「画像タグのみ」なら余計なページが開いて読者がイライラすることなくなります(笑)

サトリブログは記事幅が580なので、記事幅に合わせた横幅560に加工
自分のブログにあった横幅を把握するのが重要です
はみ出たり、途中で切れたりするのは見栄えがよくないしね

自分はPhotoScapeっていう無料ツールを使ってます
高度な機能がないので逆にわかりやすく使いやすい








サムネイルの使い方

クリックで大きい画像が見れます
(クリックで大きい画像が見れます)

gazou1.jpg
投稿設定の画像のリンクを「元画像にリンクさせて」にして
サムネイルの横幅を好きな値に設定しておく(画像UP時に変更可)
縦幅が小さいと縦長な画像の時そちらが優先されてサムネイルが小さくなりすぎる事があります
狙ったサイズのサムネイルが出来なかったりしないように最大の999を設定
ブログは縦長コンテンツなので横幅を揃えたほうが見栄えがいいはずです

gazou2.jpg
サムネイルを「同時に作成する」にチェックをいれてアップロード

gazou3.jpg
「サムネイルで記事を書く」でタグを挿入すれば完成



NCブログっぽく使いたい人向け

gazou6.jpg
自分のブログの幅を考えて最大の横幅を設定しておく

クリックで大きい画像が見れます
(クリックで大きい画像が見れます)
大きなサムネイルで誌面を華やかにしつつ元画像も楽しんでもらえる


ただし注意点が二つ

ひとつ目
自動作成のサムネイルは画質粗いです、見比べると一目瞭然なレベルです

ふたつ目
ゲーム画面のSSをそのままだと、大きすぎてアップロードさせてもらえません
ファイルアップロードサイズが500KBまでで
23インチモニタでのSSが500KB~1MBなのでほぼ無理(低画質設定なら大丈夫かも)
月額300円の有料プランなら2MBまで上がるので、安いと思えるなら課金も視野に











こんな使い方も出来る(応用編)

クリックで大きい画像が見れます
(クリックで大きい画像が見れます)
敢えて狭くトリミングした画像をサムネイルにして
クリックしたら元の全体画像を見れる


gazou15.jpg
投稿設定の画像のリンクを「画像タグのみ」にしておいて
サムネイル用の画像とクリックで見せたい画像をアップロード

gazou5.jpg
どちらも「この画像で記事を書く」で編集欄に画像タグを挿入する

gazou.jpg
①サムネイル用の画像タグをマウスで囲んで選択状態にして
②URLボタンをクリック
③大きい方の画像タグのURL部分をコピー(Ctrl+c)して
④アドレス入力欄にペースト(Ctrl+v)
⑤タイトルは画像タグを削除して空欄にしておくかメッセージを入れておく
そのままだとマウスを上に置いたとき画像タグが表示されてクリックしたくなくなる(笑)
⑥OKをクリック!
⑦大きな方の画像タグは不要なので削除しておこう
⑧最後に[ alt="画像名" ](上の画像では alt="Aion03811.jp")となっているところを[ alt="クリックで大きい画像が見れます" ]に変えておこう

Chrome、Firefoxでは⑤のタイトルがツールチップに出るのだけど、Internet Explorerではこのaltが優先されてしまうのでここにタイトルと同じメッセージを入れておくことでどのブラウザでも同じメッセージが出せます。リンクに限らず単品の画像でもaltの内容を変更する事でInternet Explorerでのツールチップ表示を変える事ができますが、本来の正しい使い方ではないみたいなので補足記事を書きました



工夫次第でいろんな煽り方見せ方が出来ますね


さらに応用すると・・・

NCsoft不具合関連報告ページへ
(クリックでNCsoftの不具合関連報告ページに飛びます)
リンク先は画像じゃなくてもいい、所謂バナーリンクも作れます
アドレス部分をサイトURLにして
タイトルはそのサイトの説明を入れよう(ALTも変えておきましょう)








SSはゲームブログの華
上手く見せればそれだけで一人前のブログに見えるハズ
今回はこれでおわり!

予想以上に時間かかって苦労しました(笑)



関連記事:「FC2ブログ 画像の「ALT」と「TITLE」を使ってみる




コメント

名前:ANTI:2012/09/23(日) 21:33:48 ID:- 
カテゴリーにE・啓示があるのがやばいな。
名前:サトリ:2012/09/23(日) 22:33:37 ID:UusUfJCE 
「透子」もあるしねww
下世話なゴシップ記事もサトリブログのウリでございます
名前:ベコ:2012/09/23(日) 23:57:38 ID:- 
フロクが直ってるね
名前:サトリ:2012/09/24(月) 05:43:46 ID:UusUfJCE 
調べて勉強してみて、結局よくわからんでなんとなく手探りでhtmlを弄ったら直った。
名前::2012/09/24(月) 12:09:18 ID:- 
画像のALTも変えるともっといいですね
名前:サトリ:2012/09/24(月) 13:17:40 ID:UusUfJCE 
初心者向けにFC2ブログの機能を解説してるページだぞ?
名前::2012/09/24(月) 21:15:28 ID:- 
た、確かにそうですね・・・
名前:サトリ:2012/10/10(水) 23:41:30 ID:UusUfJCE 
思い直したのでALT関係の記述をちょっと加えてみる事にする、まぁ素人なので正しい解説はかけないと思うけども・・・

コメントの投稿


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