《FC2》記事の中に書くタグ
この記事はユーザーズフォーラムでの回答として書き始めたのですが、うちのブログ(ブログで小説！)の読み手さん向けに書き換えております。m(_ _)m [フォーラム以外からいらした方は、ここをクリックしてください（テンプレ＝“odin_w”へ）]
小説を書いていて、１回１回ごとに違う「雰囲気」にしたい方もいらっしゃるかと思います。
いままでテンプレートのことをメインにいろいろ書いてきて、ナンなんだけれども──。
思い切りシンプルなテンプレートにして、１回ずつ写真や絵を入れていくという手もあるんですよね^^
・トラブルが多い「画像挿入」
・画像の左/右に文章を入れる。
・余白を設定する。
・画像に文字を重ねる
・画像の一部に文字を重ねる
・画像にリンク貼る（バナーなど）
・画像への文字リンク
・画像のみ小窓
・画像のみフルスクリーン
トラブルが多い「画像挿入」
個人的に、文章をかきかけの状態で、
アイコンから画像を入れようとして、途中で操作画面が反応しなくなり、文章が消えた経験、かなりアリｗｗ（ダメになったときは、ステータスバー（ブラウザ下端左）に
というメッセージが出ています）
どうも、まず管理メニュー左にある ツール [ファイルアップロード]→[記事を書く]で、画像タグを先に入れてから文章を書き出すのがいいみたいで……。
文章を書いている途中で入れたくなった場合、書いた文章はいったん[保存](閲覧者が気になるならエントリーの状態を「下書き」で)するか、エディターにコピーをとって。[ファイルアップロード]→[記事を書く]で自動的に出たタグをコピー＆ペーストで入れたい記事へ持ってきたほうが安全、のような気がするｗｗ
画像の左/右に文章を入れる。
画像挿入操作で、自動的に挿入されるタグは、こんな感じです。
「画像を表示する」の必要な部分は、赤文字表示の部分。
<a href="http://blogXX.fc2.com/a/XXXXXX/file/XXXXXX.jpg" target="_blank"><img src="http://blogXX.fc2.com/a/XXXXXX/file/XXXXXX.jpg" alt="------" border="0"></a><br clear="all">
<a href〜></a>は画像のみを別窓表示する機能のために入れられているリンクタグ。
<br clear="all">は、「画像の横には文字を入れない」というタグですので、画像の右や左に文章を入れる場合には、本文は、</a>と<br clear="all">の間に入れていきます。
このページの上の画像のように、画像を右（文章が左に入るよう）にする場合は、
と設定しています。画像が左の場合はalign="left"にします。
<img src="http://blogXX.fc2.com/a/XXXXXX/file/XXXXXX.jpg" alt="------" border="0" align="right">
余白を設定する。
画像と文章が「くっつきすぎている」と感じるときは、余白を入れます。
<img src="http://blogXX.fc2.com/a/XXXXXX/file/XXXXXX.jpg" alt="------" border="0" align="left" style="margin:8px;">
数字は、お好みで調整してください。
画像に文字を重ねる
画像に文字を重ねるときは、画像を挿入(<img>タグ)ではなくて、「背景画」として画像を扱います。
<div style="background:url(http://blogXX.fc2.com/a/XXXXXX/file/XXXXXX.jpg) top right no-repeat;">
ここに本文をかきます。
</div>←これを忘れると、テンプレートがオカシくなったように見えることがｗｗ
赤文字部分の設定は、『はじめてのFC2ブログカスタマイズ』の「背景画像の設定には……」以下に、関係CSSがコンパクトにまとめられています。テンプレートをカスタマイズする例ですが、rightとかleftとか、そういう単語はほぼほぼ共通に使えるので、とりあえず、入れてみてください。表示が乱れたって、データは壊れないから大丈夫^^画像の一部に文字を重ねる
イラストの色の薄いところには文字を重ねたい、色の濃いところは文字を重ねたくない、という場合。
余白設定（padding）を使う手もありますが。
ここでは透過GIFを「画像挿入」する手を使ってみました。
透過GIFファイルの作り方は、お手持ちの画像ソフトを御覧下さい(ぉ)
作るのメンドイ方は、
←ここに貼っておきますので、持っていってください。ダウンロードすれば、枠線はありません。(GIFファイルって勝手に上げたり貰ったりするとヤバいという説がなかったか？ という記憶のある方へ。問題となった特許は期限ぎれとなり、すでに無効です♪)
<div style="background:url(http://blogXX.fc2.com/a/XXXXXX/file/XXXXXX.jpg) top right no-repeat"> <img src="http://blog-imgs-18.fc2.com/a/d/a/adankadan/touka.gif" width="240" height="270" align="right">
赤文字部分の設定は(中略)持って行ってはいけませぬｗｗ
</div>
画像にリンクを貼る
1. ツール [ファイルアップロード]→[記事を書く]。
2.下記のタグが、自動的に、記事中に書き込まれますので、
<a href="http://blogXX.fc2.com/a/axxxxxxx/file/xxxxxx.gif" target="_blank"><img src="http://blogXX.fc2.com/a/axxxxxxx/file/xxxxxx.gif" alt="画像の説明" border="0"></a><br clear="all">
下線部分をリンク先のURLに書き換えます。この<a〜</a>を、使いたい場所にコピーしてください。
画像への文字リンク
1. ツール [ファイルアップロード]→[記事を書く]。
2.下記のタグが、自動的に、記事中に書き込まれますので、
<a href="http://blogXX.fc2.com/a/axxxxxxx/file/xxxxxx.gif" target="_blank"><img src="http://blogXX.fc2.com/a/axxxxxxx/file/xxxxxx.gif" alt="画像の説明" border="0"></a><br clear="all">
下線部分をリンクに使いたい文字に書き換えます。この<a〜</a>を、使いたい場所にコピーしてください。
画像のみ小窓
画像のみ小窓
<a href="javascript:void(0);" onClick='window.open("http://blog-imgs-18.fc2.com/a/d/a/adankadan/cat_wind_w.jpg", "Test", "directories=no, fullscreen=no, location=no, menubar=no, toolbar=no, status=no, resizable=yes, scrollbars=yes, left=0, top=0, width=400, height=400")'>画像のみ小窓</a>
画像のみフルスクリーン
画像のみフルスクリーン(閉じるには[alt]＋[f4])
<a href="javascript:void(0);" onClick='window.open("http://blog-imgs-18.fc2.com/a/d/a/adankadan/cat_wind_w.jpg", "Test", "fullscreen=yes,target=_blank")'>画像のみフルスクリーン</a>
■HTMLタグやCSSの意味を調べるためのサイトは、
『"勝手に厳選"リンク集』に入れてありますので、御覧下さい。
■このページの猫のクリップアートは……
『Year Of the Cat』サマのWEBフリー素材をお借りしました。 こちらは、ここから持って行ってはいけませぬｗｗ
0
0
