ブログで小説！

　この記事はユーザーズフォーラムでの回答として書き始めたのですが、うちのブログ(ブログで小説！)の読み手さん向けに書き換えております。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">の間に入れていきます。
　このページの上の画像のように、画像を右（文章が左に入るよう）にする場合は、

<img src="http://blogXX.fc2.com/a/XXXXXX/file/XXXXXX.jpg" alt="------" border="0" align="right">

と設定しています。画像が左の場合はalign="left"にします。

余白を設定する。

　画像と文章が「くっつきすぎている」と感じるときは、余白を入れます。

<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>←これを忘れると、テンプレートがオカシくなったように見えることがｗｗ

透過効果を使ったテンプレートが、いくつかあります。

例：
8571/6205/1002/1001/804

(以降の記事は、↑のどれかをクリックしてから読んでいただくと判りやすいかと)

透過効果は、美しいと思うのですよ。でも、画像をおくと、画像の中まで背景がすけて「まだら」になってしまうのですね。
（とくに余白の多い画像は目立つかも……。例↓）


ユーザーフォーラムで、こんな記事を見ました。
「style="position:relative;"」を入れるだけで↓

IEの透過効果（filter : Alpha(opacity=xx)）にかんしては、画像が透けなくなるというのです。

残念ながら、FireFox透過（-moz-opacity :）には無効のようです。それでも、当ブログでアクセス解析をかけていたときに(2006.5.20,ユニークアクセス：138)、IEのシェアを調べたところ、まだ８割ありました。８割の方に有効であれば、使ってみる価値があるように思います（←私見ｗｗ）

ただ、IEできれいに表示されていても、FireFoxなど別ブラウザでチェックすることをお勧めします。レイアウトが崩れることもあるらしいので、そのときにはいさぎよく諦めましょうｗｗ。


2007.5.1追記
上記方法ではダメだったテンプレート“sakura”。ごねくりまわしているうちにIEでだけ表示可能になったが、「絶対にオススメはできない」（入力面倒、Firefoxなどで表示されない、テンプレート替えたらオカシクなる）

<div style="display:block;position:relative;width:200px;height:40px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[画像URL]',SizingMethod=scale);"></div>

↓backgroundではだめ。



■本人備忘
firefox,operaで透過：
http://weblibrary.s224.xrea.com/weblog/css/cat15/iefirefoxoperanetscapesafarics.html

一つのエントリのなかで何度も畳む(あるいは、前半を畳む、途中を畳む)というのを、タマにやりたくなります。
なんだかんだ言いながら、テンプレート変更の多い私のような人間は、テンプレートを変えたときにスクリプトを書き込み忘れるとまったく読めない、というのは、危険なので。「その場その場」でスクリプトを書き込んでしまっています。
ごく短いので、これなら、そんなに、負担でもないのではないでしょうか。

下記「idstr」部分は、（日付を入れるなどして）確実に毎回変わるように留意しています。

<a href="javaScript:void(0)" onClick="idstr.style.display=('none'==idstr.style.display)?'':'none';return false;">《more》</a>
<p ID='idstr' style='display:none'><noscript></p><p>《ここから追記》</noscript>たたまれる文字列はここに</P>

《more》

《ここから追記》なお、この記事は、「なんでもたたむよ」のような、複雑かつエレガントなスクリプトとは何の関係もないです。（￣＾￣）

出典

テーマ : 初心者のために・・・ - ジャンル : コンピュータ

1)URLを調べる。
自ブログの記事をリンクしたい場合は、記事のタイトルをクリックすると、ブラウザ(IEなど）のアドレス欄に、
http://XXXXXX.blogXX.fc2.com/blog-entry-●.html
と出ます。blog-entryが含まれるのが「記事へ直行するURL」（固定URLといいます）です。
固定URLと記事タイトルをエディター（WINDOWSなら「メモ帳」など）にコピペしておいてください。

他ブログをリンクしたい場合は、そのURLとタイトルを、エディターにコピペしておいてください。

2)タグをいれる。
「新しい記事を書く」を、 「WYSIWYGテキストエディター機能を使用する」をクリックした状態で使ってください。
「地球に鎖」のアイコンがリンクです。改行は、(IEの場合)shift+ENTERを使っていれてください。

「WYSIWYGテキストエディター機能をオフにする」
をクリックすると、

<a href="[url]" target="_blank">[タイトル]</a><br />

こんな感じでHTMLタグが入っています。
HTMLタグごと、とりあえずエディターにコピペしてください。
（記事を保存する必要はありません）

3)フリーエリアにコピペする。
プラグインのフリーエリアに、上記で用意したHTMLタグをコピペして、保存してください。


コレなんで下書きにしてあったんだっけ^^;
11/15公開へ変更

記事として解説を書きます。
クリップアートは『Year Of the Cat』サマのWEBフリー素材をお借りしました。

続きを読む »

ユーザーフォーラムで、シンプルなHTMLファイルを別窓で開きたい、というリクエストが（たまたま）２件続きました。(こちらとかこちらとか)

もちろん、回答にあるように、ファイルアップロードでHTMLファイルをアップすることもできますが、毎回、ファイルを作り直す必要があります。

小さなテンプレートを作り、小窓の中身を過去記事として作成すれば、画像の挿入やリンク、文字の色や大きさなど、編集用のアイコンを使いながら記事として書くことができます。（ただし、広告が入ります）

出来上がり見本は、こちら↓
小窓を開きます

小窓の中身は、過去記事（http://adankadan.blog47.fc2.com/blog-entry-149.html）として書いてあります。(今回は実験ですから、「そのまま」ですが。日付を過去に変えれば「最近の記事」には載らず、ブログ上、目立ちにくくなります。ただし、PINGは発信しているかと)

記事中に書くHTMLタグは、以下のとおり。

<a href="javascript:void(0);" onClick='window.open("./?style2=subwintemplate&no=149", "Test", "directories=no,fullscreen=no,location=no,menubar=no,toolbar=no,status=no,resizable=yes,scrollbars=yes,left=0,top=0,width=500,height=500")'>小窓を開きます</a>

赤文字部分を過去記事のエントリー番号にあわせてください。(それ以外の部分の意味は、とほほのＷＷＷ入門等をご参照ください)

　■

小窓用のテンプレートの一例……拙作“inframe”をちょこっと刈り込んだだけですが^^;　細部はお好きなようにアレンジを。

適当なテンプレートをダウンロードし、テンプレートの名称を

subwintemplate

に、変えます。

HTMLを

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<link href="<%css_link>" type="text/css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml">
<title><%blog_name> <%sub_title></title>

<script type="text/javascript" language="javascript">
<!--
//管理メニュURL
lenb="<%url>".length;
id1=lenb-16;
sn1=lenb-11;
sn2=lenb-9;
idfull="<%url>".substring(7,id1);
snfull="<%url>".substring(sn1,sn2);
adminmode="http://blog"+snfull+".fc2.com/"+idfull+"/admin.php";
//Open/Close
function toggleOpenClose(){
if(document.getElementById('opn<%pno>').style.display == "block"){
document.getElementById('opn<%pno>').style.display = "none";
document.getElementById('swt').innerHTML = "《read more》";
}else{
document.getElementById('opn<%pno>').style.display = "block";
document.getElementById('swt').innerHTML = "《hide more》";
}
}
// -->
</script>

</head>
<body onLoad=knowhash()>
<!--topentry-->
<%topentry_body>
<!--more-->
<script type="text/javascript" language="javascript">
<!--
document.write("<div id='opn<%pno>' style='display:none;'>")
// -->
</script>
<noscript><div></noscript>
<%topentry_more>
</div>
<p class="entry-more">
<a href="javascript: void(0)" onclick="toggleOpenClose()"><span id='swt'>《read more》</span></a>
</p>
<!--/more-->
<!--/topentry-->
<p class="footer">
<a href="javascript:window.close()">CLOSE</a>/
<script type="text/javascript" language="javascript">
<!--
kanri1="<a href='"+adminmode+"?mode=editentry&no=<%pno>' class='adm' title='この記事を編集'>";
document.write(kanri1)
// -->
</script>
<noscript>
<a href="<%url>admin.php?mode=editentry&no=<%eno>" class='adm'>
</noscript>
EDIT</a>/<%ad>/<%ad2>
</p>
</body>
</html>

スタイルシートを

@charset "EUC-JP";

* {
margin : 0;
padding : 0;
word-break:break-all;
}
a:link {color : #000099 ;text-decoration : none;}
a:visited {color : #999999 ;text-decoration : none;}
a:hover {color : #ff3366 ;text-decoration : underline;}
a:active {color : #ff3366 ;text-decoration : none;}

body {
margin : 20px;
font-size:88%;
line-height : 1.7;
}
.footer{font-size:88%;
text-align:center;}
.swt{font-size:74%;}

これらを変更して、保存します。

小窓用の過去記事は、この機能を使うたびに書かないといけませんが、テンプレートのほうは、自分の管理者ページの「テンプレートの設定」に載っている限り、再使用ができます。

続きを読む »