2018FIFAワールドカップ Cocoonの日本代表サムライブルースキン

いよいよ、2018年のFIFAワールドカップが始まりました。

各国のトッププレイヤーの試合が楽しめるサッカー好きには待ちに待ったイベント。

はっきりいって、オリンピックなんかよりワールドカップの方が盛り上がるようです。

大会直前での監督解任など、なにかと暗い話題しかない日本代表ですが、それはそれとして、せめて1勝でもできるように応援していきたいと思います。

ということで、ワールドカップの時だけにわかサッカーファンになる僕も、日本代表を盛り上げるためにCocoonのスキンを作ってみました。

スキンはシンプルで控えめなのが好きですが、サムライブルーのカラーをふんだんに使ったちょっと派手めのスキンです。

サムライブルースキンのダウンロード

下のボタンより、スキンをダウンロードできます。

 

Cocoonの見出し（H2）

サムライブルーを基調に、ストライプの白と、セカンドユニホームのグレーがかった白を組み合わせてみました。

サムライブルースキンのCocoon見出し（H3）

H3の見出し。

サムライブルースキンのCocoon見出し（H4）

H4の見出し。

サムライブルースキンのCocoon見出し（H5）

H5の見出し。

サムライブルースキンのCocoon見出し（H6）

H6の見出し。

 

サムライブルースキンのページネーション

 

ページネーションは、ボールらしきものがぶつかるアニメーションにしてみました。

 

サムライブルースキンのヘッダー背景画像とサイト背景画像

ヘッダー背景画像（左）はブルーを基調にストライプを重ねた画像で、サイト全体の背景画像（右）はユニホーム（シャツの前面）をイメージしています。

 

サムライブルースキンのその他変更点

他にも、次のものを変更しています。

 

サムライブルースキンのテーブル

テーブルのヘッダーはサムライブルーのグラデーション、ボディは白とグレーにしました。

使い方は、次のタグを『ビジュアルエディタ』ではなく『テキストエディタ』に貼り付けるだけ。
『表のタイトル』、『ヘッダー』、『項目』の部分を書き換えてください。

<table><caption style="text-align: center;">表のタイトル</caption>
<thead>
<tr>
<th>ヘッダー</th>
<th>ヘッダー</th>
</tr>
</thead>
<tbody>
<tr>
<td>項目</td>
<td>項目</td>
</tr>
<tr>
<td>項目</td>
<td>項目</td>
</tr>
</tbody>
</table>

↓こんな感じのテーブルになります。

404 NOT FOUND | サムライブルースキン

Cocoonの同梱スキン

zvalinf.info

 

サムライブルースキンのタイトル付きリストボックス

箇条書きの場合には、標準のリスト（olやulタグ）だと寂しいので、タイトルが付けられてボックスで囲まれたリストボックスを作ってみました。

 

↓こんな感じで、タイトルがついたボックスの中にリストを書くことができます。

次のタグを『ビジュアルエディタ』ではなく『テキストエディタ』に貼り付けてください。
※『タイトル』と『ここに文章』の部分を書き換え。

<div class="boxwt-red">
  <span class="boxwt-title">タイトル</span>
  <ul>
    <li>ここに文章</li>
    <li>ここに文章</li>
    <li>ここに文章</li>
  </ul>
</div>

↓こんな風に表示されます。

 

ボックスの中をリストにしたくなければulタグ（<ul>～</ul>）の代わりにpタグ（<p>～</p>）を使えば自由に書けます。

タグはこちら。

<div class="boxwt-red">
  <span class="boxwt-title">タイトル</span>
    <p>ここに文章</p>
</div>

 

タイトル付きリストボックスの色は赤、緑、青、茶、紫を用意しました。

ただの色違いなので、divタグのクラス名（class=の部分）を色にあわせて変更するだけ。

<div class="boxwt-green">
  <span class="boxwt-title">タイトル</span>
  <ul>
    <li>ここに文章</li>
    <li>ここに文章</li>
    <li>ここに文章</li>
  </ul>
</div>

 

<div class="boxwt-blue">
  <span class="boxwt-title">タイトル</span>
  <ul>
    <li>ここに文章</li>
    <li>ここに文章</li>
    <li>ここに文章</li>
  </ul>
</div>

 

<div class="boxwt-brown">
  <span class="boxwt-title">タイトル</span>
  <ul>
    <li>ここに文章</li>
    <li>ここに文章</li>
    <li>ここに文章</li>
  </ul>
</div>

 

<div class="boxwt-purple">
  <span class="boxwt-title">タイトル</span>
  <ul>
    <li>ここに文章</li>
    <li>ここに文章</li>
    <li>ここに文章</li>
  </ul>
</div>

以上、サムライブルースキン（勝色モデル）の紹介でした。

スキンについての質問などありましたら、グローバルメニューの『お問い合わせ』からよろしくお願いします。

 

がんばれ ニッポン！

コロンビア戦のように何があるかわからないので、次のベルギー戦は総力戦で戦って欲しいですね。

サイトキーカラーの設定についての注意事項

スキンを適用した後にCocoonの設定からサイトキーカラーを変更すると、サイドバーの見出しが影響をうけるという注意事項があります。（サイトキーカラーの背景にスキンのボーダーが重なる）

次の記事で詳しいことを書いているので、参考にしてください。

いい試合を見せてくれてありがとう！

ベルギー戦、すごかったですね。

まさかベルギー相手に途中までリードするとは思ってなかったです。

しかも、2-0。

原口選手のシュートも角度のないところから、ズバッと入ったし、もっとすごいのが乾選手！

ペナルティエリア外からの無回転シュートが、芸樹的で感動しました。

確かセネガル戦でもかなりいいシュートで点とってましたよね。

正直、乾選手の名前はなんとなく知っている程度だったんですが、こんなすごいシュート打てる選手が日本にもいたのにはびっくりです。

 

ベルギー戦は最後ちょっと残念な終わり方でしたが、日本のサッカーの試合でこんなに楽しく観戦できたのははじめてです。

負けたのは悔しいですが、それよりも『いい試合を観せてもらった』という気持ちの方が大きくて、なんか妙に清々しい気持ちになりました。

素人目には、このまま西野さんが監督してくれた方がいいような気がしますが、やっぱり外国の人の方がいいんでしょうか。

ともかく、日本代表の皆さんありがとうございました！

 

最後に、ちょっとおもしろい話題を。

乾選手のユニホームの名前が上下を反対にしてもinuiに読めるという、よく見つけたな～と関心しました。

We’re all living in 2018, while Takashi Inui is living in 3018.#WorldCup #JPN #SEN #JPNSEN pic.twitter.com/QJXq0tja39

— 🇺🇾 vs 🇫🇷 Football Tweet (@Football__Tweet) 2018年6月24日

詳しくは、こちらの記事を。

「乾のゴールは3018年からやってきた」…どういうこと？ | SPREAD

6月24日に行われたロシアW杯の日本代表対セネガル戦（2－2）で1得点、1アシストを記録するなど活躍した乾貴士

spread-sports.jp

サイトキーカラーの設定についての注意事項

スキンを適用した後にCocoonの設定からサイトキーカラーを変更すると、サイドバーの見出しが影響をうけるという注意事項があります。（サイトキーカラーの背景にスキンのボーダーが重なる）

次の記事で詳しいことを書いているので、参考にしてください。

他のCocoon自作スキンも紹介

シンプルなスキンも作っているので、派手じゃないスキンが好きな人はどんなスキンか参考にしてください。（見出しのH2、ブログカードのホバー以外は地味です）

ミックスシリーズのスキン。ベースとなる色も緑、青、赤の3色用意しています。

 

ただいま作成中のスキン！　作成中Cocoonスキン集＾＾