く、苦労して書いてる間にもっと便利なのがうぷられてるー!?
http://notarejini.orz.hm/up/d/hero0761.html
さらに便利に
http://notarejini.orz.hm/up/d/hero1368.html

  • 一行目をタイトルに
  • 画像のＵＲＬを挿絵に
  • ＩＤにリンク
  • ソースをこのページを参考にいじくってみよう


SSをhtmlにしてみよう † Edit

  • せっかく頑張って書いたSSも、.txtファイルのままでは見づらい読みにくいという声は 意外と多かったりします。
    ひと手間加えてhtmlにしてみれば、読んでもらったり感想をもらえたりする確率もグーンとアップする……かも!?
↑

つくりかた † Edit

※WinXP.IE6の場合

  • まずはどこぞの親切な方が作ってくださった(私は作者じゃないです。念のため)
    http://notarejini.orz.hm/up/d/hero0745.htmを右クリックして対象をファイルに保存しましょう。(以下テンプレート)
    場所はデスクトップなりマイドキュメントなりゴールデンロアフォルダ作るなり適当に。

    http://notarejini.orz.hm/up/d/hero0793.png

  • 次に保存したテンプレートを──バックアップをとっておくと次回以降ラクでしょう──
    右クリック-編集で開きましょう。たぶんメモ帳で開けるはずです。

  • 5行目には<TITLE>テンプレート</TITLE>と書いてあります。テンプレート　の部分を消して、あなたのSSのタイトルに書き換えましょう。
    27行目の<BODY bgcolor="#F0E0D6">　と　36行目の</BODY>の間には、なにやらゴチャゴチャかいてあります。

    http://notarejini.orz.hm/up/d/hero0784.png

    どうやらcssといって文全体のみてくれをいじくりまわす方法について親切に解説してくださった文章のようですが、
    私もcssはよくわからないので無視して全部消します。
    興味のある方はhttp://www.tohoho-web.com/css/basic.htmこのへんで自習したりしなかったりしながら適当にいじってみてください。
    むしろ詳しい方、解説書いといてくれると喜ばれます。私に。

  • あなたの力作ss(ここでは例文としていろは歌を使います)のtxtファイルを──これも念のためバックアップをとっておくといいでしょう──開いて、
    文の行末全てに「　半　角　で　」<br>とひとつずつ書き加えましょう。コピペでいいです。空白行にも忘れずに。
    後述する秀丸のマクロ機能を使えば全自動で一発で出来ます。
    次に文の一番最初に「　半　角　で　」<p>と、最後に</p>と書きます。

    http://notarejini.orz.hm/up/d/hero0785.png

  • 先ほどのテンプレートの<BODY bgcolor="#F0E0D6">　と　</BODY>の間に、
    　<br>や<p>を書き足したあなたのSSを貼り付けます。

    http://notarejini.orz.hm/up/d/hero0788.png

  • 最後に、ファイル-名前をつけて保存　から、適当な名前をつけて(ただし、名前の末尾には必ず.htmlもしくは.htmとつけること！)保存します。
    保存したファイルをダブルクリックするとブラウザで閲覧できますので、見た感じを確認しましょう。

    http://notarejini.orz.hm/up/d/hero0792.png

  • あとはあぷろだにあげてスレでさらさらしたりwikiに貼り付けて皆の反応を待ちましょう。スルーされても泣かないでね！
↑

秀丸マクロ † Edit

秀丸エディタで秀丸マクロを使うと、あなたのSSに<br>をつけるのがとてもラクになります。
具体的には3クリックくらいで。

  • まずは秀丸エディタをインストールします。 シェアウェアとありますが、お金を払わなくても、
    起動時に「金払え」というダイアログが出るだけで、
    一番上の「私はまだ秀丸エディタをそれほど使い込んでいません。」を選べば
    全機能問題なく使えるので安心しましょう。

  • 次に改造タグ造をインストールしてください。
    このマクロを使えば(使い方は各ソフトウェアのマニュアル・リードミーを参照のこと)
    いちいち<br>をコピペしなくても3クリックであなたのSSに<br>を全自動でつけてくれます。
    残念ながら<p>と</p>は自動ではつかないようなので自分でつけてください。
↑

TeraPadの置換でタグを入れよう † Edit

「秀丸は高機能だけど起動時に金払え言ってくるのマジやめて」という方には、
TeraPadやMKEditorなどのフリーのプレーンテキストエディタがお勧めです。
機能的には秀丸には及びません（秀丸使ったことないけど…）し、正直Windowsのメモ帳に毛が生えた程度のものですが
毛も大事なんだよそこのスジ教徒

  • まずSSを書きましょう。頭で妄想膨らましてるだけじゃSSは出来ないよ。
    このとき、上のテンプレHTMLにおいて改行させたいような場所は改行し、
    １つの囲いの区切りとしたいような場所は２回改行して１つの空行を作ってください。
    ２行以上続く空行を作っちゃ　ダ　メ　よ　！

    terapad_1.jpg

  • TeraPadのメニュー「検索」から「置換」を選択してください（Ctrl-R押下でも可）。
    これは、編集中の文章から特定の文字列を探し出し、それを別の文字列に変更するものです。
    まず、左下にあるチェックボックスのうち、「\n=改行,\t=TAB,\\=\(E)」をオンにしてください。
    これにより、改行のように普段目に見えない特殊文字を検索で扱えるようになります。
    （Windowsのメモ帳にはこの機能はありません。同様の検索機能のあるツールなら同じ手段を取れます）
    また、「置換動作の確認(P)」がオフになってると確認なしに一気に置換してくれるので爽快。

    terapad_2.jpg

  • まず、置換ダイアログボックスの「検索する文字列」に\n\n（\nを２個）、
    「置換する文字列」に</p><p>と入力し、「すべて置換(A)」ボタンをクリックしてください。
    次に、「検索する文字列」に\n（今度は１個）、「置換する文字列」に<br />と入力して
    同様に「すべて置換」してください。 これで、改行するところに改行のタグ、囲いの区切りにpタグの区切りが置換されるわけです。
    ただし、２回行う置換の順序は絶対に間違わないように！
    また、確認なしに一気に置換を行う場合は事前に保存してもしもの事態に備えましょう。
    さらにその後「</p><p>」→「</p>\n\n<p>」、「<br />」→「<br />\n」の置換も行うと
    HTMLソースで文章を見たときに見やすくてGOOD!

    terapad_3.jpg

  • こうしてタグの追加されたSS文章ですが、ちょっとタグが足りません。
    お手数ですが、SSの一番先頭に<p>を、末尾に</p>を手動で追加してください。
    これでタグつき文章は完成！
    上にあるとおり、テンプレの<body>タグと</body>タグの間に
    全部べたっとコピペしてやれば完了です。

    terapad_4.jpg

    • 「俺はテンプレの１つの囲いの中で空行を使いたいんだよ！」と考えてるそこのアナタ、
      上の方法をそのまま使うと空行が囲いの区切りとなるため、空行を文章的な空行として扱えません。
      その場合は、囲いの区切りを表す空行を「２行連続する空行」としてください。
      そして、最初の置換を「\n\n\n」→「</p><p>」としてみましょう。

    • え、「俺は２連続空行を文章中で使いたいんだよ！」ですって？　そのときは３連続空行で(ry

  • TeraPadでの置換によるタグ付けを追加してみました。よく使う方法だったからぜひ書いておきたくて… -- 2008-01-30 (水) 21:01:54
Last-modified: 2008-01-31 Thu 01:16:35 JST (5927d)