とりあえずのメモ[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。 まず、メイン全体の余白(padding)をなくしてから、記事要素に余白(margin)を追加しました。 /** モバイルサイトでアイキャッチの写真を横一... 2022.05.18とりあえずのメモプログラミングホームページ運用追記予定の話
とりあえずのメモ[Cocoon]モバイルサイトフォントを17pxに変更した これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。 そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。 1行あたりの文字数は、表示するスマホによ... 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 2023.07.13ニッチな話題ホームページ運用
ホームページ運用ブログをnote風のデザインにしてみた 今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。 ◆ note風デザインの記事一覧 ◆ 「note(ノート)」というブログサービスをご存知ですか? ブログサービスといえば、ヤフーブログ、アメブロ、... 2020.09.12 2021.03.27ホームページ運用