FC2ブログで記事に画像を張る方法を図説でわかりやすく解説

目安時間:約 4分

今日はFC2ブログの記事に画像を張る方法を紹介します。

 

画像のアップロードをしていない人も流れの内にできるように書いているので、心配しないでください。

 

ログインの仕方からわかんないのだという方はこちらから

ログインの方法

ホームタブの「新しく記事を書く」を開く

ホームタブの「新しく記事を書く」というところをクリックしてください。

 

するとこのような画面が表示されるのを確認してください。

 

 

画像を選択

「新しく記事を書く」のページを表示できたら下に載っている画像の赤枠のボタンを押してください。

すると別窓で「ファイル管理」が表示されます。

 

ここでは記事に挟む画像の選択と、画像のアップロードが行えます。

画像をアップロードしていない場合はここで画像をアップしましょう。

 

画像をアップロードする方法

まず、パソコン画面を別窓で開いた「ファイル管理」画面と、記事に挿入したいと思っている画像が入っているファイル画面を開いてください。

そして左側に「ファイル管理」画面、右側に画像が入っているファイル画面を並べてください。(左利きの人は逆になります。)

並べたら「ここにファイルをドロップできます」と書かれた場所に画像を左クリックを押したまま引っ張ってきて(ドラッグ&ドロップ)アップロードしましょう。

 

するとアップロード待機画面へ移行するので、共通設定のところは何もいじらずに赤枠で囲んであるアップロードと書かれたボタンをクリックしてください。

 

OKをクリックしてください。

 

 

OKを押すと床屋とかで見るくるくる回っているサインポールのような青白棒が右側に表示されます。これはアップロード中を表す表示なので、サインポール(偽)が消えて「アップロード完了」という文字が表示されるまで待ちましょう。

これで記事作成画面からの画像のアップロードは終わりです。

 

画像を記事に挿入する

 

「ファイル管理」画面を開くと、画像アップロード枠が表示されているので下にスクロールしてください。

「ブログに挿入したい画像のアクションから操作を選択してください」と書かれた下にアップロードした画像がこのようにずらりと並んでいます。

 

その中から記事にアップロードしたい記事を探し出して、「この画像で記事を書く」と書かれたボタンを押します。

 

すると左上に「ファイルを挿入しました」という文字が表示されるので、それを確認して元の画像へ戻ります。

 

 

すると「本文の編集」枠にHTMLで画像が挿入されます。

FC2はHTMLと本文を書く欄が分かれていないので、HTMLを交えて書くんですね。

ていっても、普段は難しく考えずにただ文章を書けばいいんですが。

文字の装飾に関してはこのページを見てください→FC2の文字装飾について

 

下のリアルタイムプレビューを見てみると実際に記事で表示される感じがどういったものなのか確認することができます。

 

これでFC2の記事作成時に画像を挿入する方法の紹介を終わります。

お疲れ様でした(=^・^=)

 

 

FC2ブログで文字装飾をする方法!図解でわかりやすく解説

目安時間:約 11分

 

FC2ブログで文字装飾をする方法ってちょっとわかりにくいですよね。

 

FC2ブログの文章記入欄はwordpressやLivedoorなどとは違い、HTMLを記入するページと本文を記入する欄が分かれていません。

なので、文章を装飾したり、画像を挿入したり、アフィリエイト広告のURLを張り付けるとそのままHTMLの表示が出てきます。

わからない人には混乱する一因になってしまうのは無理ないですよね。私も最初は「動画ってどうやって挿入するの?」「著作権違反になったりしないかな?」とびくびくしながら作業しながら一つ一つ調べて作業していましたから。

 

今回はそんな方のためにFC2ブログで文字装飾を行う方法を紹介します。

 

細かく説明文を書いたので、すべてをしらみつぶしに見ると大変です。目的別に自分がしたいと考えている文字装飾の箇所へ飛ぶなどして活用してください。

 

文字装飾の基本

 

文字装飾を行うときはこの欄から選びます。

文字を装飾する時は装飾したい文字を選択してからそれぞれのボタンをクリックします。

 

FC2の文字装飾のらくちんなところはHTML表記を勝手にしてくれるところです。

文字を選択してボタンをクリックすれば面倒なHTMLを記述してくれるんですね。

 

これは利用しない手はないので、じゃんじゃん使っていっちゃいましょう。

 

 

 

色を変更

色を変更する時は赤枠で囲われたマークを押します。

するとこのような色とりどりなパッドが出てくるので、自分がしたい色をひとつ選んで、選んだ色の上でクリックします。

試しに今回は”#FF0000”の赤色でやってみたいと思います。(下の画面では黄緑色ですが、、、)

すると本文の編集画面ではこのようなHTML表記となり、

リアルタイムプレビューではこのような画面になります。

 

 

このように色を変更することができます。

色は見ての通り様々な種類があるので、「こういう時はどの色を使ったほうがいいのかな?」とか「訪問者の方から見て見やすい色はどれかな?」など、選ぶ楽しみがありますね。

 

 

文字を大きく

文字を大きくするときは赤枠で囲われたマークを押します。

本文の編集画面ではこのようなHTML表記となり、

するとリアルタイムプレビューではこのように文字を大きくすることができます。

これで文字を大きくすることができました。

このサイズは結構大きめで人の目を引くので、ここぞというときに利用するのがベストですね。

 

文字を中くらいに

文字を中くらいにするときは下記の画像の赤枠で囲われたマークを押します。

すると本文の編集画面ではこのようなHTMLが挿入され

リアルタイムプレビューではこのような画面表記になります。

 

このようにボタン一つでHTMLを挿入し、文字を中くらいに変更することができました。

つくづく思いますが、この機能は文字を中くらいにしたいなど一つ一つ手作業でHTMLを記述するのが面倒なときに手間にならずに済んで良いですね。

 

文字を小さく

文字を小さくするときは赤枠で囲われたマークを押します。

文字を小さく変更することができます。

 

普通の文字よりちょっと小さくなりましたね。

 

 

文字を太字に

文字を太字にしたい時は赤枠で囲われたマークを押します。

すると本文の編集画面では装飾したい文字の周りを<strong></strong>のHTML表記を挿入でき、

 

リアルタイムプレビューではこのょうに文字を太字に変更することができます。

太字はよく使う項目ボタンなので、使い方や位置はちゃんと把握しておきたいですね。

 

文字を斜体に

文字を斜体に変えたいときは赤枠で囲われたマークを押します。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

リアルタイムプレビューでは斜体にした文字を見ることができます。

ちょっと斜めに見えますよね。

 

文字を打ち消す(文字の上から横棒を引く)

文字を打ち消したいときは赤枠で囲われたマークを押します。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

リアルタイムプレビューでは実際に文字の上から横棒を引いて文字を打ち消した状態を見ることができます。

すると文字の上から横棒を引き文字を打ち消すことができるようになります。

 

文字に下線を引く

文字に下線を引きたいときは赤枠 で囲われたマークを押します。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

 

するとこのように文字に下線を引くことができます。

 

 

文字を四角で囲う(引用)

文字を四角で囲いたいときは赤枠で囲われたマークを押します

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

 

 

 

 

水平線を引く

水平線を引きたい時はこのマークを押すことで引くことができます。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

 

文字を選択したまま利用すると選択していた文字が消し飛ぶので注意してください。

 

画像を挿入する

画像を挿入するときは下の画面で赤枠で囲まれた部分のボタンを使用します。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

 

リアルタイムプレビューではこのように表示することができます。

あまりに大きすぎる画像だと画面からはみ出たりするので注意してください。画面サイズによって画像の大きさを競ってしてくれるテンプレートを使用していたら別ですが。

 

文字にURLを挿入する

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

 

 

顔文字を挿入する

顔文字を挿入したい時はこのマークを押します。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

文字を選択していると選択した部分の一番最後にくっつきます。

 

i-mode絵文字(docomo)を挿入

docomoの絵文字を挿入できます。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

このマークを押すと選択できるようになるので、お好きな絵文字を押します。

すると本文に挿入することができます。

 

Ezweb絵文字(au)を挿入

auの絵文字を挿入できます。

このマークを押すと選択できるようになるので、お好きな絵文字を押します。

すると本文に挿入することができます。

 

softbank絵文字(softbank)を挿入

softbankの絵文字を挿入できます。

このマークを押すと選択できるようになるので、お好きな絵文字を押します。

すると本文に挿入することができるようになります。

 

 

絵文字エディターで絵文字を作成

絵文字エディターでは自分で作成した絵文字を本文に張り付けることができます。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

実際に作ってみました。こんなかんじです。

ただ、ペンタブ(パソコンで絵を描くためにある機械)がないと自分の思い通りに絵を描けないので、普段から有効活用するのは難しいかもです。

 

お絵かきエディターで画像を作成

お絵かきエディターでは自分が書きたい絵を描き、本文に挿入することができます。

すると本文の編集画面では装飾したい文字の周りを挟む形で<i></i>のHTML表記を挿入でき、

実際に描いてみました。こんな感じになりました。

これもペンタブ(パソコンで絵を描くためにある機械)がないと自分の思い通りに絵を描けないので、普段から有効活用するのは難しいです。

 

 

 

 

FC2ブログのサイドバーに画像を載せる方法を分かりやすく図説

目安時間:約 5分

FC2ブログを利用していて思うことは、

 

いや…古いバージョンのやり方しか紹介してなくて正直困るわぁ…ってことですよね。

 

そこで今回は新しいFC2ブログ対応!サイドバーに画像を載せる方法を紹介します。

 

張り付けたい画像をアップロードしておく

自分がサイドバーに張り付けたいと思っている画像をアップロードしておきましょう

 

まず、FC2ブログにログインしてください。→(FC2ブログへのログイン方法はこちら)

 

ログインしたら、「ホームタブ」の「ファイルアップロード」をクリックします。

 

するとこの画面が表示されるので、サイドバーに張り付けようと考えている画像が入っているファイルを開き、ドラッグ&ドロップでアップロードしてください。→(もっと詳しい画像アップロードの方法はこちら)

 

画像のURLをコピーする

ファイルアップロード画面を下にスクロールすると「ファイル一覧」という場所が出てきます。

アップロードした画像のURLがあるので、それを「Ctrl+C」のショートカットキーまたは「右クリックで一覧を出した後、コピーを選択」してコピーしましょう。

画像URLは全選択の「Ctrl+A」のショートカットキーを使ったり、自分で手で選択せずともワンクリックで全選択する仕様になっているので、そのままコピーしちゃってください。

 

 

フリーエリアを追加する

 

フリーエリアを追加する作業に入ります。

設定タブの「プラグインの設定」をクリックしてください。

開くとこのようなページが出てきます。まず、赤い四角で囲まれた「公式プラグイン追加」をクリックしましょう。

 

 

 

新しい画面が表示されるので、下画面にスクロールしていくと、「拡張プラグイン」という場所に「フリーエリア」という欄があります。右端に「追加」と書かれているのでそこをクリックしてください。

 

 

フリーエリアにURLを張り付ける

クリックすると「フリーエリアの編集」というページが表示されます。

ここではサイドバーを増やす作業を行うことができます。

タイトルはサイドバーの名前になります。今回は「ねこちゃん」としてみます。

 

では、フリーエリアに画像URLを貼っていきます。

画像URLは赤い四角で囲った部分に張り付けるんですが、そのまま張り付けないでください。

 

 

そのまま張り付けるとこのように文章と認識されて表記されるので、HTMLに絡めて記述しなければなりません。

<div>
<img src="" />
</div>

このHTMLを利用して画像と認識させます。

このHTMLを記述した後、先ほどコピーした画像URLをダブルコーテーションの間に張り付けてください。(ダブルコーテーションはこれ→"")

画像URLを張り付けられたら、下にある設定と書かれた青いボタンをクリックしてください。

 

更新をクリックします。

「設定」を押す前に「プレビュー」を押すと画像が表示されなくて、「え?本当にこれで会っているの???」と疑ってしますが、「設定」を押した後に見るときちんと変更してあるので、安心してください。普通設定を押す前の確認として「プレビュー」があるような気がするのですが…

 

完成

これでサイドバーに画像を表示することができるようになりました(ちょっと顔が見切れちゃいましたけど…汗サイズの問題ですね。)

 

違うテンプレート(basic white)を利用すると、くっきりと綺麗にはまりました。

 

これで作業は以上です。お疲れ様でした!

wordpressにアップロードしたら粗い画像になった…~1分で解決綺麗にする方法~

目安時間:約 2分

 

wordpressに画像を張り付けたときに「プレビュー」ボタンを押して「え、なにこれめちゃめちゃ画像小さいし、粗い…」ってショックを受けていませんか?↑こんな感じ。

画像の文章部分の文字がつぶれてこれじゃあ意味が分からないよ…説明しようがないよ…みたいな。

 

それって結構簡単に直りますよ。3分クッキングならぬ1分クッキングです。余裕です。

 

まず、右クリックを押してください。

すると、赤い四角で囲った部分が表示されるので、鉛筆マークをクリックしてください。

すると、このような画面が表示されます。赤い四角で囲った部分をクリックして「フルサイズ」という部分に設定してください。

 

 

これで画像が綺麗に表示されるようになりました。

 

ね?簡単でしょ?

FC2ブログのヘッダーに画像を張り付ける方法を図解で詳しく解説

目安時間:約 5分

 

ブログアフィリエイトをやるうえでヘッダーに画像を張り付ける作業は分かりにくいですよね。

 

そこで今回はFC2ブログのヘッダーに画像を張り付ける方法を紹介します。

 

今回使用するテンプレートは「white_style」です。

 

画像のアップロード

自分がブログのヘッダーに利用したいと考えている画像のアップロードを行います。

まず、「ホーム」タブの「ファイルアップロード」に移動してください。

 

移動したら画像ファイルがある場所を開き、「ここにファイルをドロップできます」と書かれた場所めがけてファイルをドラック&ドロップで移動してください。

すると、このようなアップロード準備段階に入ります。アップロードは完了していないので、下へスクロール。

 

赤い四角で囲われた部分がありますね。くちゃくちゃ書いてありますが、気にせず「アップロード」と書かれたボタンをクリック。

 

 

するとこんな画面が出てくるので、ためらわず「OK」をクリック。

 

するとアップロードが開始するので、終わるまで待ちましょう。

赤枠で囲われている青と白のくるくるしている棒のようなやつがなくなったらアップロード完了です。

 

 

 

 

画像のURLをコピー

 

アップロードが完了したら赤い資格で囲われている部分を「Ctrl+C」のショートカットキーでコピーしてください。(赤い四角で囲まれた部分を一回クリックすると全選択になるので、そのままコピーするだけで大丈夫です。)

そして「設定」タブの「テンプレートの設定」をクリックして移動してください。

 

ヘッダーのURLの差し替え

「テンプレートの設定」ページに移動したら間違えた時用の為にとっておきたいテンプレート情報を保存します。赤い四角で囲んである「複製」という部分をクリックしてください。

「white_style1」という複製情報が作成されましたね。これで万が一間違っておかしくなってしまっても大丈夫です。

もしヘッダー画像URLを挿入する部分を間違えて画面が破綻してしまったり、誤って違う部分を消してしまったり不都合が生じたら複製した「white_style1」を適応しましょう。

 

 

では、ヘッダー画像の差し替えをしていきます。

「HTML編集」部分をスルーして下の方へスクロール移動します。

すると、「スタイルシート編集」の部分があると思うので、画像で赤い四角で囲われた部分を探してください。

 

見つけたら、「background-image: url」と書かれた部分の背後にカッコ&ダブルコーテーション囲まれた部分がありますね?(カッコはこれ→()。ダブルコーテーションはこれ→””。だからこの部分の事→(””)。)

 

そのダブルコーテーションの中の部分をすべて選択し、BackSpaceキーで消してください(ここはショートカットキーで切り取るとコピーしてしまうのでバックスペースで。)

そして、先ほどコピーした画像URLを張り付け作業に入ります。そのまま③「Ctrl+V」のショートカットキーで張り付けちゃってください。

 

すると先ほどコピーしておいた画像URLが張り付けられます。

 

④更新ボタンを押す前にプレビューと書かれたボタンを押してちゃんとできているか見てみてください。

 

先ほどはこういった感じの画像だったのが

こういう感じになると思います。(イラストについては触れない方向で。笑)

 

⑤これでよければ更新ボタンをクリック。

 

 

これでヘッダー画像の変更は完了です!お疲れ様でした。

管理人プロフィール

 

アフィリ猫:管理人

ブログアフィリエイトアドバイザー。
女子大生向けブログアフィリエイトの情報を発信する人(猫)。

管理人詳細プロフィール

 

ひきこちゃん

私立大学に入学してから学費を自分で払うためにアルバイトを探している女子大生。しかし、人と関わるのが苦手で在宅仕事をしたいと考ていたところ、ブログアフィリエイトに巡り合う。月5万円を稼ぐのが目標。

 

おすすめ商材

アンリミテッドアフィリエイト
 
●1商品で942万円稼ぎ出す仕組み「Unlimited Affiliate NEO(アンリミテッドアフィリエイトネオ)」
 
アフィリエイトで稼ぐ方法をまとめた超大作。
内容がみっちり詰まっているので大変ですが、これを実践すれば間違いはありません。

最近の投稿
カテゴリー
最近のコメント
メタ情報
アーカイブ

ページの先頭へ