音楽系のことはほとんど書きません(詐欺)

音楽系のなんとやら

アウトはシンプル、インでは雑多な生活を好む人間の情報ブログ

【HTML講座】ホームページのソースにAA(アスキーアート)を仕込む方法

最近HTMLのソースにAAを仕込むのが流行っているそうなのでやり方を順を追って解説していきます。

http://articleimage.nicoblomaga.jp/image/64/2014/2/9/290d3bee8f208dd736f395dbea9a1aba83a82c651394256668.jpg

前提条件

これは自分のホームページを持っていてなおかつHTMLを編集できる人向けです。

ブログサービスだとHTMLいじれるところは早々ないと思うのであきらめてください。

  • 自分のホームページを持っている
  • HTMLがとりあえず編集できる
  • 不具合が起きても自己解決できる and 僕にキレない

上記に当てはまる方は次へどうぞ。

 

ホームページのソースに(アスキーアート)を仕込む方法

1.コメントの設置

HTMLにはコメントという機能が実装されています。今回の流行はこれを利用して作られています。

コメントとは?

HTMLに設置することによって選択したコメントをWeb上に表示することなく、エディット画面(ソース)のみで表示されるコメントに変換できるタグ

<!-- (コメント) -->

 

まずはHTMLのbody以下に下記のソースをコピーします。

<!--
 
AAを張り付けるところ
 
-->

元々は<!-- (コメント) -->という形なのですが、ここでは使いやすいように既に編集してあります。

 

2.AAの入手

AAを自分で作るとなるとかなりハードルが高いと思います。

なのでここはサクッと無料で配布してくれているサイトを利用しちゃいましょう。

アニメ・ゲーム系 AA : アスキーアート リサイクル保管庫

アニメ系をほぼ網羅しているといっても過言ではありません。無いAAは無いと思ってもいいかもしれない、それくらいの規模です。

3.AAの貼り付け

取ってきたAAを先ほどのコメントタグ

<!--
 
AAを張り付けるところ
 
-->

 のAAを張り付けるところに貼り付けてください(分かんない奴がいたら見てみたいわ)。

 

<!--
 
 ぇえ――――っ!!
    ミ~ ̄ ̄ ̄\
   / __ __亅
   / .> ⌒ ⌒|
  |/  (・) (・) |
  (6 ――○-○|
  |     つ |
  |   .___) /
   \  (_/ /
   /\__/
  /  \ロ/
  / /   V ||
 /_/   | ||
⊂ニu\__/L|⊃
  |  / /
  | / /
  | / /
  (ニフフ
 
-->

 

以上がホームページのソースにAAを仕込む方法です。

ブラウザによってはズレるものもありますが、まあ見る人はソースを見るということを知っている人たちですので自分で何とかしてくれるでしょう。

僕もやりました→dot music room.

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応