Comment

No.8
このコメントは管理者の承認待ちです- / 2016.01.31 21:57

タグの挿入の設定

まずはエクサワロスツールの設定からです。「オプション」→「書式設定」で下図の設定画面が出てきます。上にある【削除】【太字】【色】【インデント】【間隔】は説明がでますので省略します。 ここでは【タグの挿入】の設定を行います。

20101220_01c.jpg

赤い枠線に囲まれた部分が変更を加えた部分です。pタグは文章を囲む際に使われるタグです。なぜ今回使用したのかといいますと、divタグやspanタグよりも文字数が短いからです。クラス名はAとBということにします。本来ですと、あとで自分が確認する際に分かりやすいようにしておくほうがいいです。

アスキーアートの設定

次に、「オプション」→「その他設定」でアスキーアートの設定を行います。赤い枠で囲まれたAA用のタグという部分で設定を行います。この時に【アンカーポップアップ】は使用しないというのに設定をしておいたほうがいいです。アンカーポップアップとは、安価があった場合前のコメントをマウスオーバーした際に浮き上がらせる機能ですが、あまり使用しているサイトはないのでオフでも大丈夫です。

デフォルトの設定ですと

<font face="MS Pゴシック">   </font>

という設定になっていますが、これですとフォントの大きさなどは設定できずにフォントのスタイルをMS Pゴシックにするというだけの設定にになってしまいますので、

<span class="C">  </span>

上記の用にAAだけにスタイルを設定できるようにクラス名をつけます。

レスの選定

datファイルを保存し、【開く】ボタンを押すと下図のようにレスの選定画面になります。今回はコメントとAAの二つのコメントだけを選んで生成します。

20101220_06c.jpg

1レス目は、色を赤にチェックをいれて、2レス目はAAのボタンにチェックを入れています。これで実行ボタンを押します。

生成されたHTMLは上記の用になります。設定したとおりpタグできちんと囲んでいるのがわかると思います。生成された各HTMLタグの説明を致します。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>

文書のヘッダ情報を表す部分です。Shift_JISという文字コードを使っていると宣言をしています。しかし記事にする際にはいらないので削除しましょう。

<font color="#008000"> </font>

この中にあるフォントの色は#00800にするという指定です。色は0~Fの16進数で表します。

<br />  または <br > 

改行するという意味です。二種類ありますが、今後使うとするなら<br /> を使うほうがいいと思います。

スタイルの指定

A~Cまでクラスを付けましたが、このままだと何も指定されていません。今回はIDや名前部分は文字を少し小さく、本文部分は大きく、アスキーアートは綺麗に表示されるようにしましょう。スタイルを指定するのは直接指定するのと、CSSで設定する二種類あるので両方の例を書きます。まずは今回どんな指定をしたいのかを具体的に挙げます。

  • IDや名前部分 font-size:14px;
  • 本文部分 font-size:22px;
  • アスキーアート部分 font-family:'MSP ゴシック', sans-serif, arial;font-size:14px;line-height:10px;font-weight:normal;

アスキーアートだけ指定するデザインが多いのには理由があります。アスキーアートが普通の本文を同じスタイルにしていると隙間が空いていたり、大きかったりとアスキーアートとして分かりにくいものになってしまいます。なのでアスキーアートの場合にのみ綺麗に表示されるように設定をするのです。

font-family:"MS Pゴシック",sans-serif, arial; 【フォントのスタイル変更】
font-size:14px;【フォントのフォントサイズを14pxにする】
line-height:normal;【文章の間隔を初期値に戻す】
font-weight:normal;【フォントの設定を太字や斜体の場合に普通に直す】

この他に色を変えたいとか、他の設定をしたい場合は、CSSタグを調べればたくさん出てきますので省略します。まずは直接指定する場合です。

生成された時A~Cと名前を付けていましたが、直接指定の場合は設定画面でstyle="●●"と書いておきます。これによりその囲まれている範囲はその指定したスタイルが反映されるようになります。



1:以下、名無しにかわりましてVIPがお送りします[]:2010/12/20(月) 16:58:03.04 ID:SrxAYoPr0


うますぎる
止まらない。誰か助けて

ハッピィィイタアアアアアアアアアアアアン!!!!!!!!!!!!


2:以下、名無しにかわりましてVIPがお送りします[sage]:2010/12/20(月) 16:58:33.23 ID:EHCusDTG0


        ____
        /     \
     /   ⌒  ⌒ \   何言ってんだこいつ
   /    (●)  (●) \
    |   、" ゙)(__人__)"  )    ___________
   \      。` ⌒゚:j´ ,/ j゙~~| | |             |
__/          \  |__| | |             |
| | /   ,              \n||  | |             |
| | /   /         r.  ( こ) | |             |
| | | ⌒ ーnnn        |\ (⊆ソ .|_|___________|
 ̄ \__、("二) ̄ ̄ ̄ ̄ ̄l二二l二二  _|_|__|_


上記の用にAAも綺麗に表示されました。次に直接ではなく、CSSにスタイルを書く場合です。HTMLは一番最初のアルファベットA~Cのものをそのまま使います。CSSを書く場所はFC2は「テンプレートの設定」→「●● のスタイルシート編集」の部分の一番下に追加してください。ライブドアブログの場合は、「ブログ設定」→「デザイン」→「デザインカスタマイズ」→「スタイルシート(CSS)」の一番下に追加してください。なぜ一番下なのかというと、CSSは下に書いてあるほどデザインが適応される優先順位が高いからです。他にも優先順位を決める要素がありますが、今回はわかりやすくということで一番下に書きます。追加する文章は下記の通りです。

A~Cの前にドットがあります。これがないとスタイルは反映されないので覚えといてください。よく忘れるのでチェックしておきましょう。ドットの他にもシャープを使う場合もありますが、今回はシャープを使う場面はないので説明を省きます。 これで文字部分の装飾は完成です。あとは見てくれる人が読みやすいようなスタイルを探してどんどん変えていきましょう。

Comment

No.8
このコメントは管理者の承認待ちです- / 2016.01.31 21:57

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。