ブログパーツ

趣味の工房

ブログの画像表示をスタイリッシュに♪(2)【Color Box】

みなさん、こんにちは
前回導入した【Lightbox】ですが、若干動作が重く、またカスタマイズが少々敷居が高かったので、今度はタイトルにある【Colorbox】にしてみました♪


多彩なカスタマイズが可能で、デフォルトで5パターンのデザインが用意されています。
コチラからその様子が確認できます。

2011y04m12d_232256806.jpg
※画像クリックで本家サイトへ。



機能や設定も豊富です。

○複数画像をギャラリー化
  
※クリックするたびに画像が切り替わります。

上記はサムネイルを表示していますが、下記のように文字だけでも可能です。
HAF932ギャラリーはコチラ。


○複数画像をスライドショー
  
※クリックしなくても画像が切り替わります。

こちらも同じく文字だけでも可能。
HAF932スライドショーはコチラ。


○動画の埋め込み
ココ(もしくは下の画像)をクリック。





○指定したURLリンクを表示
011y04m12d_231902557.jpg



いろいろ幅が広がりますね♪楽しいですw




以下続きから...
「続きを読む」



ランキングに参加しております。クリックにご協力を♪
にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村





FC2ブログに【Colorbox】を導入する


※以下の点について、ご了承願います。
 OSがWindowsである前提で書かせていただきます。
 自分はスクリプトやHTML記述に対してほとんど素人同然です。
 突っ込んだ質問等にはお答えできません(苦笑)
 あくまで、「こうやったらとりあえず動いた」程度のものですので、参考にされる際は
 慎重におこなってください。(爆)
 参考にされたことによる不具合等については一切責任は持てません。


○Colorboxのダウンロード

まずはコチラのサイトからColorboxをダウンロードします。
011y04m12d_231902557.jpg
※左上の「Download」をクリックすればOK。

ダウンロードしたフォルダを展開します。
2011y04m14d_114058901.jpg

この中で使用するのは「colorbox」フォルダと「example」フォルダの1~5のいずれかになります。
本家サイトのダウンロード下、「View Demonstration」の①~⑤を確認し、気に入ったものを使います。
ボクは①にしました。

それ以外のものは、紛らわしいので消しちゃいます(笑)
もちろん、残しておいてもOKです。

2011y04m14d_115142592.jpg



○スクリプトファイルの修正

「example1」フォルダの「colorbox」を開きます。(ダブルクリックでok)
2011y04m14d_120137542.jpg

赤ラインのように{background:url(images/○○/○○…となっている「images/」の部分全てを、自分のブログのファイル置き場のURLに差し替えます。結構量ありますので、下まで舐めるように確認しましょう(苦笑)
(※ブログURLではないので注意。)

自分のブログのファイル置き場のURLを確認するには、ブログ管理画面から左下の「ファイルアップロード」をクリックし…
2011y04m14d_121246810.jpg
どれでもいいのでサムネイル(縮小画像)をクリックします。




画像が表示されたら、アドレスバーにあるURLを確認します。
2011y04m14d_121304583.jpg
この場合は「http://blog-imgs-34-origin.fc2.com/r/i/k/rikuntyudady/
最後の「/」から後ろ部分(ファイル名)を除いたものが、ファイル置き場のURLになります。


書き換えるURLがわかったら、ひたすら書き換えます
画像置き場のURLをコピーしておいて、ひたすら貼り付け。(Ctrl+Vが早いです)
2011y04m14d_121952471.jpg
こんな具合。画像は途中で切れてますが、下にもまだあります。( ̄∇ ̄;)


----------------------------------------------------------------------------------------------------
【読者さんコメントより追記】

「置換」機能をを使えば、書き換え作業が劇的に楽になります。
例えばメモ帳の場合…

「編集」→「置換」をクリック。
2011y06m10d_190430968.jpg


このようなウィンドウが出ますので、上の「検索する文字列」に「images「置換後の文字列」には画像置き場のURLを入れます。
(※最後の「/」は取らないと重複してしまいます。逆につけるなら両方に。)
2011y06m10d_190617938.jpg
最後に「すべて置換」をクリックすると...


一番上の赤ラインの部分だけでなく、その下もすべて「images」がURLに置き換えられます。
2011y06m10d_190628765.jpg

----------------------------------------------------------------------------------------------------



書き換えが終了したら、管理画面の「ファイルのアップロード」から、「exsanple1」の中の「index」を除く全て(imagesフォルダの中身も)と、「colorbox」フォルダの中身を全てアップロードします。
2011y04m11d_203844893.jpg



ただし、「colorbox」の中にある「jquery.colorbox」、「jquery.colorbox-min」はそのままではアップロードできません(ファイル名に「.」や「/」があるとアップできない)ので、「.」を「_」や「-」などに変えてからアップしてください。
2011y04m14d_125510771.jpg
※画像はリネーム後の状態。



○テンプレートの修正

アップが完了したら、次はテンプレートを少しいぢります。
必要に応じて前回の記事を参考にバックアップ(複製)をしてから行ってください。

尚、大事なことなのでもう一度お断りしておきますが、ボクはスクリプト云々に関しては素人です(笑)
「よくわかんないけど、とりあえずこれで動いている」というレベルですので、不具合があれば自分で何とかしてください(笑)

まず、テンプレートの<head>~</head>の間に、以下の記述をします。
<head>の直後か、</head>の直前がわかりやすいと思います。
上のほうにあります。


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/jquery_colorbox.js" ></script>



上の2つの<script>~</script>は必要なスクリプトをgoogleさんから引っ張ってくるためのもの。
コピー&ペーストでOKですが、一番下の黄色の部分は上で確認した自分のファイル置き場のアドレスに変更し、赤字のファイル名は上で(「.」がアップできないのを防ぐため)リネームした名前に変えてください。「.」部分を「_」にした人はそのまま使えます。


さらに、そのしたに以下の記述を追加します。

<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:500, innerHeight:311});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>
<link rel="stylesheet" type="text/css" href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/colorbox.css" media="screen" />



ここでも同じように一番下の黄色の部分は自分のURLと差し替えてください。

また、【Lightbox】をすでに導入されている方は、<head>~</head>(もしくは<body>~</body>)タグ内に記述したlightbox用の記述を消してください。(消さなくてもいいかもですが…ボクは消しました)
途中にある「$('a[rel^=lightbox]').colorbox();」という記述により、今までLightbox用にに記事に追加していた「rel="lightbox" title="任意のタイトル"」の記述をcolorboxに変換してくれるようですので、以前の記事を書き直さなくても、colorboxで動作します。

記述が終わったら、「更新」ボタンをクリックして終了です。



実際に使用してみる


実際に使いたい場合は、以下のような記述をします。

○1枚の画像を表示
FC2ブログの場合は、画像を追加すると例えば以下のような文字が編集画面に追加されます。

<a href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/Hafimage-crop.jpg" target="_blank"><img src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/Hafimage-crop.jpg" alt="2011y04m11d_204512740.jpg" border="0" width="564" height="599" /></a>


この「target="_blank"」部分を「class="cpModal"」に変えるだけでOKです。さらにその後に「title="任意のタイトル"」を追加することで、タイトルを表示できます。
(ちなみに「target="_blank"」は、別のウィンドウ(またはタブ)で開かせる指示)

コチラの記事を参考に、「class="cpModal" title="No Title"」を辞書登録しておくと便利です。


こんな具合になります。

<a href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/Hafimage-crop.jpg" class="cpModal" title="趣味の工房"><img src="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/Hafimage-crop.jpg" alt="2011y04m11d_204512740.jpg" border="0" width="564" height="599" /></a>



表示はこうなります。(画像をクリック)
Hafimage-crop.jpg



また、以下の全てにも共通ですが、<img src=~>まではサムネイル表示の記述ですので、これを全て削除し、代わりに文字を入れれば画像を使わずに使うことも出来ます。



<a href="http://blog-imgs-34.fc2.com/r/i/k/rikuntyudady/Hafimage-crop.jpg" class="cpModal" title="趣味の工房">ココをクリック</a>



表示はこうなります。
ココをクリック



また、「target="_blank"」部分を「class="cpModal"」ではなく「rel="fade"」に変えると、フェード効果を使えます。
(画像クリック)
Hafimage-crop.jpg

ちょっと動きが変わりましたね♪



○複数画像をギャラリー化

上記と同じように、「target="_blank"」部分を「class="cpModal"(必要に応じて title="No Title"も追加)」に変更した上で、さらに「rel="グループ名"」を加えます。ココに加えたグループ名が同じものがギャラリーに表示されます。同じグループ名であれば、並んでいなくてもギャラリー化されます。




<a href="①画像URL" class="cpModal" rel="グループ名" title="任意のタイトル①"><img src="画像URL"></a>
<a href="②画像URL" class="cpModal" rel="グループ名" title="任意のタイトル②"><img src="画像URL"></a>
<a href="③画像URL" class="cpModal" rel="グループ名" title="任意のタイトル③"><img src="画像URL"></a>



「rel」や「title」部分は位置が逆でも問題ありません。また、上記のように<img src=~>の記述の変わりに文字に変更できます。
これで、画像①~③がギャラリー表示されます。



○複数画像をスライドショー

手順は上のギャラリー化と同じですが、「rel=”グループ名”」ではなく、ここに「slide」と記述します。



<a href="①画像URL" class="cpModal" rel="slide" title="任意のタイトル①"><img src="画像URL"></a>
<a href="②画像URL" class="cpModal" rel="slide" title="任意のタイトル②"><img src="画像URL"></a>
<a href="③画像URL" class="cpModal" rel="slide" title="任意のタイトル③"><img src="画像URL"></a>





○Youtube動画などの埋め込み

以下のように記述します。黄色の部分は任意で差し替えてください。


文字だけの場合

<a class="youtube" href="動画URL">任意の文章</a>


サムネイル画像も使う場合

<a class="youtube" href="動画URL"><img src="画像URL"></a>






○指定したURLの表示

文字だけの場合

<a id="google" href="リンク先URL">任意の文章</a>


サムネイル画像も使う場合

<a id="google" href="リンク先URL"><img src="画像URL"></a>



※同一ページに複数できないみたいです。ちゃんと確認してませんが。
 ちなみに、google以外にリンクするときでも「id="google"」です(笑)
 テンプレートに記述した「google」の部分を変更すれば、「id="他の名前"」
 で使用できると思います。

-------------------------------------------------------------------------------------------------
【追記】同一ページに複数作成したい場合は、テンプレートに記入した

<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:500, innerHeight:311});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>
<link rel="stylesheet" type="text/css" href="http://○○○.colorbox.css" media="screen" />



の黄色部分、$("#google").colorbox({width:"80%", height:"80%", iframe:true});をコピーして追加し、先頭の$("#google")部分を$("#google2")などに変更します。(必要に応じてさらに追加)

こんな具合。

<script type="text/javascript">
$(function(){
$.fn.colorbox.settings.bgOpacity = "0.5";
$(".cpModal").colorbox();
$("a[rel='fade']").colorbox({transition:"fade"});
$("a[rel='slide']").colorbox({slideshow:true});
$("#ajax").colorbox({contentWidth:"400px", contentHeight:"200px"});
$(".youtube").colorbox({iframe:true, innerWidth:500, innerHeight:311});
$("#flash").colorbox({contentAjax:"demo/flash.html"});
$("#google").colorbox({width:"80%", height:"80%", iframe:true});
$("#google2").colorbox({width:"80%", height:"80%", iframe:true});
$("#google3").colorbox({width:"80%", height:"80%", iframe:true});
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
$('a[rel^=lightbox]').colorbox();
});
</script>
<link rel="stylesheet" type="text/css" href="http://○○○.colorbox.css" media="screen" />




実際2つ以上使用する場合は、実際使用する場合に記述する

<a id="google" href="リンク先URL">任意の文章</a>


の、赤色部分「id="google"」部分を、「id="google2"」などに変えてやればOK。

ここの文字が同じだった場合、先に書かれたほうは動作しますが、後のものは別タブ(またはウィンドウ)で表示されてしまうようです。
-------------------------------------------------------------------------------------------------






自分は使いやすいように辞書登録を使い…

○「からぼ」(colorboxの略)で「class="cpModal" title="No Title"」(1枚の画像表示)
○「ふぇーど」で「rel="fade" title="No Title"」(フェード効果で画像表示)
○「ぎゃらりー」で「class="cpModal" rel="グループ名" title="No Title"
 (複数画像の表示)
○「すらいど」で「class="cpModal" rel="slide" title="No Title"
 (複数画像のスライドショー)

に登録しています。
これで、FC2ブログの場合は画像をいつもどおりに挿入し、「target="_blank"」部分を選択しておいて、「からぼ」なり「ぎゃらりー」なりと入力、変換で一発でOK♪楽チンです。
(タイトルやギャラリー名は別途変更)

入力画面
2011y04m15d_193319434.jpg


登録後、例えば「ふぇーど」と入力、変換すると…
2011y04m15d_193720938.jpg  2011y04m15d_193715432.jpg

頻繁にColorboxを使われるならお勧めです。



ちなみに、「jquery_colorbox」スクリプトファイルを開き、
2011y04m14d_154359812.jpg


「false」を「true」にしたり、数字を変えたり…
なんかいろいろすることで、いろいろ出来るようです(爆)



使いこなせればブログの見た目もだいぶ変わりますね~。
興味のある方はチャレンジを♪


【追記】
他のCSSの使用方法、ギャラリー表示時の「Page1of...」の表示の修正方法を追記しました。
<Colorboxのいろんなサンプルを使ってみる>


それでは。**SeeYou**( ̄∀ ̄*)ノ



ランキングに参加しております。クリックにご協力を♪
にほんブログ村 PC家電ブログ 自作PCへ
にほんブログ村



関連記事


    15:48 | Trackback : 1 | Comment : 22 | Top
Comment
2011.04.15 Fri 17:59  |  Pasion #HfMzn2gY
画像クリックで別窓が開くのがどうしても嫌で、どうにかならないものかと色々探してコチラに漂着しました。
さっそく導入させていただきましたが、まさに「これだ!」という感じです。
投稿時、多少めんどうな書き換え作業が必要になりましたが、それを差し引いても大満足です。
本当にありがとうございました!
はじめまして!  [URL] [Edit]
>Pasionさん

お役に立てたのなら嬉しいです♪
書き換え作業を効率化できるよう、記事を追記しておきました。
参考にしてください☆
  [URL] [Edit]
2011.04.16 Sat 15:57  |  Pasion #HfMzn2gY
お返事いただけて感激です!

>お役に立てたのなら嬉しいです♪
役に立ったどころか、僕のブログの目玉機能です(^_^)v

"辞書登録"やってみました。
僕はATOKなのでそんな機能あったかな?と思いましたがちゃんと出来ました。
今にして思えば、IMEなんだから当然ですよね(^^;)

重ね重ねありがとうございました!
  [URL] [Edit]
>Pasionさん

コメントにはよほどのことがない限り(記事と関係なくてもw)お返事をするようにしています♪

ボクは辞書登録に頼り過ぎているので、PCが変わると作業効率がどっと落ちます(; ̄ー ̄A

ので、辞書本体をUSBに入れて持ち歩いています(笑)
  [URL] [Edit]
2011.04.17 Sun 04:13  |  Pasion #HfMzn2gY
それは失礼しました m(_ _)m


最近ブログやってる連中は中高生が多いせいか、

コメントしても知らんぷりって事ばかりなので・・・

(しかも向こうからブロともとか相互リンクとかお願いされたのにですよ!)


>辞書本体をUSBに入れて持ち歩いています

そんなことも出来るんですね!

僕もせっかく教えていただいたので積極的に辞書登録を活用したいと思います。


何度も言いますが、

この度はすばらしい技を教えていただいてありがとうございました!

自分で貼った画像、何度も見ちゃってます(^^)

またスゴ技があったら教えてくださいね。

ではでは。
  [URL] [Edit]
>Pasion さん

ちなみにボクもブログを始めた当初そうでした(笑)
というより、自分のブログにコメントがつくとは思ってもなくて、コメ欄をチェックしてなかったからですが…(; ̄ー ̄A

コメントが記入されたときにメールで知らせられることも知らなかったような時代です(といってもそんなに前でもないんですがw)

ネット上のマナーは(顔が見えない分だけ余計に)難しいですね。
でも幸いココにきていただける(コメントしてくれる)読者さんはみな良い人ばかりで幸せです♪

  [URL] [Edit]
2011.04.20 Wed 04:36  |  Pasion #HfMzn2gY
まぁ昔があるから今があるってことで(^^)

>ネット上のマナーは(顔が見えない分だけ余計に)難しいですね

全くおっしゃる通りです。

自分の考えやその時々の感情を文章で表現するのはとても大変ですよね。


話は変わりますが、

僕は辞書登録のキーワードを"ぎゃらり"にしたんですけど、

いざ使おうとすると、その"ぎゃらり"が出てこないんですよ(^^;)

なのでほぼ毎日コチラのブログを読んで思い出してます。

最近物忘れが酷くて・・・

歳はとりたくないモンですね(T_T)

ではでは。
こんばんは  [URL] [Edit]
2011.06.10 Fri 12:42  |  おまお #-
はじめまして。
いろんなサイトで、この方式の画像ビューワを目にして
自分も使いたいな~、でもなんていうやつか分からないな~、んで
「ブログ上で画像を表示させてクリックすると次ページに移るやーつ~」
でググってみたところ、こちらにヒットしました。
他でも紹介してるのを見ましたが、その中で一番解りやすかったです。
なんの苦労もなく導入できました。ありがとうございます。
p.s.
どっかに書いてあったら申し訳ないですが、
テキストファイルの内容をたくさん書き換えなきゃいけない場合
いったんメモ帳などのテキストエディタに全コピーして、そこで
「置換」機能を使えば文字を探すことなく一気に書き換え可能です。
Windows標準のメモ帳程度のエディタに備わってる機能なので
たいていのエディタで可能だと思いまっする。

では、ほんとーにありがとうございました。
ありがとうございました  [URL] [Edit]
>おまおさん

>おまおさん

初めまして。わざわざお礼のコメントありがとうございます。
しかしすごい検索ワードwww
一番わかりやすかったといわれると、素直に嬉しいです♪
こちらこそ、ありがとうございます。

Σ( ̄□ ̄;
なるほど、「置換」か...その手がありましたね。
記事に追加しておきます♪

  [URL] [Edit]
2011.10.06 Thu 00:00  |  Pasion #HfMzn2gY
ただいま二度目の「colorbox」設定、完了しました(^^)ゞ

もちろんやり方なんてすっかり忘れてましたが、
ココがあるので安心安心(^^)
しかも解説がとっても分かり易くて助かります

さらにさらに今回は「置換」のお陰で超楽ちんでした
"おまおさん"にも感謝ですm(_ _)m
こんばんは  [URL] [Edit]
>Pasion さん

お疲れ様でした~♪
そして、お帰りなさい☆

コチラの記事は丸2日くらいかけてますので( ̄∇ ̄;)
お役に立てたのなら嬉しいです。

「置換」機能は確かに便利ですね。盲点でした。
みなさんのコメントにも支えられております(笑)

  [URL] [Edit]
2011.12.06 Tue 22:44  |  ea-air #-
オシャレな画像表示を探していた時にここにたどり着きました。
lightboxよりも簡単で、とてもわかりやすい説明で大変助かりました。
  [URL] [Edit]
2011.12.07 Wed 08:14  |  りくんちゅ。パパ #-
>ea-air さん

初めまして☆
ちょうど先ほど、リンク先URLをウィンドウで表示する設定に関して追記をしました。

お役に立てたのなら嬉しいです。☆人´∀`).☆.。.:*
わざわざお礼のコメント、ありがとうございます。
  [URL] [Edit]
2012.02.03 Fri 18:27  |  mirumom #-
はじめまして。
ブログを開設するにあたり、lightbox・Colorbox等の使い方をあちこち探し回ってこちらへたどり着きました。

どこも素人には理解が難しかったのに比べて、こちらは細かくとても親切にレクチャーして下さっていたので大変助かりました。
お蔭様で何とか使えるようになりそうです^^
単語登録の使い方も初めて知り感謝しています。

本当にありがとうございました。
では失礼いたします。
  [URL] [Edit]
>mirumom さん

はじめまして。
ボクも導入のときに苦戦をしたので、できるだけ丁寧な説明を心がけました。
そういっていただけると、素直に嬉しいです☆人´∀`).☆.。.:*

わざわざお礼のコメント、ありがとうございました♪
  [URL] [Edit]
2012.08.23 Thu 09:57  |  助左衛門 #-
初めまして、助左衛門と申します。

Colorbox を導入しようと頑張っている際にこちらのブログにたどり着きました。

ブログ主様の素晴らしく丁寧な解説を見て

「もらったぁああ!!」と思ったのですが、なぜか動かず・・・(涙)


その後、試行錯誤を繰り返すうちに、
何とか動かす事ができて簡単なコードなら書けるようになってました。(苦笑)

こちらのご説明に大変お世話になったとともに、
試行錯誤の結果として、こちらにある記載とは異なるスクリプトで私は実装しています。

それ故、私の例も誰かの役に立つかな~とも思いますし、

ブログ主様の説明で参考になる事が大変多かったので、
感謝の意を込めましてトラックバックさせて頂きました。(多謝)
はじめまして!  [URL] [Edit]
助左衛門 さん
初めまして☆
わざわざお礼のコメント、ありがとうございます。
記事自体は少し前になりますので、Colorboxも新しくなっていることもあり、バージョンの違いが原因かもしれませんね。

ColoerBoxのサイトでは
Tested in: jQuery 1.4.3+ in Firefox, Safari, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11.
For older versions of jQuery (1.3.2+), use version 1.3.18

とありますので、テンプレートに記述する
<script type="text/javascript">google.load("jquery", "1.3");</script>

の黄色部分を、対応したバージョンの数字に変えることで動作するようになったのかもしれません。
しかしコードがかけるようにまでなってしまうとは...脱帽です(; ̄ー ̄A

  [URL] [Edit]
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます  [] [Edit]
管理人コメントさん
お役に立てたようで何よりです☆
まぁボク自身素人なので、結果的にわかりやすい記事になったのかもしれません(笑)
わざわざお礼のコメント、ありがとうございました☆人´∀`).☆.。.:*

  [URL] [Edit]
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます  [] [Edit]
2014.12.04 Thu 06:58  |  りくんちゅ。パパ #CLdJdQDA
管理人コメントさん
コメントありがとうございます。
ブログに実際に表示される画像については、<img src=○○>の部分で指定されています。
その部分の「Width="○○"」と「height="○○"」の数字が画像のサイズ(ピクセル値)の指定の記述です。
ここが元画像のサイズと同じになってしまっているのでは?と思います。

・以下の点を確認してみてください。
○画像をアップロードされるときに、右下にあるサムネイルを「同時に作成する」にチェックが入っていますか?
○その下のサムネイルサイズ(横幅、縦幅)の値が大きくなっていないでしょうか?
○画像を挿入するとき「この画像で記事を書く」ではなく「サムネイルで記事を書く」で挿入していますか?

多分上のどれかの修正で戻ると思います。
FC2の管理画面がリニューアルしたときに、サムネイルの「同時に作成する」のチェックが外れていることがあるので、多分上のどれかではないかと思うのですが...
  [URL] [Edit]
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます  [] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/445-e4385b89
助左衛門でございます~ 今回は予告通り画像をオシャレに表示する方法を書いていきます。 まずは、最初にですが、、、 ただ単に画像をサイトやブログに貼り付けて、それをク 2012.08.23 09:42
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示