CSS

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

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

WordPressの管理画面で多数のウィジェットを区別しやすくするため、タイトルをつけると便利です。しかし、管理用のタイトルがサイト上で表示されてしまうのは困ります。これは簡単なCSS設定で解決でき、サイト運営の効率が向上しました。ウィジェットタイトルの表示設定についてWordPressサイトでは、多数のウィジェットを配置していると、管理画面での区別が難しくなることがあります。各ウィジェットに管理用のタイトルをつければ楽です。しかし、サイト上でも表示されてしまうため、これまで...
2025.01.16 2025.01.17
とりあえずのメモプログラミングホームページ運用勉強メモ
ブロックエディタを狭い画面で表示するときの文字サイズを小さくした とりあえずのメモ

ブロックエディタを狭い画面で表示するときの文字サイズを小さくした

ブロックエディタを狭い画面で表示する際の文字サイズを小さくしました。画面幅1080px以下の時に、文字や余白を調整するカスタムCSSを追加しました。これにより、AI画面を表示させた狭い画面でも、文章の全体像が見やすくなりました。ブラウザにサイドバーを表示すると「狭い」ブラウザのサイドバーにAI画面などを表示させると作業がスムーズになるものの、表示画面は狭くなります。特に、WordPressのブロックエディタを使っているときに、文章の全体像が見えにくく感じます。一時的にサイドバ...
2024.09.22
とりあえずのメモプログラミングホームページ運用作業効率化
[Cocoon] ブログカードのHTML構造でCSSを整理した（style.css） とりあえずのメモ

[Cocoon] ブログカードのHTML構造でCSSを整理した（style.css）

Cocoonテーマのブログカードの追加CSSを整理しました。ブログカードのHTML階層構造とメディアクエリで順序立ててまとめました。スタイルを追加するときは、はじめから構造を意識しておけばよかったね。style.cssに追加コードを整理したいstyle.cssに追加コードが増えて来たので、整理したいと思います。ただし、優先順位の問題があるので、並び順やCSSクラスの重ねた修飾の仕方も重要です。ブログカードの階層構造Cocoonテーマのブログカードは、HTMLの階層構造になって...
2024.09.18
とりあえずのメモプログラミングホームページ運用
[WordPress]ランダムな記事へのボタンを追加した（functions.php） とりあえずのメモ

[WordPress]ランダムな記事へのボタンを追加した（functions.php）

過去の記事を「掘り起こして」読んでもらう仕掛けとして「ランダムな記事へのボタン」を追加しました。WordPressブログにランダムな記事へのボタンを追加するカスタムウィジェットを作成しました。きっかけは、ブログの「アーカイブ」としての機能を強化したいと思ったからです。カスタムウィジェットを作成するPHPコード前の記事、ランダムな記事、次の記事へのリンクを表示するカスタムウィジェットを作りました。WordPressテーマのfunctions.phpファイルの末尾に追加したら、ウ...
2024.09.05
とりあえずのメモプログラミングホームページ運用
[CSS]Amazonリンクをnote風に画像を大きくした とりあえずのメモ

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

Amazonリンクをnoteのデザインを参考に、画像を大きくして説明文を省略しました。CSSを更新して、デスクトップとモバイル両方での表示を変更し、商品名、画像、ボタンのレイアウトを調整しました。Amazonリンクのスタイルを変更Amazonリンクのスタイルを変更しました。今回は noteを参考にして、画像を大きくし、説明文を省略するようにしました。Amazonリンクの例↓更新後のCSS/** amazon リンク * ブログカードに寄せた * * 2024-08-31 no...
2024.08.31
とりあえずのメモプログラミングホームページ運用
[JavaScript]目次の開閉状態をCookieで記憶させた とりあえずのメモ

[JavaScript]目次の開閉状態をCookieで記憶させた

JavaScriptを使用して目次のチェックボックス状態をCookieに保存するようにしてみました。ページ再読み込み後も状態を維持するためにイベントリスナーで設定しています。ちらつき防止のためのCSSも設定しました。JavaScriptコード前回は、サイドバーに目次を追加しました。チェックボックスの状態をJavaScriptを使ってCookieに保存し、ページを再読み込みした後もその状態を維持するようにしてみました。/** 2024-08-30 チェックボックスの状態を保存す...
2024.08.30 2024.08.31
とりあえずのメモプログラミングホームページ運用
[CSS]モバイル版の記事一覧ページを見やすくした（style.css） とりあえずのメモ

[CSS]モバイル版の記事一覧ページを見やすくした（style.css）

記事一覧ページのモバイル表示を改善するためにCSSを調整しました。サムネイル画像を左側に配置し、正方形にすることで視認性を向上させました。記事間の余白を増やし、背景色を変更することで各記事の区切りを明確にしました。記事一覧ページのサムネイルを大きくした記事一覧ページを見やすくしたいと思いました。そこで、サムネイル画像を左にして正方形にしました。記事一つ一つのかたまりを意識できるように余白も増やしました。記事一覧ページのHTMLタグの構造記事一覧ページのHTMLタグの構造は、#...
2024.08.30
とりあえずのメモプログラミングホームページ運用
[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS） とりあえずのメモ

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後（１つ目の見出しの前...
2024.08.29 2024.08.30
とりあえずのメモプログラミングホームページ運用
[Cocoon] アイコンリストで二項対立のスライドを作るCSS とりあえずのメモ

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立（dichotomy）のスライドになります。追加されたCSSポイントは、 display: flex; j...
2024.08.18 2024.08.19
とりあえずのメモプログラミングホームページ運用
ブログカード抜粋の先頭に「関連」を付けた プログラミング

ブログカード抜粋の先頭に「関連」を付けた

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...
2024.08.08
プログラミングホームページ運用
[Cocoon] ブログカードを2列に並べるCSS とりあえずのメモ

[Cocoon] ブログカードを2列に並べるCSS

メッセージ動画の一覧を並べるために、Cocoonのブログカードに「thumbnail-only」のCSSクラスを追加しました。style.cssに以下のコードを追加しました。ポイントは、「display: flex」と「flex-wrap: wrap」です。/** 2024-07-01 ブログカードを2列に並べるCSS */.blogcard-type.thumbnail-only .blogcard-snippet{ display: none;}.blogcard-typ...
2024.07.01
とりあえずのメモプログラミングホームページ運用
[CSS]ラベルボックスをスライド画像風にした プログラミング

[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。まず、このようなラベルボックス（Cocoon汎用ブロック）を作ります。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素の幅を内容に合わせて自動的に調整要素の左右の余白を自動的に調整これをカスタムクラス「slide」に追加します。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素...
2024.06.17 2024.08.18
プログラミングホームページ運用
[CSS] 一行目以外にスタイルを設定するには？（否定擬似クラスには擬似要素を入れられない） とりあえずのメモ

[CSS] 一行目以外にスタイルを設定するには？（否定擬似クラスには擬似要素を入れられない）

:not(::first-line)は無効になるtitle-listクラスのリスト要素（li）の各一行目を太字にしています。このCSSセレクタは、.title-list li::first-line 二行目以降にスタイルを設定したいと思いました。一見、::first-line 擬似要素を :not() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。.title-list li:not(::first-line) しかし、これはうまくいきま...
2024.06.12
とりあえずのメモプログラミングホームページ運用
リスト内の項目の1行目だけを太字にする（::first-line 疑似要素） とりあえずのメモ

リスト内の項目の1行目だけを太字にする（::first-line 疑似要素）

CSSを使って要素内の最初の行だけを太字にできます。/** title-listクラスのリスト 2024-06-02*/.title-list li { font-size: 80%;}.title-list li::first-line { font-weight: 900; font-size: 120%; }li セレクターを使って、全ての <li> 要素のフォントウェイトを normal に設定しています。これにより、デフォルトでは <li> 要素内のテキストは太字に...
2024.06.02 2024.06.12
とりあえずのメモプログラミングホームページ運用
[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した とりあえずのメモ

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

これが普通のアイコンリストです。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるそこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。 追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるstyle.cssに追加しました。/** step-listタグを...
2024.06.02
とりあえずのメモプログラミングホームページ運用
[JavaScript]全選択で記事部分だけになるようにした とりあえずのメモ

[JavaScript]全選択で記事部分だけになるようにした

自分のサイト内の記事全体を選択しやすいように、スクリプトを作りました。window.getSelection()テーマのjavascript.jsに以下のコードを追加しました。document.addEventListener('keydown', function(event) { if ((event.ctrlKey || event.metaKey) && event.key === 'a') { event.preventDefault(); const articl...
2024.05.24 2024.08.14
とりあえずのメモプログラミングホームページ運用
サイトのトップページに最新のYouTube動画を埋め込んでみた とりあえずのメモ

サイトのトップページに最新のYouTube動画を埋め込んでみた

教室紹介ページに、教室のYouTubeチャンネルの最新動画を埋め込みました。YouTubeの埋め込みコードを使用し、CSSで表示を大きく調整しました。iframeタグのallow属性で、埋め込まれた動画に付与する機能を指定しています。教室紹介ページへの最新YouTube動画の埋め込み教室に興味を持った人に、どのような教室なのかを知ってもらうために、YouTubeを活用するのが良いと考えました。そこで教室を紹介するトップページに、最新のYouTube動画を表示できるようにしまし...
2024.05.16 2024.05.25
とりあえずのメモホームページ運用
[Electron]今日の日付カレンダーアプリを作った（Calectron） とりあえずのメモ

[Electron]今日の日付カレンダーアプリを作った（Calectron）

Electronを使用して、Windows 7のガジェットにあったカレンダーのようなアプリケーションを作成しました。このアプリケーションは、今日の日付と曜日を表示するだけのシンプルなものです。macOS風にデザインを変更し、タイトルバーを削除して、ウィンドウ全体をドラッグできるようにしました。Windows 7のカレンダーのようなアプリを作ったElectronで Windows 7の「ガジェット」にあったカレンダーのようなものを作りました。ただ、今日の日付・曜日を表示するだけ...
2024.05.13 2024.08.19
とりあえずのメモプログラミング
[Cocoon] Amazonリンクに個別にPR表記をつける[CSS] とりあえずのメモ

[Cocoon] Amazonリンクに個別にPR表記をつける[CSS]

ちょっと商品紹介をしたいとき記事の中にちょっとAmazonの商品紹介を入れたいときがあります。記事全体がPRでもないので、記事先頭にPR表記を入れるのにも抵抗があります。そういうときのために、Amazonリンクに個別にPR表記をつけるようにCSSを変更しました。テーマのstyle.cssに以下のコードを追加しました。/** Amazonリンクに個別にPR表記をつける 2024-05-01*/.product-item-title::before { content: "[PR...
2024.05.02 2024.09.05
とりあえずのメモプログラミングホームページ運用
[WordPress] モバイル版の記事一覧の間隔を狭くした とりあえずのメモ

[WordPress] モバイル版の記事一覧の間隔を狭くした

モバイル版の記事一覧の間隔が狭くなるように、スタイルを調整しました。一度に 5記事から 8記事見えるようになりました。/** 記事一覧の密度を高くする 2024-04-26*/@media screen and (max-width: 480px) { .list { row-gap: 0; } .list.ecb-entry-border .entry-card-wrap { margin-bottom: 0; } .e-card-title { font-size: 16...
2024.04.26
とりあえずのメモプログラミングホームページ運用
Typoraで印刷用にフォントや余白を調整したい（カスタムテーマCSS） Mac

Typoraで印刷用にフォントや余白を調整したい（カスタムテーマCSS）

Typoraで表示・印刷のスタイルを変更するには、ユーザーテーマ用CSSファイルを作ります。ただし、macOS版のTyporaでは印刷時の余白設定が直接できないため、いったんPDFにエクスポートしてから印刷する必要がありました。印刷時の余白を直接指定したいなら、別のマークダウンエディタ「MarkText」も選択肢です。Mark Textを試してみると、Typoraとはまた少し勝手が違います。私は、とりあえずPDFエクスポートで対応しようと思います。Typoraのテーマを変更す...
2024.02.28 2024.03.06
Mac作業効率化
黒はNG？目に優しい色の選び方 Word・Excelなど

黒はNG？目に優しい色の選び方

デザインにおいて色の選び方は、メッセージの伝達や視覚的な魅力に直接影響します。しかし、色の選択には注意が必要です。「うるさいデザイン」を「優しい配色」にしていくと、メッセージが素直に伝わりやすいなります。これだけが正解というわけではないです。「デザインを優しくしたいな」と思ったときの参考になれば。なぜ黒（#000）を避けるべきなのか（基本の文字色）黒（#000）は、その絶対的な濃さにより、目に負担をかける可能性があります。特に背景色として白と組み合わせると、コントラストが強く...
2024.02.01 2024.02.02
Word・Excelなどとりあえずのメモホームページ運用作業効率化冊子テキスト
教室のトップページの色数を減らしてみた とりあえずのメモ

教室のトップページの色数を減らしてみた

教室のトップページを「すっきり」した印象にしようと、白基調にして要素の色数を減らしてみました。枠を目立たなくして、中の背景色を白にしてみました。こちらもどうぞ。（参考）短時間で得られる刺激から距離を置く | Piyopanman
2024.01.24
とりあえずのメモホームページ運用
[CSS] 印刷時にラベルボックスの一部だけが別のページになるのをどうにかしたい とりあえずのメモ

[CSS] 印刷時にラベルボックスの一部だけが別のページになるのをどうにかしたい

メモ。ラベルボックスの見出しラベルボックスの内容こんな感じで、ラベルボックスのラベル部分と内容部分が別のページに印刷されてしまうのが気になります。たぶん、CSSのpage-breakみたいなのがあった気がする。
2023.07.27 2023.07.28
とりあえずのメモホームページ運用
[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした とりあえずのメモ

[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした

以前に、モバイルフッターメニュー（共有ボタンやいいねボタン）を作ったときにスタイルを追加していました。その後、Google AdSenseのフッター広告と重なるので削除していました。ただ、style.cssにそのときのスタイルが残っていたので削除しました。後で、CSSを戻せるようにメモ。style.css.mobile-menu-buttons .fa-line:before { font-family: "icomoon"; content: "\e915"; positi...
2023.07.13
とりあえずのメモホームページ運用
[CSS] AdSense広告のCLSを改善した とりあえずのメモ

[CSS] AdSense広告のCLSを改善した

AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。/** 広告のCLS 改善 * */.ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280px;}@media screen and (max-width: 480px){ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:calc(83vw); }}このCSSコードでは、ウェブサイト上...
2023.07.03 2024.06.22
とりあえずのメモホームページ運用
とりあえずのメモ

[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」（片方だけでは暗黙）

PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけを指定していました。高さだけでも表示サイズは計算できていましたが、PageSpeed Insightによると「ユーザー補助」の面で減点になるようです。ヘッダーロゴのサイズヘッダーロゴのサイズは、Cocoon設定の「ヘッダー」で修正しました。「...
2023.07.02 2023.07.09
とりあえずのメモホームページ運用追記予定の話
とりあえずのメモ

スクリプトとスタイルの遅延読込みのしかた[PSI]（WordPress）

CSSは、とりあえずCocoonの「CSS縮小化」で除外できました。jqueryは、wp_enqueue_script でフッター読込みに変更しました。レンダリングを妨げるリソース久々に PageSpeed Insights（PSI）のスコアを見て、サイト設定をメンテナンスしています。「レンダリングを妨げるスクリプト」がちょっと残っているのが気になりました。画像と同じようにスクリプト も 遅延読み込みすることができます。script deferJavaScriptはscrip...
2023.07.02 2023.07.17
とりあえずのメモプログラミングホームページ運用追記予定の話
とりあえずのメモ

[PHP] jetpack.cssを無効化する

Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。/wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0これを無効にします。/** Jetpackを有効にした際に読み込まれるCSSを無効化*/add_filter( 'jetpack_implode_frontend_css', '__return_false' );こちらもどうぞ。
2023.07.02 2023.07.17
とりあえずのメモホームページ運用追記予定の話
[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script） とりあえずのメモ

[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script）

トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45sスクリプトサイズ0.77MB0.69MB不要なスタイル・スクリプトを見つける前回は、不要なプラグインを無効化しました。今回は不要なスタイル・スクリプトを削除していきます。前回はこちら。スタイル・スクリプトを一覧するショートコードは、過去に作っ...
2023.07.02 2023.07.31
とりあえずのメモホームページ運用追記予定の話
[CSS] ブログの文字詰めを微調整した【letter-spacing と font-feature-settings】 とりあえずのメモ

[CSS] ブログの文字詰めを微調整した【letter-spacing と font-feature-settings】

ちいラボでは、なるべく「文字が見やすい大きさ」に設定しています。しかし、自分のスマートフォンで閲覧すると、一行の文字数が少ないために、改行が多すぎる気もしています。そこで、文字の大きさをそのままに、「文字詰め」を狭めてみることにしました。letter-spacing全体的な字間をそのまま減らすには、letter-spacing に負の値を設定します（規定は0）。letter-spacing: -0.05em;font-feature-settings に "palt" を設定...
2023.04.29 2024.08.11
とりあえずのメモプログラミングホームページ運用
[CSS] 幅とパディングの関係【box-sizing】 とりあえずのメモ

[CSS] 幅とパディングの関係【box-sizing】

HTML要素の幅を固定して、パディングを内側に取りたいときには、「box-sizing」プロパティでborder-boxに指定します。固定ヘッダーとサイドバーが重なって幅が取れないウェブページに固定ヘッダーを作ろうと思いました。位置を position: fixで固定します。ところが、画面サイズによって幅の変わる左サイドバーがあったので、幅がうまくいきません。サイドバーの幅の分だけ右にずらす（leftやpadding-left）と、ヘッダーバー全体が画面から右にはみ出てしまい...
2023.04.24
とりあえずのメモプログラミングホームページ運用
[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】 とりあえずのメモ

[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】

なぜか、Cocoonのテーマ設定のソースコードが反映されませんでした。CSSセレクタを設定し直したら、うまく動きました。highlight.jsが動作しないCocoonテーマには、ソースコード ハイライト機能があります。これは、highlight.jsを利用しています。しかし、Cocoon設定では、ちゃんとハイライト表示にチェックがつけたのですが、記事内のソースコードがそのままでした。これまで うまくコードハイライトが表示されない原因は、「スクリプトの遅延処理などのほかのプラ...
2023.04.23
とりあえずのメモニッチな話題プログラミングホームページ運用
[WordPress]記事ごとの平均PVを集計するサブメニューを自作プラグインに追加した とりあえずのメモ

[WordPress]記事ごとの平均PVを集計するサブメニューを自作プラグインに追加した

どんな記事が安定して読まれているのか把握するために、平均PVを調べたいと思いました。前回作った月別ページビュー集計の自作プラグインに追加します。前回はこちら。管理ページにサブメニューを追加する（add_submenu_page）最終的に出来上がったのがこちら。ブログの勢いを将棋の駒でランク付けしています。書いた記事が、駒得で変換されるのでモチベーションが上がります。野球が好きなら、ヒットやホームランでもいいんだろうね。まずは、メニューに項目を追加します。WordPressプラ...
2023.04.23
とりあえずのメモニッチな話題プログラミングホームページ運用
【未解決】埋め込んだTwitterのフォントサイズを小さくしたい（けど、いったん断念）[WordPress] SNS

【未解決】埋め込んだTwitterのフォントサイズを小さくしたい（けど、いったん断念）[WordPress]

ただ、ツイートの埋め込みの文字サイズを本文に揃えたいだけなのに、めちゃくちゃ大変……。Twitterのツイートは、「ツイートを埋め込む」からコードを表示して、HTMLに埋め込むことができます。ところが、枠の幅や文字サイズなどは、ウェブサイトと異なるスタイルが適用されます。結論としては、あれこれ調べましたが、諦めました。「埋め込みツイート」が Twitterの仕様変更に依存しているので、サイト側で変更してもすぐに元に戻ってしまうからです。「twitter-tweet」のクラスを...
2023.04.09 2023.07.03
SNSとりあえずのメモプログラミング
[WordPress] 脚注のプラグインを入れてCSSを変更した【Easy Footnotes】 とりあえずのメモ

[WordPress] 脚注のプラグインを入れてCSSを変更した【Easy Footnotes】

脚注のプラグインを入れました。定番の「Easy Footnotes」です。脚注のメリットは、根拠を添えておけることだよね。Easy Footnotesのショートコード（efn_note）「Easy Footnotes」は、プラグインの追加で検索するとインストールできます。段落ブロック内にショートコードを挿入すると、脚注になります。[efn_note]ここに文章を入れる[/efn_note]マウスポイントでツールチップが表示されるのと、記事末尾に注記が並びます。スマホだと、脚注...
2023.04.08 2024.01.14
とりあえずのメモプログラミングホームページ運用
[CSS] 印刷用のラベルボックスの枠線の色を渋めにした とりあえずのメモ

[CSS] 印刷用のラベルボックスの枠線の色を渋めにした

ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。灰青緑黄赤鮮やか9494952BAAE23DB471FED900E60033薄い色F7F9F9F3FBFFEAF9F4FFF7CBFEF2F2濃い色CCDADAA3C6DAADD8CACDCC9AD8B0AC今までは、彩度の大きめの色だったの...
2023.04.03 2023.07.11
とりあえずのメモニッチな話題ホームページ運用
[Cocoon] ブログカードをラベルボックスのように表示するCSS プログラミング

[Cocoon] ブログカードをラベルボックスのように表示するCSS

カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。こちらがスタイルシートです。不要な項目を非表示（display: none;）に...
2023.03.25 2023.03.26
プログラミングホームページ運用
[CSS] ブログの記事一覧をInstagramっぽくしたい（いったん断念） とりあえずのメモ

[CSS] ブログの記事一覧をInstagramっぽくしたい（いったん断念）

ひとこと日記のアイキャッチ画像を、Instagramのように大きく表示できるようにしたいと思いました。カスタムHTMLウィジェットでスタイル設定カスタムHTMLのウィジェットで、styleを追加すると、特定のページにスタイルを追加できました。<style>.entry-card-snippet { display: none;}figure.entry-card-thumb { padding-bottom: 0em;} .entry-card-thumb { width: ...
2023.03.05 2023.03.25
とりあえずのメモプログラミングホームページ運用
[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】 とりあえずのメモ

[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】

最近は、表のデザインで、縦の枠線を付けないことが多いようです。Spotifyの「支払いに問題がある」？【クレジットカード情報の更新】より確かに、スッキリした印象になります。ブログ内の表を CSS を変更してみました。「border-width: 2px 0px;」という箇所が肝。横線（border-top, border-bottom）は 2px縦線（border-left, border-right）は 0px に指定されます。/** 表の枠の色（縦線なし） 2023-03...
2023.03.02
とりあえずのメモプログラミングホームページ運用
次のページ