Cocoonをおしゃれにカスタマイズ｜変化自在の無料WordPressテーマ

WordPressでブログを書く人であれば、誰しも一度はテーマ選びで迷ったことがあるのではないでしょうか。

無料テーマか有料テーマかという選択肢もありますが、どちらのテーマもそれぞれ個性があってなかなか決めきれないもの。

私はシンプルイズベストということで、無料で使うことができ、非常にシンプルで高速なテーマと言われていたSimplicityでブログをはじめました。

そこから、Simplicityの後継であるCocoonに乗り換えて、今でも使い続けています。

Cocoonも基本的なコンセプトはSimplicityと同じで、シンプルで高速なテーマなのです。

そのため、様々な設定を自分で変えたり、追加でCSSを使ってデザインをカスタマイズもしやすくなっています。

逆にそれが、初心者にとってはちょっとしたハードルで、ある程度WordPressに慣れてくると、標準でおしゃれなデザインになっているJINやSANGOに移行する人も多いみたいです。

デザインをテーマに任せてしまえば、デザインに費やす時間を記事作成に集中できますからね。

実際私自身もかなり乗り換えるか悩みましたが、いろいろと調べていくうちに、Cocoonでもデザインを自在に変えられることが分かりました。

そして、結果としていろいろ調べながらカスタマイズして、満足のいくデザインにすることができました。

今回はこのブログで取り入れているカスタマイズの内容と導入方法を紹介したいと思います。

本記事のカスタマイズは他のブログで紹介されているものを、このブログのイメージにあわせて集約、変更したものがほとんどです。すべて引用元記載しているので、さらに踏み込んだデザイン変更をしたい場合はぜひ参考にしてください。

Cocoonを使うメリット

デザインの変更について紹介する前に、なぜCocoonが良いのかをお話ししたいと思います。

デザインを追い求めるだけなら他の有料テーマの方が標準でいろいろと搭載されているのになぜCocoonでやろうとするのか…

公式ページに記載されている内容がほぼすべてですが、その中でも特に大事と思える点を紹介します。

シンプルなデザイン

標準ではびっくりするほどシンプルです。

だからこそ、使う人の好みに合わせていくらでも味付けができます。

もちろん、料理が苦手な人にはデメリットにもなるのですが、あくまでも記事が主役という作者の方針で、標準はシンプルな作りにしているそうです。

基本的にはCSSでデザインをカスタマイズしていきますが、それはすなわち

テーマに依存しないデザインなので他のテーマでも応用が効く

ということです。

テーマに依存したデザインを多用していると、そのブログはテーマと一蓮托生になってしまっているとも言えます。

その点、生みの苦しみはあるものの、一度自身で作ったデザインはただのCSSでしかないので、どのブログでも、どのテーマでも使うことができるのです。

PCでもモバイルでも高速

何もいじっていない状態であれば、GoogleのPageSpeed Insightsで、PCでもモバイルでも90点以上が出ます。

この記事で紹介するカスタマイズを加えてもほとんどスピードは落ちませんでした。

個別記事ではアドセンスやアフィリエイト、画像の挿入などによりどうしても重くなってしまうため、デフォルトの速さがそのまま個別記事の速度に影響します。

その点で、高速化を意識して作られているCocoonは、ストレスなくブログを読んでもらうことができます。

アップデートやサポートが充実している

細かな機能追加や不具合修正など、様々なアップデートが毎週のように行われています。

また、質問についても公式ページのフォーラムで受け付けていて、テーマ作者のわいひらさんが、びっくりするくらい丁寧に、素早く回答してくれます。

無料で使える

言わずと知れた無料のテーマですが、上述の通り、機能も拡張性もサポートも充実したテーマです。

散々世話になっている私としては、有料でも喜んで買うレベルです…

カスタマイズの内容

いよいよ本題です。

このブログで実施したカスタマイズについて、ひとつひとつ紹介していきます。

それぞれについて、以下のどちらかのカスタマイズとなります。

指定した箇所にだけ適用されるCSS
ブログ全体に適用されるCSS

①の場合は、AddQuickTagというプラグインの仕様を前提としていますので、以下の記事も参考にしてもらえればと思います。

AddQuickTagの使い方｜使いたいデザインを簡単に選択

以前の記事でCocoonのカスタマイズについてまとめたのですが、思ったより読んでいただいていて、質問もいくつかもらっています。この中でも多用しているのですが、CSSでデザインを変えたパーツを使う場合 HTML上でデザインを...

HTMLをAddQuickTagに、CSSをstyle.cssに追記することで使えるようになります。

また、①のカスタマイズはCocoon以外のテーマでも利用できるので、将来別のテーマを使うことになっても流用が可能です。

なお、今回使用するCSSですが、管理画面のサイドバーから「外観→テーマエディター」と進み、そこにあるstyle.cssに追記してあげればOKです。

↓

グローバルメニュー

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	https://s41t0h.jp/cocoon-menu-material-customize/

変更前
変更後

まずはグローバルメニューのカスタマイズです。

影がつくことで立体的になり、表示中のアイテムやマウスが重なったアイテムの字が太字になって黄色い下線が浮き出てきます。

CSS

#header-container #navi a {
  font-size: 0.8em;
}
nav#navi, .menu-header .sub-menu {
  font-weight: bold;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}
.menu-header .item-label {
  color: #b5b5b5 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
  color: #333 !important;
  border-bottom: 3px solid #FDD835;
  transition: all .2s ease;
}
.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
  border-bottom: none;
}
.menu-header .current-menu-item&gt;a .item-label,
.menu-header .current-post-item&gt;a .item-label,
.menu-header .current-menu-ancestor&gt;a .item-label,
.menu-header .current-post-ancestor&gt;a .item-label,
.menu-header .item-label:hover{
  color: #333 !important;
  transition: all .2s ease;
}

記事一覧

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	https://s41t0h.jp/cocoon-css-customize-kiji-material-design/

変更前
変更後

ちょっと分かり辛いかもしれませんが、記事ひとつひとつのカードが分かれていて、マウスを重ねると浮かび上がってきます。

実際にトップページから試してもらった方が分かりやすいですね…

CSS

.home main, .archive main, .blog main{
  background-color: transparent;
  margin-top: 0;
  padding-top: 0;
}
.category-content{
  background-color: white;
  padding: 1em 1em 0.2em;
  margin-bottom: 1em;
}
.entry-card-wrap{
  transition: all .3s ease;
  margin-bottom: 1em!important;
  background-color: white;
  border-radius: 4px;
}
.entry-card-wrap:hover{
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
  transform: translateY(-5px);
  background-color: white;
}

ページネーション

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	https://s41t0h.jp/cocoon-pagination-customize/

変更前
変更後

これは単純に見た目を変えただけですが、見やすくすっきりしたページネーションになりました。

CSS

.pagination-next, .next, .prev, .pager-prev-next{display: none;}
.pager-numbers a {text-decoration: none;}
.page-numbers{
  border: none !important;
  border-radius: 50%;
  font-family: sans-serif;
  font-size: 80%;
  color: #666 !important;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  transition: all .1s ease;
  background-color: #ffffff;
}
.pagination a.page-numbers:hover,.pager-numbers a:hover .page-numbers{
  background-color: #e4ab3d;
  color: #fff !important;
}
.pagination .current, .pager-links .current{
  background-color: #ccc;
  color: #fff;
}

サイドバー

検索ボックス、アーカイブ、カテゴリー

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	https://plu-plu.net/cocoon-sidecar/ https://s41t0h.jp/cocoon-search-bar/

変更前
変更後

検索ボックスをまるくしています。

アーカイブについては全体的にスマートにしながらアイコンを追加し、以下の画像のように、マウスを重ねた時にちょっとだけアニメーションを加えています。

また、カテゴリもアーカイブと同様、全体的にスマートにしながらアイコンを追加し、以下の画像のように、マウスを重ねた時にちょっとだけアニメーションを加えています。

CSS

/* 検索ボックス */
.search-box{
  margin: 1em;
}
.search-edit{
  height: 40px;
  border-radius: 40px;
}
.search-submit{
  line-height: 0;
  top: 0;
  bottom: 0;
}
.search-edit:focus{
  outline: none;
  border-color: #e4ab3d;
}

/* カテゴリー等 */
.sidebar{
  /*background:transparent;*/
}
.widget-sidebar h3{ /* サイドウィジェットタイトル */
  background:transparent;
  font-size: .95em; /* 文字サイズ */
  color: #000000;
  border-bottom: 2px solid #e4ab3d; /* 下線の太さ・色 */
  padding: 5px 10px 0;
  margin-bottom: 0;
}
.widget_author_box h3:before{ /* プロフィールタイトルアイコン */
  font-family: fontawesome;
  content: "f040"; /* アイコン種類 */
  color: #e4ab3d; /* アイコン色 */
  font-weight:normal;
  margin-right: 6px; /* アイコンとタイトルの距離 */
}
.widget_categories h3:before{ /* カテゴリータイトルアイコン */
  font-family: fontawesome;
  content: "f0ca"; /* アイコン種類 */
  color: #e4ab3d;/*アイコン色*/
  font-weight:normal;
  margin-right: 6px; /* アイコンとタイトルの距離 */
}
.widget_archive h3:before{ /* アーカイブタイトルアイコン */
  font-family: fontawesome;
  content: "f274"; /* アイコン種類 */
  color: #e4ab3d; /* アイコン色 */
  font-weight:normal;
  margin-right: 6px; /* アイコンとタイトルの距離 */
}
.widget_categories ul li,
.widget_archive ul li{ /* カテゴリ・アーカイブ下線 */
  padding-left: 10px;
  border-bottom: 1px dotted  rgba(125, 125, 125, 0.2); /* 下線の種類 */
}
.widget_categories ul li a,
.widget_archive ul li a{ /* 親カテゴリ・アーカイブの文字サイズ */
  font-size: .95rem;
}
.widget_categories ul li a:before,
.widget_archive ul li a:before{ /* 親カテゴリ・アーカイブアイコン */
  font-family: fontawesome;
  content: "f138"; /* アイコン種類 */
  color: #e4ab3d; /* アイコン色 */
  margin-right: 6px; /* アイコンと文字の距離 */
}
.widget_categories ul .children li a:before{ /* 子カテゴリアイコン */
  font-family: fontawesome;
  content: "f105"; /* アイコン種類 */
  color: #e4ab3d; /* アイコン色 */
  font-weight:normal;
  margin-right: 6px; /* アイコンと文字の距離 */
}
.widget_categories ul .children li{
  border-bottom:none;
}	
.widget_categories ul .children li a{ /* 子カテゴリ */
  padding: 3px 10px;
  font-size: .85rem; /* 文字サイズ */
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover{ /* カテゴリ・アーカイブhover時 */
  background:transparent;
  color: #e4ab3d; /* hover時の文字色 */
  font-weight: bold;
  margin-left: 5px; /* hover時動く幅 */
}
.widget_categories ul li a .post-count,
.widget_archive ul li a  .post-count{ /* カテゴリ・アーカイブ記事数 */
  border: 1px solid rgba(221, 221, 221, 0.867); /* 囲線 */
  border-radius: 5px;
  font-size: .8em; /* 数字サイズ */
  padding: 1px 10px; /* 囲いの大きさ */
}
.widget_categories ul li a:hover .post-count,
.widget_archive ul li a:hover  .post-count{ /* カテゴリ・アーカイブ記事数hover時 */
  border-color: #e4ab3d; /* 囲線色 */
  background: #e4ab3d; /* 背景色 */
  color: #fff; /* 文字色 */
  transition: .4s; /* 変化スピード */
}

プロフィール欄

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	https://web-ashibi.net/archives/2625

変更前
変更後

プロフィールの表示自体はCocoonの標準機能を使用していて、それをカスタマイズしています。

Cocoonデフォルトのウィジェット機能まとめ

Cocoonのデフォルト状態で利用できるウィジェット機能を見やすくまとめてみました。

背景に画像をつけてプロフィールページへのリンクをボタンにし、SNSボタンのデザインを変えています。

なお、プロフィールの文章内でHTMLを扱うためには、function.phpに以下のコードを追記する必要があります。

こちらについてもstyle.cssと同様に、管理画面のサイドバーから「外観→テーマエディター」と進み、そこにあるfunction.phpに追記してあげればOKです。

remove_filter('pre_user_description', 'wp_filter_kses');

※必ずfunction.phpのバックアップを取ってから追記してください

背景画像については、以下のCSS中の「https://sample.com/picture.png」を背景にしたい画像にして、その下の「padding-top: calc(100%*縦幅/横幅);」の部分をその画像の縦横の画素数に置き換えてください。

CSS

.widget_author_box h3:before{ /* プロフィールタイトルアイコン */
  font-family: fontawesome;
  content: "f040"; /* アイコン種類 */
  color: #e4ab3d; /* アイコン色 */
  font-weight:normal;
  margin-right: 6px; /* アイコンとタイトルの距離 */
}
.nwa .author-box {
    text-align: center;
    max-width: 100%;
    border: none;
}
#sidebar .author-box {
    border: none;
    border-radius: 4px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8%;
}
#sidebar .author-thumb {
    float: none;
    width: 100%;
    margin: 9px auto 0;
    background: url(https://sample.com/picture.png) center no-repeat;
    background-size: cover;
    height: 0;
    padding-top: calc(100%*縦幅/横幅);
    position: relative;
}
#sidebar .author-thumb img{
    border: 3px solid #fff;
    width: 30%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25%;
}
#sidebar .author-content {
  margin-top: 16%;
  font-size: 0.9em;
}
.author-name {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 10px;
}
.author-box .author-name a {
  text-decoration: none;
  color: #333;
}
.author-box p {
  margin-top: 0.3em;
  line-height: 1.6;
}
.author-box p a {
  text-decoration: none;
  color: #008cee;
}
.author-box p a:hover {
  text-decoration: underline;
  color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  margin-bottom: 4px;
  margin-right: 8px;
  background: none;
  color: #fff;
}
.author-box a.follow-button span {
  line-height: 40px;
}
.author-box a.follow-button span::before {
  font-size: 22px;
}
.author-box .icon-twitter-logo::before {
  font-family: fontawesome;
  content: "f099"
}
.author-box .icon-facebook-logo::before {
  font-family: fontawesome;
  content: "f09a";
}
.author-box .icon-instagram-new::before {
  font-family: fontawesome;
  content: "f16d";
}
.author-box .icon-hatebu-logo::before {
  font-family: Verdana;
  content: 'B!';
  font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
  font-family: fontawesome;
  content: "f0d5";
}
.author-box .icon-youtube-logo::before {
  font-family: fontawesome;
  content: "f167";
}
.author-box .icon-pinterest-logo::before {
  font-family: fontawesome;
  content: "f231";
}
.author-box .icon-amazon-logo::before {
  font-family: fontawesome;
  content: "f270";
}
.author-box .icon-github-logo::before {
  font-family: fontawesome;
  content: "f09b";
}
.author-box .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #1da1f2 !important; }
.author-box .facebook-button { background-color: #3b5998 !important; }
.author-box .hatebu-button { background-color: #2c6ebd !important; }
.author-box .google-plus-button { background-color: #dd4b39 !important; }
.author-box .instagram-button { background: #e1306c !important; }
.author-box .youtube-button { background-color: #ef1515 !important; }
.author-box .flickr-button { background-color: #0063dc !important; }
.author-box .pinterest-button { background-color: #bd081c !important; }
.author-box .line-button { background-color: #00c300 !important; }
.author-box .amazon-button { background-color: #ff9900 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }
.author-box .github-button { background-color: #333 !important; }
.author-box .feedly-button { background-color: #2bb24c !important; }
.author-box .rss-button { background-color: #f26522 !important; }
.profilepage-link {
    text-align: center;
    margin-bottom: 20px;
}
#main .profilepage-link {
    text-align: left;
}
.profilepage-link a {
    display: inline-block;
    font-size: .9em;
    text-decoration: none;
    color: #fff; /*ボタンの文字色*/
    background: #e4ab3d; /*ボタンの背景色*/
    font-weight: bold;
    padding: .5em 2em;
    border-radius: 4px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.2);
    transition: .3s ease-in-out;
}
.profilepage-link a:hover {
  color: #fff;
  box-shadow: 0 10px 12px -3px rgba(0,0,0,.24);
}
@media screen and (max-width: 480px) {
  #main .profilepage-link {
    text-align: center;
  }
  .profilepage-link a {
    font-size: 14px;
  }
}

記事表示時のアニメーション

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	https://plu-plu.net/cocoon-contentfdin/

記事を表示する時に、画面の下側からフェードインしてくるアニメーションを追加しています。

これは実物を見た方が早いと思います。

CSS

.main,.sidebar{
  animation-name: fadein;
  animation-duration: 2s;
}
@keyframes fadein{
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

目次欄

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	-

変更前
変更後

これは単純にアイコンを追加しただけです。

もう少し工夫してみようと思います。

CSS

.toc-title:before{
  font-family: fontawesome;
  content: 'f0f6';
  margin-right: .5em;
}

ブログカード

カスタマイズ対象	ブログ全体
対象テーマ	Cocoon
参考URL	https://s41t0h.jp/cocoon-blogcard/

変更前
変更後

「あわせて読みたい」と「続きを読む」を追加しています。

また、カーソルを重ねると、画像がズームして目を引くようになっています。

↓実例

テーマをCocoonに変更しました

タイトルの通りですが、テーマをCocoonに変更しました。 Simplicityの製作者さんが制作されているWordPress用のテーマで、Simplicityの後継にあたります。 Simplicity同様にフリーで使え、さらに...

注意点ですが、LazyLoadが有効になっていると、カーソルを合わせるまで画像が表示されない時があります。そのため、Cocoon設定の高速化から、ブログカードの画像をLazyLoadの対象外として挙げる必要があります。

↓

上記の画像のように「blogcard-thumb-image」を追加してあげます。

余談ですが、その下の「site-logo-image」はサイトのロゴは遅延させずに真っ先に読み込ませたいので同様に追記しています。

後は以下のCSSを追加するだけです。

CSS

.blogcard {
  padding: 1rem;
  color: #666;
  position: relative;
  border-color: #68d6cb !important; /* 枠線の色を変更 */
}

a.blogcard-wrap:hover{
  opacity: 0.8;
  background-color: #fff;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
  transform: scale(1.1);
  transition: .3s;
}

.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
}

.blogcard-title{
	margin-bottom: .5rem;
}

.blogcard-snippet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}

@media screen and (max-width: 480px){
  .blogcard-thumbnail{
    width: 40%;
  }
  .blogcard-snippet{
    display: none;
  }
}

.internal-blogcard-footer{
  display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

.internal-blogcard::before{
content: 'あわせて読みたい'; /* タイトルの文言 */
position: absolute;
  top: -.8rem;
  left: auto;
  font-size: 50%;
  background-color: #68d6cb; /* タイトルの背景色 */
  padding: .6em 1em;
  font-weight: bold;
  color: #fff;  /* タイトルの文字色 */
  border-radius: 2px;
}

.internal-blogcard::after{
  content: '続きを読む 0bb'; /* 内部リンク右下枠の文言 */
  position: absolute;
  bottom: .5rem;
  right: 1rem;
  font-size: 70%;
  background-color: #ffd242; /* 内部リンク右下枠の背景色 */
  padding: .4em 3em;
  font-weight: bold;
  color: #fff; /* 内部リンク右下枠の文字色 */
  border-radius: 2px;
}

箇条書き

カスタマイズ対象	個別パーツ
対象テーマ	なんでも
参考URL	https://ponhiro.com/cocoon-list-design/

変更前
変更後

とりあえず番号ありを1パターン、番号なしを2パターン用意しました。

ブログのキーカラーにあわせたアイコンを使用しています。

HTML（3パターンまとめてます）

<ul class="ul-icon-01">
 	<li>あああ</li>
 	<li>いいい</li>
</ul>

<ul class="ul-icon-02">
 	<li>あああ</li>
 	<li>いいい</li>
</ul>

<ol class="ol-circled">
 	<li>あああ</li>
 	<li>いいい</li>
</ol>

CSS

.ul-icon-01 {
  list-style: none;
  margin-bottom: 1.5em;
}
.ul-icon-01 li {
  position: relative;
  padding-left: 0.9em;
  margin: 0.8em 0;
}
.ul-icon-01 > li:before {
  content: "f00c";
  font-family: fontawesome;
  color: #ffffff;
  background: #e4ab3d;
  border-radius: 50%;
  text-align: center;
  margin-right: 0.4em;
  width: 1.3em;
  height: 1.3em;
  position: absolute;
  left: -15px;
  top: 3px;
  line-height: 1.4;
}
.ul-icon-01 li ul {
  margin: 0 0.4em 0 -1.2em;
}

.ul-icon-02{
  list-style: none;
}
.ul-icon-02 li { 
  position: relative;
  margin: 0.5em 0 !important;
  max-width: 500px;
  padding: 0 0 0.5em 1.4em;
}
.ul-icon-02 li:last-child{ 
  border:none;
}
.ul-icon-02 li:before {
  font-family: fontawesome;
  content: "f27a";
  color:  #e4ab3d;
  position: absolute;
  left: 0;
}

.ol-circled {
  counter-reset: li;
}
.ol-circled > li {
  list-style: none;
  position: relative;
  padding-left: 2.5em;
}
.ol-circled > li:before {
  counter-increment: li;
  content: counter(li);
  margin-right: 1em;
  background: #e4ab3d;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  width: 1.3em;
  height: 1.3em;
  position: absolute;
  left: 0em;
  top: 2px;
  line-height: 1.4;
}

見出し

カスタマイズ対象	ブログ全体
対象テーマ	なんでも
参考URL	-

変更前
変更後

h2の見出しをステッチ風にしています。

CSS

.article h2{
  padding: 0.6em;
  background: #e4ab3d;
  box-shadow: 0px 0px 0px 4px #e4ab3d;
  border: dashed 2px #ffffff;
}

テープの見出し付きボックス

カスタマイズ対象	個別パーツ
対象テーマ	なんでも
参考URL	https://ponhiro.com/cocoon-box-design/

テープの見出し付きのボックスを用意しました。

タイトル

内容。

HTML（3色分まとめて）

<div class="box-tape-blue">
<div class="box-title">タイトル</div>
内容。
</div>

<div class="box-tape-green">
<div class="box-title">タイトル</div>
内容。
</div>

<div class="box-tape-pink">
<div class="box-title">タイトル</div>
内容。
</div>

CSS

.box-tape-green {
  position:relative;
  padding: 2em 2em 1.7em;
  background-color: #eef8f3;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
}
.box-tape-green .box-title {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 0.2em 2em;
  color: #58be89;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(255,255,255,.1);
  border-left: 2px dotted rgba(0,0,0,.1);
  border-right: 2px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}

.box-tape-pink {
  position:relative;
  padding: 2em 2em 1.7em;
  background-color: #fdf1f4;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
}
.box-tape-pink .box-title {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 0.2em 2em;
  color: #f27398;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(255,255,255,.1);
  border-left: 2px dotted rgba(0,0,0,.1);
  border-right: 2px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}

.box-tape-blue {
  position:relative;
  padding: 2em 2em 1.7em;
  background-color: #e6f1f9;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
  border-radius: 4px;
}
.box-tape-blue .box-title {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 0.2em 2em;
  color: #0e7ac4;
  font-weight: bold;
  font-size: 18px;
  background-color: rgba(255,255,255,.1);
  border-left: 2px dotted rgba(0,0,0,.1);
  border-right: 2px dotted rgba(0,0,0,.1);
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  transform: rotate(-3deg);
}

光るボタン

カスタマイズ対象	ブログ全体
対象テーマ	なんでも
参考URL	https://azu3.com/shiny-button/

参考にしたページ

AFFINGER5で採用されている光るボタンをCocoonでも使えるようにしてみました。

HTML（4色分まとめてます）

<div class="blue-shiny">
<a href="https://azu3.com/shiny-button/" target="_blank">参考にしたページ</a>
</div>

<div class="red-shiny">
<a href="https://azu3.com/shiny-button/" target="_blank">参考にしたページ</a>
</div>

<div class="orange-shiny">
<a href="https://azu3.com/shiny-button/" target="_blank">参考にしたページ</a>
</div>

<div class="green-shiny">
<a href="https://azu3.com/shiny-button/" target="_blank">参考にしたページ</a>
</div>

CSS

@keyframes shiny {
  0% { left: -30%; }
  20% { left: 120%; }
  100% { left: 120%; }
}
@-webkit-keyframes shiny {
  0% { left: -30%; }
  20% { left: 120%; }
  100% { left: 120%; }
}
@-moz-keyframes shiny {
  0% { left: -30%; }
  20% { left: 120%; }
  100% { left: 120%;}
}

.red-shiny a {
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  font-weight: bold ;
  border-bottom: solid 5px #f44744 ;
  border-radius: 5px;
  background-color: #F65E5B ;
  color: #ffffff !important;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  transition: .25s linear;
  -webkit-transition: .25s linear;
  -moz-transition: .25s linear;
}
.red-shiny {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}
.red-shiny a:hover {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.red-shiny a:before {
  display: block;
  position: absolute;
  z-index: -1;
  left: -30%;
  top: -50%;
  content: "";
  width: 30px;
  height: 100px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
  background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
  animation: shiny 2s infinite linear;
  -webkit-animation: shiny 2s infinite linear;
  -moz-animation: shiny 2s infinite linear;
}

.blue-shiny a {
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  font-weight: bold ;
  border-bottom: solid 5px #558fd1 ;
  border-radius: 5px;
  background-color: #6c9bd2 ;
  color: #ffffff !important;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  transition: .25s linear;
  -webkit-transition: .25s linear;
  -moz-transition: .25s linear;
}
.blue-shiny {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}
.blue-shiny a:hover {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.blue-shiny a:before {
  display: block;
  position: absolute;
  z-index: -1;
  left: -30%;
  top: -50%;
  content: "";
  width: 30px;
  height: 100px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
  background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
  animation: shiny 2s infinite linear;
  -webkit-animation: shiny 2s infinite linear;
  -moz-animation: shiny 2s infinite linear;
}

.green-shiny a {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
	font-weight: bold ;
	border-bottom: solid 5px #00CC99 ;
border-radius: 5px;
    background-color: #66CC99 ;
    color: #ffffff !important;
    padding: 12px 0;
    text-align: center;
    text-decoration: none;
    transition: .25s linear;
    -webkit-transition: .25s linear;
    -moz-transition: .25s linear;
}
.green-shiny {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.green-shiny a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.green-shiny a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
 background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
 animation: shiny 2s infinite linear;
 -webkit-animation: shiny 2s infinite linear;
 -moz-animation: shiny 2s infinite linear;
}

.orange-shiny a {
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  font-weight: bold ;
  border-bottom: solid 5px #FF9922 ;
  border-radius: 5px;
  background-color: #FF9966 ;
  color: #ffffff !important;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  transition: .25s linear;
  -webkit-transition: .25s linear;
  -moz-transition: .25s linear;
}
.orange-shiny {
  display: block;
  width: 100%;
  margin-bottom: 1em;
}
.orange-shiny a:hover {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}
.orange-shiny a:before {
  display: block;
  position: absolute;
  z-index: -1;
  left: -30%;
  top: -50%;
  content: "";
  width: 30px;
  height: 100px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
  background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
  animation: shiny 2s infinite linear;
  -webkit-animation: shiny 2s infinite linear;
  -moz-animation: shiny 2s infinite linear;
}