ただのメモ書き [note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした
noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。
まず、メイン全体の余白（padding）をなくしてから、記事要素に余白（margin）を追加しました。
/** モバイルサイトでアイキャッ...
note風スタイル
ただのメモ書き 
インターネット小話 Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？）
久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。
これも、note風スタイルの一環ですね。
大きな字で見やすいタイトルと正方形のアイキャッチ
アイキャッチ画像より、タイトル文に目がいくよ...
ニッチな話題 note風スタイル第5弾！引用とコード
note風デザインもそろそろ簡単な微調整です。
今回は引用文（blockquote）とコード（pre）のデザイン。
ビフォア・アフター
元のデザインに比べて、小さくグレー基調にしました。
以前は引用部分が...
ニッチな話題 note風スタイル第４弾！目次のデザイン
「note風スタイル」ということで、ブログのスタイルシートを編集しています。
今回は、目次について。
主な変更点は……
文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加
noteの目次の特徴は、「控え...
ニッチな話題 note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】
Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。
今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。
これもnoteのデザインを参考にしています。
タイ...
ニッチな話題 note風スタイル第２弾！モバイルメニューを編集
こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。
前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。
今回のメインはモバ...
ホームページ運用 ブログをnote風のデザインにしてみた
今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。
◆ note風デザインの記事一覧 ◆
「note（ノート）」というブログサービスをご存知ですか？
...