noteは自身の作品を配信できるプラットフォームのことですが、UIがお洒落でついつい覗いてしまいます。そして、何時間も読み漁ってしまうことも少なくありません。暇つぶしや情報収集には最適のツールです。
今回はそんなnoteのデザインを踏襲したワードプレスのカスタマイズ方法をまとめてみました。
- 細めの1カラム
- 文字は大きめ
- 角丸のデザイン
- アイキャッチ画像の配置
- 淡い色調
- 「スキ」
- 記事を販売できる
上記の項目をワードプレスに適応することはそんなに難しくはありません。順番に見ていきましょう。
noteのデザイン。
細めの1カラム。
これが最もnoteらしいデザインだと私は思います。
カラムを細くすることで目線の移動を最小限に抑えることができます。noteほど細いカラムは見たことがありません。。
noteのカラム幅を検証してみると620pxでしたが、私は700pxにしてみました。「SWELL」の場合は左右に32pxずつpaddingがつくので実際は764pxになっています。ちょっと大きくしたのは画像を大きく見せるためです。
カラム数：1
カラム幅：620px
1カラムにすることのメリットはコンテンツがディスプレイの中央に配置されることです。2カラムだとどちらかに寄ってしまうのでデザイン的にあまり美しくありません。デメリットは回遊率が下がることで、文章を読ませたいか、サイトを巡回して欲しいかによってカラム数は変わってきます。
現在は2カラムが主流なので1カラムは新鮮な印象を与えることできると私は思っています。
文字は大きめ。
文字のデータをWhatFontで調べてみました。下記のとおりです。
- font-family：-apple-system（San Francisco）
- size：18px
- line height：36px
- color：#222222
フォントは-apple-systemと記載されています。これはApple社の開発した純正フォントであるSan Franciscoを使用するためのコードですが、ブログに適応させるのは結構な手間がかかるのでここでは採用しません。
ちょっと驚いたのはsize: 18pxというところです。あれ？これって18pxもあるかな、と思ってググってみたらわかりました。下記の記事に書いてありますが、San Franciscoでは日本語フォントが若干小さく表示されるそうです。
なので、私は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です。個人的にその方がしっくりきました。
アイキャッチ画像の配置。
基本的なワードプレスの記事上部は記事タイトル→アイキャッチ画像となっていますが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; ?>驚くほど簡単にできます。
下記は参考にさせてもらったサイトで、より細かなカスタマイズ方法も解説してあります。ありがとうございました！
淡い色調。
最近こういった色調のサイトが増えているように感じます。トレンドでしょうか？目についたところの色をまとめてみました。明るい補色とグレー。
- ヘッダーの検索とベル：■#A8ABB1
- ヘッダーのニコニコ：■#55CEBB
- ボタンの色：■#2CB696
- スキの色：■#EA3F60
- 目次の背景色：■#F7F9F9
ホバーしたときを除いて、以上がnoteで使われている色になります。参考までに。
「スキ」。
noteには「スキ」と呼ばれる一種のいいねボタンがあります。これは前回まとめましたが、プラグインを使うことでワードプレスにも導入可能です。
記事を販売できる。
これもワードプレスに実装することは可能です。下記の記事が参考になります。
まだ、導入する予定はないですが、いつか自分の書いた記事でお金をもらうことができれば最高ですね！そのためにも魅力的な文章を書けるように修行していきます:D。
ところで、驚いたことに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);
}※「SWELL」の場合。スマホやタブレットではホバーしないようにしました。［@media only screen and (min-width: 769px)］