ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 記事を書いたら・・・ > title - 画像の枠を取る

画像の枠を取る

画像に枠がある

バナー
僕はどうしてもこうやって変な枠があるんです。どうすればいいの!っていう人がいるはずです。僕もこうでした。これにはかなり悩まされました。

バナー  ほんとはこうなって欲しい。


これを克服するには、初心者にとってはかなりの壁となって、立ちはばかるんです。今までよりもやる事が、かなり高度だと思います。それでも何とか頑張って下さい。

画像の枠を取る方法

●まず1つ目の原因は、このブログを最初から見て、共に成長してきた人には関係ないと思うけど一応書きます。

画像を載せたいと思った時に、画像のボタンを押して画像を選ぶと、<a href="http://~"><img src="(画像のURL)" border="0">となると思いますが、border="0"がないと枠ができてしまうみたいです。

普通にやっていれば、勝手にborder="0"は記入されるから普通の人には、あまり関係ないと思います。

●2つ目の原因なんですが、僕はこれが原因でした。では説明します。

テンプレ

まず環境設定からテンプレートの設定のクリックして下さい。

修正

旗が立っているのが今、自分が使っているテンプレートだから、そのテンプレートの修正をクリック。

これは・・・

そうすると、この画面の様にHTMLとスタイルシートの編集画面になります。これを始めてみると、何か暗号の様なものがずらずらと書いてあって何だこれは!って思いませんか?最初、意味がわかんないし、もう無理だ、降参ですって気持ちに僕はなりましたよ。これ見ただけで、今までより高度って納得しません?

ここで少し確認です。あなたは普通のメモ帳以外のサクラエディタTeraPadなどのテキストエディタを持っていますか?持っていなかったら今からダウンロードしに行った方がいいですよ。理由は検索がメモ帳よりも便利だし機能がたくさんあるしFC2ブログに採用されているEUCの文字コードが使えるからです。

そして、上のHTMLの編集の方の文を全部、選択してメモ帳などにコピペ(コピー&ペースト)して下さい。この時にマウスで全部選択するのはすごく長いので大変ですよね。だから、枠内のどこかにマウスのカーソルを持ってきて、キーボードの左下にある「Ctrl」と「A」を同時に押してみて下さい。
そうすると、一気に全部選択されます。選択できたら次は「Ctrl」と「C」を押すとコピーされます。最後にメモ帳にカーソルを持ってきて「Ctrl」と「V」を押すと張り付けられます。

これから、この先もHTMLとスタイルシートを編集して行く事になるのでそれぞれまだ編集していない最初の状態をメモ帳に保存しておきましょう。なにせ暗号のようにわけがわからないので、一回編集しちゃったら元の状態に戻したい時に絶対にわからないからです。

ちなみにHTMLとは、テンプレートのデザインの枠組みの事です。ここを編集すると自分のブログのメニューを左から右に移動させたり、いろいろな事ができます。
スタイルシートとは、ページのレイアウトを飾る事です。ここを編集するとページの文字サイズや色などを変える事ができます。

検索

そしてメモ帳で<%topentry_body>を検索してみて下さい。見つかるとその前に<div class="~">っていうのが多分あるはずです。僕の場合は"entry_body"でした。"entry_text"の人や他にもテンプレートによって違います。

CSS

自分の場合が何かを確認できたら今度はスタイルシートの方をメモ帳にコピペして、自分の語句(僕ならentry_body)を検索してみて下さい。いくつかあるかも知れませんが、."自分の語句" img { ~~~} となっている所です。
僕の場合は画像の様にdiv.entry_body img{ padding: 5px; border: solid 1px #999; }でした。この赤字の{ ~~~}をbackground-color: transparent; border: 0px; padding: 0px;に書き換えて下さい。

書き換え

僕の場合は書き換えるとこうなります。

書き換えできたらこれを全文選択してコピーして先ほどのテンプレートの設定に戻って下さい。そして下のスタイルシートの編集の方に張り付けて更新をクリックします。

そうすると、自分のブログを確認すると枠がなくなっていませんか?
これでやっとバナーも並べて置けますね。今回はほんとに難しくて戸惑った場面があったと思います。
ブログを続けていくとアフィリエイトというものをはじめる人がほとんどだと思うのですが、その時に小さい四角の枠ができて困る人が少なからずいると思います。そんな時もこの枠を取る方法をすれば小さい枠はなくなります。

上級者はこのHTMLとスタイルシートを理解していて自由に編集したり、テンプレートを作っちゃうんだからほんとにすごいですよね。
そういえば、心配な人は今回スタイルシートを編集したので、”枠を消した”など名前を付けて、メモ帳に編集後のスタイルシートを保存した方がいいかも知れませんね。今回はお疲れ様でした。<検索エンジン登録へつづく>


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
枠取り成功!
rgrgさんのblogを参考に、画像の枠を取ることができました。

どうもありがとう!(大した事ではないけれど、枠が取れて感激しました)

これからも参考にさせて頂きます。
ビンゴ朗さんへ
枠がとれて良かったですね!最初は自分も感動しましたよ!
できました☆
画像の枠をとることができました^^
ありがとうございました☆
花ママさんへ
参考にしていただいてあるがとうございました!
枠取りできました☆
枠を取ることができました!! すっごく嬉しかったです♪
ブログ開設時からお世話になっていますが、これからも参考にさせていただきます!
素敵なサイトを、ありがとうございます☆★
華宮 舞香さんへ
枠はいらない人にとっては物凄く邪魔ですからね。取れてよかったです!
これからもよろしくお願いします。
できません;
この記事を参考にやってみたんですが枠は消えずに、何かブログの文字が大きくなってしまいました(悲)
良かったら原因を教えていただけないでしょうか(礼)
殺戮ナイフさんへ
ブログを見ていないのではっきりとした原因はわかりませんが、間違えてfont-sizeの部分の数字を変えたから文字が大きくなったのだと思います。
一体どうすれば(泣)
私は自分の語句がmainEntryBodyで、それをスタイルシートの方で検索すると
.mainEntryBody {
color: #425763;
font-size: 12px;
margin: 0;
padding: 0 }

と出ました。変えるべきところにfont-sizeが含まれており、これを変えてfont-sizeが消えたため文字が大きくなったのかもしれません。
この場合はどうしたらいいんでしょうか。教えていただければ幸いです。
殺戮ナイフさんへ
画像の枠を取る為には殺戮ナイフさんが示された部分ではないと思います。
変えてしまった部分を元の通りに戻すと文字サイズも元通りになるはずですのでまず戻してみてください。

そして多分ですがスタイルシートに .mainEntryBody img  このような部分はないでしょうか?あればここの部分を直していただけると枠が取れるかもしれません。

もしなければテンプレート名を教えていただけるともう少し詳しく説明できると思います。
出来ました!
文字の方は戻したら直りました。
.mainEntryBody imgは検索してみてもなかったのでimgで検索してみたところ
/* エントリ記事内の画像表示 */
.mainEntryBase img {
background-color: #fff;
margin: 3px;
padding: 3px;
border: solid 1px #7893A1 }
というのを見つけまして・・・
その部分を変えたら画像の枠を取ることが出来ました。
本当にありがとうございました。これからも宜しくお願いします。
殺戮ナイフさんへ
ちょっと違ったみたいですが、imgがヒントになったみたいで無事にできてよかったです。
img がありません
いつもお世話になっています。
先ほどのコメント、一目瞭然ですが間違いです。
お手数ですが消去して下さい。

ところで、現在使用中のテンプレート、画像の枠がすごく目立つのです。
アドバイスどおりにHTMLを調べてみましたが、
entry_body はありましたが、imgが検索してもありません。
こういう場合はどこを直せばいいのでしょうか?
もし解決法があればお教えください。
よろしくお願いいたします。
piemoさんへ
間違えのコメントは削除させてもらいました。
この記事はまだ古いままなので、見づらくてわかりづらくて申し訳ないです。
HTMLを調べて「entry_body」が見つかったら、次はHTMLの下にある「スタイルシート」の方を entry_body img で調べていただくんです。

それでpiemoさんのテンプレですと、

/* 記事内の画像 */
.entry_body img {
border: 1px solid #000000;
margin: 3px;
}


/* ------- ■メニューの小分け部分 ------- */

この様になっているので、border: 1px solid #000000; margin: 3px; の部分を
background-color: transparent; border: 0px; padding: 0px;に書き換えてください。
きれいに枠がなくなりました
今まで、HTML編集の方しかみてなかったのですが、
スタイルシート編集のほうを見てみると  img も ありました。
(下の方は、なんとなく触ってはいけないものだと思っていました。)
そこをるんばばさんの言われる通りに直してみると、
すっきりと枠が取れていました。
いつも的確なアドバイス、感謝しています。
ありがとうございました。

piemoさんへ
目立つ枠は気になるので、ちゃんと消えてよかったですね!
スタイルシートは今回の様な飾り部分を決めるものなので、HTMLの様にさわっても大丈夫ですよ。
るるんばさん、初めまして。
いつも参考にさせていただいております。
画像の枠はブログでは写っていないのですが、画像のすぐ上に文字を書こうとしても書けません。枠だと思いるるんばさんのブログを参考にやってみましたが変わりませんでした。何が原因なのかもう私にはわからなく教えていただきたいのですがお願いいたします。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/28-eb70c6df   

Template Designed by DW99