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