ワードプレス無料テーマ Cocoon(コクーン)CSSコピペカスタマイズ

ワードプレステーマ Cocoon(コクーン)カスタマイズ

今回ワードプレスの新定番ともいえるコクーンのテーマです。

カスタマイズしなくても充分すぎるデザインですので、大幅にカスタムというわけではありませんがチョコチョコ細かい部分をイジッてみました。

今どういう状況か、とりあえず画像(スクショ)を貼ってみますね。

もちろんスマホ側も丸い画像に変わりますよ。

 

目次

ブログタイトルに影っぽいものを付ける。

画像のタイトルを見てもらえればわかるとは思いますが、ただ影をつけただけです。

本来、画像を使ったり凝ったことができますが、そんなものを作る暇がないという方は、かっこいいモノを作るまでの間、これで済ませておいてもよいのではないでしょうか?

参考にしたサイトを紹介しておきます。

[blogcard url=”https://imabari-city.com/2020/05/20/cocoon%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%82%bf%e3%82%a4%e3%83%88%e3%83%ab%e3%82%92%e3%81%84%e3%81%98%e3%81%a3%e3%81%a6%e3%81%9f%e3%80%82/”]

下記のコードを追加CSSにコピペでオッケーです。

.site-name-text{

background: #EEE url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAAlSURBVBhXY/wPBAxAwMjICKIYmGAMqDgDiAdmwQSY4DJglQwMABSSDgJboIQfAAAAAElFTkSuQmCC) repeat;


text-shadow: -5px -5px black, -4px -4px white;


font-weight: bold;


-webkit-text-fill-color: transparent;


-webkit-background-clip: text;


}


応用編なども載っていますので、影の位置関係などちょっと変えたいとかは参考サイトでできますよ。

ブログトップの記事カードを丸くする。

コクーン側の設定で『縦型カード3列』を選択した場合のカスタマイズです。

これは注意ですね。 違う表示形式の場合うまく表示されませんのでご注意ください。

[blogcard url=”https://imabari-city.com/2020/05/21/%e8%a8%98%e4%ba%8b%e4%b8%80%e8%a6%a7%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%82%92%e7%84%a1%e7%90%86%e3%82%84%e3%82%8a%e4%b8%b8%e3%81%8f%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f/”]

これまた下記のコードを追加CSSにコピペするだけ。

/記事カード画像を丸くする/
@media (min-width:1270px)
{
.entry-card-thumb-image{
height:260px;
}
}
@media screen and (min-width:1030px) and ( max-width:1270px) {
.entry-card-thumb-image{
height:18vw;
}
}
@media screen and (min-width:830px) and ( max-width:1030px) {
.entry-card-thumb-image{ height:27vw;
 }
}
@media (max-width:843px) {
.entry-card-thumb-image{
height:43vw;
 }
main.main, div.sidebar {
padding: 10px 5px;
}
}
@media (max-width:480px) {
.ect-vertical-card .entry-card-wrap
.entry-card-thumb{
margin-bottom:10px;
}
}


/全体に適応/
.main{
padding:10px 10px;
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb img{
border-radius:50%;
}
.cat-label{
position: static;
padding:3px 5px;
}
.entry-card-snippet{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /記事カードの記事内容の行数指定/

このカスタムも応用編など細かな仕様に関してはサイトをお確かめください。

カスタムデザイン元

[blogcard url=”https://imabari-city.com/“]

いかがでしたか?

 

コピペするだけなので、簡単に数分でできてしまうCSSカスタマイズを紹介してみました。

 

それでは今回はこれで。

 

よかったらシェアしてね!
  • URLをコピーしました!
目次