2025.01 Cocoon のビジュアルエディターの画像、クラシックエディターに CSS 追加
Cocoon のビジュアルエディターの画像が、白背景だと境界わかりにくく、box-shadow を適用したい。また、クラシックエディターが背景に溶け込んで、境界がどこにあるかわからなくなるため、これも border を付けたい、ということで...
CSS
2025.01 2025.01 Cocoon の追加 CSS のカスタマイズで、CSS が突然、反映されなくなる問題の対処
Cocoon で CSS をカスタマイズしているときに、突然、ある行の CSS の修正が反映されなくなり、原因不明だったが、今日やっと原因が判明した。CSS カスタマイズをしているときに、稀にインデントに使われる空白部分がおかしくなってしま...
2025.01 firefox の開発ツールで css を編集して直接保存
Chrome をメインのブラウザとして使用しているため、css の調整にも Chrome の開発ツールを使用していたが、firefox の開発ツールだと、ローカルでファイルを開いているときに、保存でそのままファイルが更新されることに気づいた...
2025.01 Cocoon のコードブロックにファイル名表示と折り返しボタンを追加
Cocoon のコードブロックの機能改善、第三段前回に続き、今回はファイル名表示と折り返しボタンの追加に挑戦した。前回の記事:完成後の表示イメージ:ファイル名表示時の投稿の書き方ファイル名の表示は、コードブロックの直前に filename:...
2024.12 Cocoon のコードブロックにコピーボタンを追加（２）
前回の記事で、Cocoon のコードブロックにコピーボタンを追加してみたものの、表示がやっぱり質素で、もう少しかっこいい表示にしたい。前回の記事:そこで、フリーの SVG アイコン素材を用いて、コピーボタンとなるように修正してみた。完成後の...
2024.12 Cocoon のコードブロックにコピーボタンを追加
WordPress のコードブロックにコピーボタン、やっぱりほしい。ということで、Cocoon に Copy button を追加してみた。実装は、JavaScript で <pre> タグの中に <code> を含むものを探して、コピーボ...
2024.12 Cocoon のコードブロックを丸角にして文字間調整
WordPress でサイト構築して、やっぱり、最初に気になるのはコードブロックの表示。いろいろ調べてみたが、ハイライトは Cocoon の標準を使うことにした。Cocoon 設定から、ハイライト表示を有効化して、ハイライトスタイルを an...