スタイルシート

インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。 これも、note風スタイルの一環ですね。 大きな字で見やすいタイトルと正方形のアイキャッチ アイキャッチ画像より、タイトル文に目がいくようにする意図で、変更...
ニッチな話題

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

note風デザインもそろそろ簡単な微調整です。 今回は引用文(blockquote)とコード(pre)のデザイン。 ビフォア・アフター 元のデザインに比べて、小さくグレー基調にしました。 以前は引用部分が長いと「うるさい」印象があったので、...
ニッチな話題

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

ブログ記事のタイトル部分のスタイルを少しいじりました。 作成日時と更新日時を2段になるようにしました。 こちらがCSSです。 .entry-header .date-tags { order: 3; color: #a8abb1; font...
#PR含む

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

Cocoonには商品紹介のショートコードがあります。 これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。 ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表示することでき...
ニッチな話題

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

見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。 こんな見た目でした /** 見出しに吹き出しをつける */ @media screen { #container h2 { position: relative; p...