このブログのアイキャッチ周りを少し改造してみました。
今回は、アイキャッチの右下に投稿日とカテゴリーラベルがくるように。
このカテゴリーラベル、スマホでは非表示になるよう指示されているので、設定してもPCでしか反映されません。
これを、スマホでも表示してもらいました。
今回はそんなお話。
カテゴリ・タグ表示設定
設定の方法
Cocoon設定から
投稿をクリックすると、一つ目の項目が『カテゴリ・タグ』の表示設定になります。
表示選択が終わったら、ページの一番下にある『設定をまとめて保存』をクリック！
因みに手つかずの状態はこう
勢いあまってSNSシェアボタンまでありありで設定してしまいましたがそれはさておいて、、
カテゴリ・タグの表示設定もしているのにスマホでは表示されていませんね。
なぜ表示されないのか
PCでは表示されているのになぜスマホでは表示されないのか。
原因を探してみると、CSSの中に以下のコードを発見
@media screen and (max-width: 760px){ .entry-categories-tags .cat-linkdisplay: none; }
760px以下の画面サイズでは、.entry-categories-tags .cat-link（カテゴリー・タグ表示のクラス名）が『display: none;』によって非表示になるよう指示されています。これが原因で、760px以下のスマホでは、カテゴリー・タグの表示がされなかったわけですね。
というわけで、CSSを上書きしていきます。
CSSに追加する
PC版では表示されているので、元のコードをスマホ（760px以下の画面）でも反映させるようCSSにて上書きしてみます。
CSSにコードを追加する方法はこちら
追加したCSSコード
@media screen and (max-width: 760px){
.entry-categories-tags .cat-link{
display: initial;
}
『760pxでは非表示にする』というのを初期値に戻すことで、スマホでもカテゴリ・タグのリンクが表示されるようになります。
カテゴリ・タグのリンクを横並びにしたい
もし、カテゴリーを複数設定していて、縦並びになってしまう場合は以下のCSSコードで横並びにすることができます。
.cat-link{ display: inline-block; /*横並び*/ }
カテゴリ・タグ（cat-link）のカスタマイズ
せっかくなので、少し改造。
文字色や背景色を変える
.cat-link{
color:#888;
background-color:#fff;
}
ホバー時に文字色より少し薄くする
マウスをリンクに乗せると色が半透明になります。数値を変えると透明度も変更されるので好きな透明感を出してみてください。
（0が透明、１が通常です）
.cat-link:hover {
opacity: 0.5; /*透明度*/
}
.cat-link{
background: #BADFDB;
color: #fff;
box-shadow: 0px 0px 0px 3px #BADFDB;
border:1px solid #FCF9EA;
margin:0.5em;
}
.cat-link:hover {
opacity: 0.5;
}
という感じで、cat-linkのコードとセットで使います。
角を丸くする
.cat-link{
border-radius:20px; /*角丸*/
}
枠をつける
.cat-link{
background: #BADFDB;
color: #fff;
box-shadow: 0px 0px 0px 3px #BADFDB;
border:1px solid #FCF9EA;
margin:0.5em;
}
点線の枠をつける
.cat-link{
background: #BADFDB;
color: #fff;
box-shadow: 0px 0px 0px 3px #BADFDB;
border:1px dashed #fff;
margin:0.5em;
}
シンプル枠をつける
.cat-link{
background-color:#fff;
color: #797A7E;
border:2px solid #D8D3CD;
padding:0.2em 0.7em;
}
アイコンを変える
『Font-Awesome』から、使用したいアイコンのユニコードを取得します。
- ｆから始まるコードがuniコード。『f000』など
- クリックすると自動でコピーされるので、コードの部分だけ貼り付ける。
- コードの前に『￥』をつける。
（スラッシュに変換されたらそのままで大丈夫） - Cocoonでは既に色々と設定されているので、ペペっとコピペするだけで大体OK。
.cat-link{
background-color:#fff;
color: #797A7E;
}
.entry-categories-tags .fa-folder:before{
content:"\f00e"; /*アイコンのコード*/
}
アイコンを消す
.entry-categories-tags .fa-folder{
display:none;
}
カテゴリーのタイトルをつける
リンクの前に『CATEGORY』の文字を入れてタイトルっぽくした
ほか、いろいろ。
.entry-categories-tags >div:before{
content:"CATEGORY";
font-size:0.8em;
padding-right:0.3em;
}
.cat-link{
background-color:#eee;
color: #797A7E;
border-radius:20px;
padding:0.5em;
}
.entry-categories-tags .fa-folder:before{
content:"\f054";
}
.cat-link:hover {
color: #797A7E;
opacity: 0.5;
}
まとめ
displayを初期値に戻すことにより、アイキャッチ下に現れるカテゴリ・タグの設定をスマホでも表示させることができました。
カスタマイズも少し載せてみましたが、スマホでも表示されるようにした場合はスマホからの表示も確認しながら変更していってくださいませ。
