note風スタイル

[CSS]Amazonリンクをnote風に画像を大きくした

[CSS]Amazonリンクをnote風に画像を大きくした

Amazonリンクをnoteのデザインを参考に、画像を大きくして説明文を省略しました。 CSSを更新して、デスクトップとモバイル両方での表示を変更し、商品名、画像、ボタンのレイアウトを調整しました。 Amazonリンクのスタイルを変更 Amazonリンクのスタイルを変更しました。今回は noteを参考にして、画像を大きくし、説明文を省略するようにしました。 Amazonリンクの例↓ 更新後のCSS /** amazon リンク * ブログカードに寄せた * * 2024-08...

とりあえずのメモプログラミングホームページ運用

[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。まず、メイン全体の余白（padding）をなくしてから、記事要素に余白（margin）を追加しました。 /** モバイルサイトでアイキャッチの写真を横一面にする*/ @media screen and (max-width: 1023px) { main.main { padding-right:0px; padding-left:0px; } .entry-content, .entry...

とりあえずのメモプログラミングホームページ運用追記予定の話

Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？）

Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？）

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。これも、note風スタイルの一環ですね。大きな字で見やすいタイトルと正方形のアイキャッチアイキャッチ画像より、タイトル文に目がいくようにする意図で、変更しました。常に左から読んで行けるほうが、目にラクな気がします。といって、そこまでブログ一覧はアクセスがないんですが……笑 CSS CSSはこんな感じです。 display: flexで下位の要素の順番（order）を変更できるようにして...

2021.03.22 2024.08.30

インターネット小話ニッチな話題ホームページ運用

note風スタイル第5弾！引用とコード

note風スタイル第5弾！引用とコード

note風デザインもそろそろ簡単な微調整です。今回は引用文（blockquote）とコード（pre）のデザイン。ビフォア・アフター元のデザインに比べて、小さくグレー基調にしました。以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。ただ、文字は少し小さいかもしれません。こんな感じの引用。こんな引用元 code is here { something. } 引用ブロック引用ブロックは、かなりスッキリしました。 .entry-cont...

ニッチな話題ホームページ運用

note風スタイル第４弾！目次のデザイン

note風スタイル第４弾！目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。今回は、目次について。主な変更点は…… 文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加 noteの目次の特徴は、「控えめ」なこと。記事によっては目次を付けていないものも多いです。目次（table of contents）のHTML構造 .toc.toc-title.toc-contentol.toc-listlia リスト構造（ol, li）とアンカーリンク（a）の関係で、かなり複...

ニッチな話題ホームページ運用

note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した【display-flex】

note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。これもnoteのデザインを参考にしています。タイトルと本文の位置が近くなるので、読みやすいですよね。 Cocoon設定やPHP編集もいいけれど…… アイキャッチ位置を変更する方法をざっと調べると… Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更す...

2020.12.20 2020.12.21

ニッチな話題ホームページ運用

note風スタイル第２弾！モバイルメニューを編集

note風スタイル第２弾！モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。今回のメインはモバイルメニューです。どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。モバイルメニューボタンをいろいろ変更した上部バーはすっきりさせました。下部バーはLINE...

2020.12.19 2023.07.13

ニッチな話題ホームページ運用

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。 note風デザインの記事一覧「note（ノート）」というブログサービスをご存知ですか？ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。２カラムのアメブロと比べてみ...

2020.09.12 2024.08.29

ホームページ運用