CocoonテーマのSNSボタンを記事トップは小さい丸ボタン、記事下はちょっとマテリアルデザインぽく変更したCSS

WordPressの超有名無料テーマ「Cocoon」のSNSボタンをカスタマイズするCSSについて覚書。

記事トップのSNSは丸ボタン、記事下のSNSボタンとフォローボタン部分は、ちょっとSANGO風にアレンジしたCSSです。

スポンサーリンク

概要

最近このブログのテーマをSimplicity2からCocoonに切り替えました。

Simplicity2、すごく気に入ってずっと使ってたんだけど、もう更新もないしCocoonがメインになったし、Cocoonのが色々便利なのでCocoonをSimplicity2風にカスタマイズして使うことにしました。

Cocoonにしてから少し気になっていたのが、記事トップのSNSボタンと記事下のフォローがあまりかわいくない、というか面白みがなかったので変更することにしました。

といってもCocoonのSILKスキンからの転載です。

https://dateqa.com/cocoon/

SILKスキンは、陰影と配色がマテリアルデザインのガイドラインに沿って作られているスキンで「SANGO」っぽくもあり、とてもセンスのあるスキンです。

投稿トップのSNSボタンの変更

変更前

変更前の記事トップ部分のSNSボタン。デフォルトのスキンなのでこんな感じです。

変更後

変更後。小さい丸ボタンに変更。

追加したCSSコード

以下が子テーマのstyle.cssに追加したコード。

/*トップシェアボタン*/
#main .ss-top .sns-share-buttons .button-caption {
	display: none; /*キャプション非表示*/
}

.ss-top .sns-share-buttons {
    justify-content: flex-end;
	/*ボタンの場所は、left、center も指定可能*/
	
}
.sns-share-buttons {
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
}
.sns-buttons {
    display: flex;
    align-items: center;
}

.sns-share.ss-top .sns-buttons a {
    width: 40px;
    height: 40px;
    margin-left: 8px;
    font-size: 20px;
    border-radius: 20px;
}
/*トップシェアボタン ここまで*/

投稿下のSNSボタン、シェアボタンの変更

変更前

デフォルトのスキンを使ってる場合の投稿下のSNSボタン、フォローボタン

変更後

「マテリアルデザイン」っぽく変更。ちょっとかわいらしくしてみる。

追加したCSSコード

/*投稿下部シェア部分*/
.ss-bottom {
    position: relative;
    /*padding: 2em 0.5em 0.2em;*/
	padding-top: 1.5em;
	padding-right: 0.5em;
	padding-left: 0.5em;
	padding-bottom: 0.5em;
    background: rgba(176, 190, 197, 0.2);
    border-radius: 2px;
	margin-top:40px;
}

.sns-share-message {
    position: absolute;
    top: -15px;
    left: 15px;
    padding: 0 1.2em;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 15px;
	background: #58A9EF;
    color: #fff;
}
/*投稿下部シェア部分 ここまで*/

/*投稿下部フォロー部分*/
.sf-bottom {
    position: relative;
	padding-top: 1.5em;
	padding-right: 0.5em;
	padding-left: 0.5em;
	padding-bottom: 0.5em;
    background: rgba(176, 190, 197, 0.2);
    border-radius: 2px;
	margin-top: 40px;
}

.sns-follow-message {
    position: absolute;
    top: -15px;
    left: 15px;
    padding: 0 1.2em;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 15px;
	background: #58A9EF;
    color: #fff;
}
/*投稿下部フォロー部分 ここまで*/

まとめ

このブログは、シェアされることもフォローされることもないのであまり気にすることでもないのですが、気になりだすと変えたくなるもので...

CSSなどのウェブデザイン系は、専門ではなく素人なのでどこかのサイトを参考にして書くくらいしかできないので、今回もSILKスキンから転載して少し変えたものになります。

CocoonのSNSボタンを丸ボタンに変更するなどのカスタマイズは、たくさんの方が記事にしているので検索して気に入ったものを参考にしてください。

コメント

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