JavaScriptでconsoleにさらにカッコよくサイト名を出す！

# サイト名をconsoleに、さらにカッコよくAAを出したい！

cookpadのサイトにアクセスし、consoleを確認すると下の画像のように、注意書きが表示されるのをご存知でしょうか。
http://cookpad.com/

![スクリーンショット 2016-01-27 10.51.39.png](https://qiita-image-store.s3.amazonaws.com/0/83231/4b9b4c18-79bc-e262-4ae6-b99c3bbc677e.png)

## asciify

以前、[「Javascriptでconsoleにサイト名をAAで出す！」](http://qiita.com/kenzooooo/items/9bc3520215a7d9823608)という記事を書きましたが、今回はその続編です。
上記記事をお読みになってからこの記事を見ていただけると幸いです。

## consoleにスタイルを適用

javascriptのメソッドであるconsole.logにはstyleを適用することができます。

```js
console.log('test %ctest2', 'color: red; font-size: 14px');
```

上記コードの実行結果が下の画像です

![スクリーンショット 2016-01-27 11.06.16.png](https://qiita-image-store.s3.amazonaws.com/0/83231/1dc39c74-617a-84e2-ee15-9e85e1d64985.png)

%cを記述した箇所以降にstyleが適用されています。(１つ目のtestはstyleが適用されない)

## サンプルコード
[「Javascriptでconsoleにサイト名をAAで出す！」](http://qiita.com/kenzooooo/items/9bc3520215a7d9823608)で作成したサンプルに対してstyleを適用します。

```html:test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>

console.log("\n" +
"%c __  __     %c        %c ___      %c ___      %c              %c __      __    %c        %c       %c ___      %c  __ \n" +
"%c/\\ \\/\\ \\    %c        %c/\\_ \\     %c/\\_ \\     %c              %c/\\ \\  __/\\ \\   %c        %c       %c/\\_ \\     %c /\\ \\ \n" +
"%c\\ \\ \\_\\ \\   %c   __   %c\\//\\ \\    %c\\//\\ \\    %c  ___         %c\\ \\ \\/\\ \\ \\ \\  %c  ___   %c _ __  %c\\//\\ \\    %c \\_\\ \\ \n" +
"%c \\ \\  _  \\  %c /'__`\\ %c  \\ \\ \\   %c  \\ \\ \\   %c / __`\\       %c \\ \\ \\ \\ \\ \\ \\ %c / __`\\ %c/\\`'__\\%c  \\ \\ \\   %c /'_` \\ \n" +
"%c  \\ \\ \\ \\ \\ %c/\\  __/ %c   \\_\\ \\_ %c   \\_\\ \\_ %c/\\ \\L\\ \\      %c  \\ \\ \\_/ \\_\\ \\%c/\\ \\L\\ \\%c\\ \\ \\/ %c   \\_\\ \\_ %c/\\ \\L\\ \\ \n" +
"%c   \\ \\_\\ \\_\\%c\\ \\____\\%c   /\\____\\%c   /\\____\\%c\\ \\____/      %c   \\ `\\___x___/%c\\ \\____/%c \\ \\_\\ %c   /\\____\\%c\\ \\___,_\\ \n" +
"%c    \\/_/\\/_/%c \\/____/%c   \\/____/%c   \\/____/%c \\/___/       %c    '\\/__//__/ %c \\/___/ %c  \\/_/ %c   \\/____/%c \\/__,_ / \n" +
" \n" +
" %cHello World へようこそ！\n",
"font-size: 16px; color: #7f00ff;",
"font-size: 16px; color: #bb00ff;",
"font-size: 16px; color: #f700ff;",
"font-size: 16px; color: #ff00cb;",
"font-size: 16px; color: #ff008f;",
"font-size: 16px; color: #ff0017;",
"font-size: 16px; color: #ff2300;",
"font-size: 16px; color: #ff5f00;",
"font-size: 16px; color: #ff9b00;",
"font-size: 16px; color: #ffd600;",

"font-size: 16px; color: #7f00ff;",
"font-size: 16px; color: #bb00ff;",
"font-size: 16px; color: #f700ff;",
"font-size: 16px; color: #ff00cb;",
"font-size: 16px; color: #ff008f;",
"font-size: 16px; color: #ff0017;",
"font-size: 16px; color: #ff2300;",
"font-size: 16px; color: #ff5f00;",
"font-size: 16px; color: #ff9b00;",
"font-size: 16px; color: #ffd600;",

"font-size: 16px; color: #7f00ff;",
"font-size: 16px; color: #bb00ff;",
"font-size: 16px; color: #f700ff;",
"font-size: 16px; color: #ff00cb;",
"font-size: 16px; color: #ff008f;",
"font-size: 16px; color: #ff0017;",
"font-size: 16px; color: #ff2300;",
"font-size: 16px; color: #ff5f00;",
"font-size: 16px; color: #ff9b00;",
"font-size: 16px; color: #ffd600;",

"font-size: 16px; color: #7f00ff;",
"font-size: 16px; color: #bb00ff;",
"font-size: 16px; color: #f700ff;",
"font-size: 16px; color: #ff00cb;",
"font-size: 16px; color: #ff008f;",
"font-size: 16px; color: #ff0017;",
"font-size: 16px; color: #ff2300;",
"font-size: 16px; color: #ff5f00;",
"font-size: 16px; color: #ff9b00;",
"font-size: 16px; color: #ffd600;",

"font-size: 16px; color: #7f00ff;",
"font-size: 16px; color: #bb00ff;",
"font-size: 16px; color: #f700ff;",
"font-size: 16px; color: #ff00cb;",
"font-size: 16px; color: #ff008f;",
"font-size: 16px; color: #ff0017;",
"font-size: 16px; color: #ff2300;",
"font-size: 16px; color: #ff5f00;",
"font-size: 16px; color: #ff9b00;",
"font-size: 16px; color: #ffd600;",

"font-size: 16px; color: #7f00ff;",
"font-size: 16px; color: #bb00ff;",
"font-size: 16px; color: #f700ff;",
"font-size: 16px; color: #ff00cb;",
"font-size: 16px; color: #ff008f;",
"font-size: 16px; color: #ff0017;",
"font-size: 16px; color: #ff2300;",
"font-size: 16px; color: #ff5f00;",
"font-size: 16px; color: #ff9b00;",
"font-size: 16px; color: #ffd600;",

"font-size: 16px; color: #7f00ff;",
"font-size: 16px; color: #bb00ff;",
"font-size: 16px; color: #f700ff;",
"font-size: 16px; color: #ff00cb;",
"font-size: 16px; color: #ff008f;",
"font-size: 16px; color: #ff0017;",
"font-size: 16px; color: #ff2300;",
"font-size: 16px; color: #ff5f00;",
"font-size: 16px; color: #ff9b00;",
"font-size: 16px; color: #ffd600;",

"font-size: 16px; color: red;"
)

</script>
</head>
<body>
  <h1>テスト</h1>
</body>
</html>
```

## 結果

結果はこうなります。

![スクリーンショット 2016-01-27 11.55.53.png](https://qiita-image-store.s3.amazonaws.com/0/83231/36e65073-0a98-39b1-a2a5-e7dd99488d4b.png)