スタイルシート

[Cocoon] ブログカードのラベルを小さくしたけど とりあえずのメモ

[Cocoon] ブログカードのラベルを小さくしたけど

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。 そこで、ラベルの大きさを少し小さくしてみました。 /** ブログカードのラベルを小さく 2024-05-19 */ .blogcard-label { top: -22px; left: 0px; padding: 0px .6em; } Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。 しかし、スタイルシートを変更して表示を確認したところ、...
2024.05.19 2024.08.08
とりあえずのメモホームページ運用
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...
2020.12.21
ニッチな話題ホームページ運用
[Cocoon] ブログ記事の作成日時・更新日時を２段にする 【white-space pre】 ニッチな話題

[Cocoon] ブログ記事の作成日時・更新日時を２段にする 【white-space pre】

ブログ記事のタイトル部分のスタイルを少しいじりました。 作成日時と更新日時を２段になるようにしました。 こちらがCSSです。 .entry-header .date-tags { order: 3; color: #a8abb1; font-size: 16px; } .entry-header .date-tags .post-update:after { content: "\A" ; white-space: pre ; } 少し、文字の色や大きさも変更していますが、メ...
2020.12.21 2021.03.22
ニッチな話題ホームページ運用
Amazon商品紹介リンクをショートコードで入れられるようにした #PR含む

Amazon商品紹介リンクをショートコードで入れられるようにした

Cocoonには商品紹介のショートコードがあります。 これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。 ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表示することできることに気づきました。 これまでのやり方は大変だった 見出しやボタンを組み合わせて、作っていました。 画像リンクやテキストリンクなどをコピーしてくるのに、かなり時間がかかります。 それを、こんなふうにしました。 見た目にもコンパクトだし、何...
2020.09.24 2024.08.31
#PR含むニッチな話題ホームページ運用
見出しに吹き出しをつけるスタイルをやめた ニッチな話題

見出しに吹き出しをつけるスタイルをやめた

見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。 こんな見た目でした /** 見出しに吹き出しをつける */ @media screen { #container h2 { position: relative; padding: 0.6em 1em !IMPORTANT; } #container h2:not(.entry-card-title):not(.related-entry-heading):after { position: absol...
2020.09.19 2021.10.24
ニッチな話題ホームページ運用