Photo by
comgicon
【スタイルガイド】noteで使えるデザインってどんなのがあるの？
WordPressのテーマを自作しようと思ったときに、よく見るブログ系サービスのnoteってどんなスタイル・デザインが使えるのか気になりました。
このヘルプセンターにできることは書いてはあるけど、「結局どのタグに対してどんなスタイル・デザインが適用されるんだ？」っていう疑問が残ったので、実際に自分で作ったほうが早いじゃんっていうことで開始！
見出し
見出し改行
見出し中央寄せ
見出し中央寄せ改行
見出しにリンク
見出しに部分リンク改行
テキスト強調
テキスト強調改行
テキスト中央寄せ
テキスト中央寄せ改行
引用
引用改行
引用強調
引用部分リンク
code
<html>
<head>
<styel>
h1 {
font-size: 2rem;
}
</style>
</head>
<body>
<h1>Hello note!</h1>
<script>
aletr('Hello note!');
</script>
</body>
</html>
<?php echo 'Hello note!' ?>
一通り作ってみた感想
マークダウンが使えないのは下調べでわかってはいたけど、リスト構造が作れなかったり、テーブルが作れなかったりで、思ったよりは不自由なのかな？という印象。
気になる点としては、記事タイトルはh1で出力されるのに、見出しに設定した文章はh3で出力されているため、h1タグの次に出力される見出しタグがh2を飛ばしてh3ということになるので、これはSEO的にどうなんだ？という疑問はどうしても残りました。。
あと思ったよりPCレイアウトで見たときのコンテンツ幅が狭くて、読みやすい文章・記事を書くっていうのが難しいかも？
意図しない改行などを招いてしまうので、なかなか癖が強そう。
また、プログラムコードを貼り付ける用のスタイルが準備されているけど、ソースコード内のハイライトがどの言語で何に対して色が付くのかがよくわからず。
さすがにコード周りはQiitaとかのほうが強力そうなので、ゴリゴリにプログラムのことを書くというよりは、読むための文章をベースにnoteを使えるようにできるといいなって思いました。
この記事が気に入ったらサポートをしてみませんか？