WordPressをnote風にカスタマイズする方法

2020 9 Jun

Tue, 9 Jun 2020 16:10:57 Sun, 16 May 2021 11:49:26

noteは自身の作品を配信できるプラットフォームのことだが、UIがお洒落でついつい覗いてしまう。そして、何時間も読み漁ってしまうことも少なくない。暇つぶしには最適のツール。

note（ノート）

note ――つくる、つながる、とどける。クリエイターが文章やマンガ、写真、音声を投稿することができ、ユーザーはそのコンテンツを楽しんで応援できるメディアプラットフォームです。だれもが創作を楽しんで続け…

今回はそんなnoteのデザインを踏襲したWordPressのカスタマイズ方法を纏めてみた。

noteのデザインの特徴

細めの1カラム
文字は大きめ
角丸のデザイン
アイキャッチ画像の配置
淡い色調
「スキ」
記事を販売できる

上記の項目をWordPressに適応させることはそんなに難しくない。順番に見ていこう。

@TOC

noteのデザイン

細めの1カラム

これが最もnoteらしいデザインだと私は思う。カラムを細くすることで目線の移動を最小限に抑えることができる。noteほど細いカラムはありそうでなかなかない。

noteのカラム幅を検証してみると620pxだったが、私は700pxにしてみた。「SWELL」の場合は左右に32pxずつpaddingがつくので実際は764pxになっている。ちょっと大きくしたのは画像を大きく見せるためである。

カラム数: 1
カラム幅: 620px

1カラムにすることのメリットはコンテンツがディスプレイの中央に配置されることだ。2カラムだとどちらかに寄ってしまうのでデザイン的にあまり美しくないと個人的に思う。デメリットは回遊率が下がることで、文章を読ませたいか、サイトを巡回して欲しいかによってカラム数は変わってくる。現在は2カラムが主流なので1カラムは新鮮な印象を与えることできる気がするなあ。

文字は大きめ

文字のデータをWhatFontで調べてみた。下記のとおり。

noteのフォント

font-family: -apple-system（San Francisco）
size: 18px
line-height: 36px
color: #222222

フォントは-apple-systemと記載されている。これはApple社の開発した純正フォントであるSan Franciscoを使用するためのコードだが、ブログに適応させるのは結構な手間がかかるのでここでは採用しない。

ちょっと驚いたのはsize: 18pxというところだ。あれ？これって18pxもあるかな、と思ってググってみたら分かった。下記の記事に書いてあるが、San Franciscoでは日本語フォントが若干小さく表示されるそうだ。

Glósóli

Web ページでも San Francisco が使いたい！ – GlósóliApple が昨年発表した新たなシステムフォント “San Francisco” ですが、非常にいい感じですね。 medium.com特に iOS と OS X の本文用の SF Text はアパーチャーが広くスペ…

なので、私は17pxにした。これぐらいが最も見やすいのではないかな。line heightは36pxなので「SWELL」の場合だと、

/*　行間　*/
.post_content {
    line-height: 2
}

これでOK。

colorは基本だが、#000（真っ黒）にしないことが大事。noteでは#222222になっているが、~~私は濃い茶色の#3a3833にしている。背景色と同系統の色だ。~~

角丸のデザイン

これは投稿ページではなく、記事一覧ページでの話だが、アイキャッチ画像の四隅が若干丸くなっている。「SWELL」だと下記のコードで反映される。

/*記事一覧ページのアイキャッチ画像を丸く*/
.p-postList__thumb {
    border-radius: 4px;
    z-index: 1;
}

~~私は記事ページのアイキャッチ画像にも反映させている。~~上記のコードに.p-articleThumb__imgを追加すればOK。個人的にその方がしっくりきた。

アイキャッチ画像の配置

基本的なWordPressの記事上部は記事タイトル -> アイキャッチ画像となっているがnoteは逆である。この仕様はなかなかお洒落な感じがするね。~~私も早速取り入れてみましたがいい感じだ。~~

アイキャッチ画像と記事タイトルの順番を変えるにはsingle.phpを触る必要がある。ということでFTPソフトが必要。「SWELL」を例に解説してみる。下記はデフォルトの状態。

<?php if ( ! SWELL_FUNC::is_show_ttltop() ) : //タイトル周り
			SWELL_FUNC::get_parts('parts/single/post_head', $post_id );
		endif; ?>

<?php if ( SWELL_FUNC::is_show_thumb( $post_id ) ) : //アイキャッチ画像 
			do_action( 'swell_before_post_thumb', $post_id );
			echo SWELL_PARTS::post_thumbnail( $post_id );
		endif; ?>

これの順番を入れ替えるだけ。

<?php if ( SWELL_FUNC::is_show_thumb( $post_id ) ) : //アイキャッチ画像 
			do_action( 'swell_before_post_thumb', $post_id );
			echo SWELL_PARTS::post_thumbnail( $post_id );
		endif; ?>

<?php if ( ! SWELL_FUNC::is_show_ttltop() ) : //タイトル周り
			SWELL_FUNC::get_parts('parts/single/post_head', $post_id );
		endif; ?>

驚くほど簡単にできる。下記は参考にさせてもらったサイトで、より細かなカスタマイズ方法も解説してある。PHP詳しくないから助かるわ。

淡い色調

最近こういった色調のサイトが増えているように感じる。トレンドかな？目についたところの色を纏めてみた。明るい補色とグレーが基調になっている。

noteのカラーコード

ヘッダーの検索とベル：■#A8ABB1
ヘッダーのニコニコ：■#55CEBB
ボタンの色：■#2CB696
スキの色：■#EA3F60
目次の背景色：■#F7F9F9

hoverしたときを除いて、以上がnoteで使われている色である。参考までに。

「スキ」

noteには「スキ」と呼ばれる一種のいいねボタンがある。これは前回纏めたが、プラグインを使うことでWordPressにも導入可能だ。

記事を販売できる

これもWordPressに実装することは可能。下記の記事が参考になるかと。

conocode

決済サービス Stripe を使って WordPress サイトに支払い機能を組み込むWordPress や独自開発のサイトに決済機能を入れたいという要望はたくさんあります。一昔前だと、カード決…

まだ、導入する予定はないが、いつか自分の書いた記事でお金をもらうことができれば最高だな。そのためにも魅力的な文章を書けるようにならないと。

ところで、驚いたことにnoteで上記の導入方法を有料記事で上げている人がいた。しかも、けっこう売れてたし。有料サービスを導入するために有料記事を買うのはなんだか面白い話だ。Googleで調べれば山ほど関連記事があるんだけどな。情弱は損だな。

以上で終わり。ネットを巡回しているときに何も考えずにするのではなく、引っかかるところがあればそれを分析してみることが重要だ。noteと出会ったときに感じた良い意味での違和感を文字に起こしてみて色々な発見があった。デザインって奥深い。

追記：おまけ

カテゴリー、タグのnote風カスタマイズ

/*　記事下のカテゴリーとタグボックス　*/
.c-categoryList__link, .c-tagList__link {
    color: var(--color_text);
    background-color: transparent;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 12px;
    padding: 8px 12px;
}
	 
@media only screen and (min-width: 769px){
.c-categoryList__link:hover, .c-tagList__link:hover {
    box-shadow: none;
    -webkit-animation: none;
    animation: none;
    border: 1px solid #a8abb1;
    transition: border .2s cubic- bezier(1,0,0,1);
}
}

.c-categoryList:before, .c-tagList:before {
    margin-right: 0em;
}

.c-categoryList::before, .c-tagList::before,  .wp-block-categories>.cat-item>a::before, code.dir_name::before {
    content: "";
}

.tag-cloud-link:before, .c-categoryList__link::before, .c-tagList__link::before, .icon-folder::before {
    content: "#";
}

.tag-cloud-link {
    border-radius: 4px;
}

※「SWELL」の場合。スマホやタブレットではホバーしないようにした。［@media only screen and (min-width: 769px)］

記事下SNSアイコンをnote風にカスタマイズ

まずはSWELLでシェアボタンのデザインをボタン（小）に。

/*　記事下のSNSシェアボタン　*/
.c-shareBtns__btn {
    background-color: transparent;
}

.icon-facebook::before {
    color: #1877f2;
}

@media only screen and (min-width: 769px){
.icon-facebook:hover:before {
    color: #0b5fcc;
}
}

.icon-twitter::before {
    color: #55acee;
}

@media only screen and (min-width: 769px){
.icon-twitter:hover:before {
    color: #2795e9;
}
}
	
.icon-hatebu::before {
    color: #3B5898;
}

@media only screen and (min-width: 769px){
.icon-hatebu:hover:before {
    color: #2b3f6b;
}
}

.icon-pocket::before {
    color: #EF4056;
}

@media only screen and (min-width: 769px){
.icon-pocket:hover:before {
    color: #cf273c;
}
}

.icon-pinterest::before {
    color: #BB0F23;
}

@media only screen and (min-width: 769px){
.icon-pinterest:hover:before {
    color: #960a1a;
}
}

.icon-line::before {
    color: #01b901;
}

@media only screen and (min-width: 769px){
.icon-line:hover:before {
    color: #018601;
}
}

.hov-flash-up:hover {
    box-shadow: none;
    -webkit-animation: none;
    animation: none;
}

.c-shareBtns__btn {
    padding: 8px 8px;
}

/*　プロフィールボックスのSNSアイコン　*/
.widget_swell_prof_widget .icon-facebook::before {
    color: var(--color_text);
}

.widget_swell_prof_widget .icon-twitter::before {
    color: var(--color_text);
}