スタイルシート

[WordPress]ウィジェットタイトルを非表示にするCSS とりあえずのメモ

[WordPress]ウィジェットタイトルを非表示にするCSS

WordPressの管理画面で多数のウィジェットを区別しやすくするため、タイトルをつけると便利です。しかし、管理用のタイトルがサイト上で表示されてしまうのは困ります。これは簡単なCSS設定で解決でき、サイト運営の効率が向上しました。ウィジェットタイトルの表示設定についてWordPressサイトでは、多数のウィジェットを配置していると、管理画面での区別が難しくなることがあります。各ウィジェットに管理用のタイトルをつければ楽です。しかし、サイト上でも表示されてしまうため、これまで...
[Cocoon] ブログカードのラベルを小さくしたけど とりあえずのメモ

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

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。そこで、ラベルの大きさを少し小さくしてみました。/** ブログカードのラベルを小さく 2024-05-19 */.blogcard-label { top: -22px; left: 0px; padding: 0px .6em;}Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。しかし、スタイルシートを変更して表示を確認したところ、予想と異なる...
Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?) インターネット小話

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

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

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

note風デザインもそろそろ簡単な微調整です。今回は引用文(blockquote)とコード(pre)のデザイン。ビフォア・アフター元のデザインに比べて、小さくグレー基調にしました。以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。ただ、文字は少し小さいかもしれません。こんな感じの引用。こんな引用元code is here { something.}引用ブロック引用ブロックは、かなりスッキリしました。.entry-content blockqu...
[Cocoon] ブログ記事の作成日時・更新日時を2段にする 【white-space pre】 ニッチな話題

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

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

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

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

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

見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。こんな見た目でした/** 見出しに吹き出しをつける */@media screen { #container h2 { position: relative; padding: 0.6em 1em !IMPORTANT; } #container h2:not(.entry-card-title):not(.related-entry-heading):after { position: absolute...