前提条件
本ブログはWordPressの無料テーマCocoonをnote風にカスタマイズしています。
他テーマをつかっている場合は記事内のコードをそのまま利用出来ないことにご注意ください。
また、カスタマイズの際にテーマやプラグインを修正する工程があります。
修正前にはバックアップをとることをオススメします。
はやいはなし
note風にするCSSはコチラです。
ただし、「いいね」機能はプラグインを入れる必要があるのでこれだけではカバーできません。
note風にする手順
・ワンカラムにする
・SNSシェアアイコンを似せる
・目次を似せる
・「いいね」機能をつける
・「いいね」を似せる
ワンカラムにする
noteの特徴はワンカラムでシンプルな見た目です。
ワンカラムにするコードはコチラ
@media screen and (min-width: 834px){
#content {
width: 700px;
background: #ffffff;
margin:0 auto;
min-height: 100vh;
}
.content-in {
width: 700px;
}
body.no-sidebar {
background: #ffffff;
}
/* ヘッダーをすっきりさせる */
.no-sidebar .content {
margin-top: 0;
}
.no-sidebar .main {
padding: 0px 29px;
}
.no-sidebar .header-container {
background: #ffffff !IMPORTANT;
border: #e6e6e6 1px solid;
}
.no-sidebar .navi-in>ul li {
width: 120px;
}
.no-sidebar .navi-in>ul li:hover {
background: #eee;
}
.no-sidebar .navi-in .item-label {
color: #000 !IMPORTANT;
}
.no-sidebar .footer-bottom {
color: gray;
background-color: #f9f9f9;
}
.no-sidebar .widget_search {
position: relative;
top: 0px;
}
}
/* レスポンシブ対応 */
@media screen and (max-width: 834px){
.no-sidebar .wrap {
width: auto;
}
}SNSシェアアイコンを似せる
好みと目的によりますが
note風に見せたいのであれば不要なコンテンツは非表示にすると良いとおもいます。
Cocoonの「SNSシェアボタン」「SNSフォロー」から必要な分だけ表示する設定にしたあとにCSSを適用ください。下記は4つ分のシェアボタンを想定して書いたCSSです。
CSSはコチラ
#main .button-caption {
display: none; /*キャプション非表示*/
}
/*SNSシェアボタン*/
.sns-share-message{
display:none;
}
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: flex-end; /*中央寄せ*/
}
.sns-share-buttons a {
border-radius: 50%; /*丸くする*/
font-size: 20px; /*アイコンのサイズ*/
margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
width: 40px; /*ボタンの横幅*/
height: 40px; /*ボタンの高さ*/
border:none;
}目次を似せる
変更前← →変更後
CSSをいじってむりやり似せます。
#toc{
padding: 16px;
width: 100%;
margin: 36px 0;
background-color: #f7f9f9;
justify-content: center;
margin: 0 auto;
color: #787c7b;
border: none;
text-decoration: none!important;
position:relative;
}
.toc-title{
font-weight: 700;
text-align: start;
padding:0;
margin:0;
margin-left: 24px;
}
.toc a{
color: #787c7b;
}
.toc-checkbox:checked+.toc-title::before{
font-family: FontAwesome;
content: '\f0dd';
transform: rotate(0deg);
top: 14px
left: 18px;
}
.toc-title::before {
display: inline-block;
font-family: FontAwesome;
transform: rotate(-90deg);
content: '\f0dd';
margin-right: 12px;
position: absolute;
left: 20px;
top: 13px;
}
.toc-title::after {
content: '';
}
.toc-checkbox:checked+.toc-title::after{
content: '';
}
.toc-content {
margin-left: 8px;
transition: unset;
}
/*目次の下線*/
#toc.article ul li, .article ol li{
border-top: 1px solid #e6e6e6;
}
#toc.article ul li, .article ol li:first-child{
border-top:none;
}「いいね」機能をつける
今回はWP ULikeというプラグインを利用します。
このようなハートを付けることができます。
「いいね」を似せる
note風の「いいね」にするには次の二つが必要です。
・「＋」を非表示にする
・ハートを小さい白抜きにする
「＋」を非表示にするにはpluginの編集が必要です。
プラグイン＞プラグインエディターからWP Ulikeを選択してclass-wp-ulike-setting-repo.phpを編集します。
class-wp-ulike-setting-repo.phpの場所はこちら
wp-ulike/inc/classes/class-wp-ulike-setting-repo.php
// Add prefix
if( ! empty( $filter_args[ $status . '_prefix' ] ) ){
//$number = $filter_args[ $status . '_prefix' ] . $number; // この行をコメントアウトする
}これで「＋」を非表示にできました。
続いてハートの形を変えます。
WP Ulikeの「いいね」のアニメーションは横長の画像ファイルを使って表現されています。
この画像ファイルを編集することで好きなようにアニメーションを作成できます。編集次第ではハート以外の形にも出来るというわけです。
まずは、元画像ファイルをダウンロードします。場所はコチラ
/wp-content/plugins/wp-ulike/assets/img/icons/twitter-heart.png
元画像はこのようになっています。
これ小さくして白抜きに変更します。
（下記画像は自由に利用していただいてかまいません。)
note風にした感想
note風にするにあたってnoteのUIのすばらしさに改めて気付かされました。
あくまで本記事ではnote風になるだけでnoteのすばらしさを再現できるわけではないです。
いろいろ考えましたが結論
『note使った方がいい』
