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

Cocoon

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

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

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

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

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

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

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

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

 

Cocoonの見出し(H2)

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

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

H3の見出し。

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

H4の見出し。

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

H5の見出し。

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

H6の見出し。

 

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

 

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

 

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

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

 

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

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

スキンのその他変更点

  • 目次
  • ブログカード(マウスを乗せると、ふわっと浮きます)
  • SNSボタン(サムライブルーに変更)
  • サイドバーの見出し

 

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

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

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

<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>

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

FIFAワールドカップ 歴代優勝国
開催年 優勝国 準優勝国
2014年 ドイツ アルゼンチン
2010年 スペイン オランダ
2006年 イタリア フランス
2002年 ブラジル ドイツ
タグをエディタにいちいち貼り付ける方法ははっきり言って面倒くさいです。
ボタン一発で面倒なタグ挿入ができるプラグイン(AddQuicktag)の使い方を、次の記事にまとめました。
AddQuicktagを使うと、効率よく記事がかけますよ。
404 NOT FOUND | サムライブルースキン
Cocoonの同梱スキン

 

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

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

 

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

2018FIFAワールドカップ サムライブルーの予選、決勝T日程

  • 6月19日(火) 21:00 vs コロンビア(NHK/NHK BS1)
  • 6月24日(日) 24:00 vs セネガル(日本テレビ系列/NHK BS1)
  • 6月28日(木) 23:00 vs ポーランド(フジテレビ系列/NHK BS1)
  • 7月3日  (火)  3:00  vs ベルギー(NHK)

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

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

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

タイトル

  • ここに文章
  • ここに文章
  • ここに文章

 

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

ただのタイトル付きボックスulタグのかわりにpタグで囲めば、こんな風に自由に書けます。ulタグのかわりにpタグで囲めば、こんな風に自由に書けます。ulタグのかわりにpタグで囲めば、こんな風に自由に書けます。ulタグのかわりに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に読めるという、よく見つけたな~と関心しました。

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

「乾のゴールは3018年からやってきた」…どういうこと? | SPREAD
6月24日に行われたロシアW杯の日本代表対セネガル戦(2-2)で1得点、1アシストを記録するなど活躍した乾貴士

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

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

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

他のCocoon自作スキンも紹介

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

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

 

ただいま作成中のスキン! 作成中Cocoonスキン集^^

コメント

  1. chan より:

    こんにちは。

    サムライスキンすごくいいです!

    二つサイトで使わせて貰っているのですが、一つのサイトで見出し2の文字が表示されなくなってます。

    cocoon1.03にしてからでしょうか?

    現在は、他のスキンに変えたので問題ないです。

    何か考えられることはあるでしょうか?

  2. chan より:

    すいません。

    function.phpいじっていたら、なおりました。

    またまた、新しいスキン期待してます!

    • hiroaki y.hiroaki より:

      サムライブルースキン使ってもらってありがとうございます!

      見出し2の文字が表示されない件は、僕の方でも別サイトで1.0.3にしてから確認しましたが、表示されない現象は発生しませんでした。(スマホでも確認済み)

      確かに、わいひらさんの方でサムライブルースキンの修正はしているようですが、文字が表示されないような修正じゃないようです。

      function.phpで直ったってことで問題解決でいいんですかね。

      ところで、サイト拝見しました。

      ロードバイク好きなんですね。

      しかし、きれいなブログで、カスタマイズのスキルは僕なんかよりはるかに上じゃないでしょうか(笑

      グローバルメニューのアイコンがポイントになっておしゃれだと思います。

  3. chan より:

    こんばんわ。

    サイト見て下さり、ありがとうございます。

    なんとか、格好になっているのは、このスキンのオカゲです

    質問です。

    site-name-textの下のキャッチフレーズの文字の色を白に変えたいです。

    現在は、バックカラーと同色になっていて見えない感じです。

    style.sysのどの部分を変えれば良いでしょうか?

    • hiroaki y.hiroaki より:

      問い合わせありがとうございます。

      キャッチフレーズの色が背景になる件は、スキンのCSSでの指定が漏れてることがわかりました。
      僕もこのサイトにはキャッチフレーズ書いていたのに、さっき表示されていないのに気づきました^^

      Cocoonのどこかのバージョンアップのタイミングで、修正したものをリリースしてもらおうかと思います。

      キャッチフレーズの色は特にCSSを修正する必要はなく、Cocoonの設定で変更できます。

      『Cocoonの設定』→『ヘッダー』→『ヘッダー色(ロゴ部) 』の『ロゴ文字色』で白の色を設定すればいいと思います。

      このサイトの↑のヘッダーは、この方法で赤に変更しました。

      ちなみに、サムライスキンと同じ文字の色にしたいのであれば、#fffを指定してださい。

      『ヘッダー色(ロゴ部) 』で色を変更すると、キャッチフレーズ、ロゴとも色が変更されます。

      以上ですが、指摘ありがとうございました!

      よろしくお願いします。

  4. chan より:

    hiroaki さん、出来ました!

    ところで、健康系ブログって、どこにあるんですか?

    見てみたいです!

    月の報酬が1万円越えなんて、凄いです!

  5. chan より:

    hiroaki さん、やっぱりstyle.sysの修正版が早く欲しいです。

    サムライブルーのスキンの場合には、良いのですが他のヘッダーが白のスキンの場合には、文字が消えてしまいます。

    よろしくお願いします。

  6. hiroaki y.hiroaki より:

    hiroakiです。

    さきほど、メールで修正版CSSを送付しました。

    上書きして使ってください。

    よろしくお願いします。

タイトルとURLをコピーしました