Cocoon

[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
とりあえずのメモホームページ運用
[Cocoon] サイトのキーカラーを変更した とりあえずのメモ

[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。サイトの配色を試行錯誤元の配色です。臙脂色を基調した配色。焦げ茶色をメインにした配色。それをさらに濃くした配色です。「ユーザー補助」「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。パッと見でも、文字が読みやすくなったと思います。CSSでのカスタムカラー追加CSSの中でサイトのキーカラーは 直接 値を指定するより、var(--wp--preset--color--key-color...
2023.07.11 2023.07.13
とりあえずのメモホームページ運用追記予定の話
[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw） とりあえずのメモ

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw）

PageSpeed Insightsで計測したときに、CLS（Cumulative Layout Shift）が「0.33（不良）」になるのが気になっていました。主な原因は、トップページで表示しているカルーセルです。CSSの calc() を使って、画面の幅からカルーセルの高さを計算することで、CLSを 0 に改善できました。カルーセルがCLSに悪影響しているCLS（画面ズレ）が起こるのは、トップページにある「カルーセル」が原因です。確かに、サイトの表示を見てみると、一度 広...
2023.07.03 2023.07.04
とりあえずのメモホームページ運用
[Cocoon]「pinit_main.js」を削除するには？（Pinterest） SNS

[Cocoon]「pinit_main.js」を削除するには？（Pinterest）

Lighthouse Treemapで読み込まれている JavaScriptを見ていると、「」というコードが目に留まりました。これは、Pinterestでシェアするため画像選択処理を記述したスクリプトです。CocoonのSNSシェアの Pinterestが有効だと、フッターに「」の読込みが挿入されていました。 <?php //Pinterestシェアボタン用のスクリプト if (is_singular() && (is_top_pinterest_share_button_v...
2023.07.02 2023.08.21
SNSとりあえずのメモホームページ運用追記予定の話
[Cocoon] AMPとPWAをオフにした とりあえずのメモ

[Cocoon] AMPとPWAをオフにした

WordPressのテーマ、Cocoonのアップデートがあり、2.6.1になりました。興味深いのが、AMP・PWAが非推奨になったことです。Cocoon設定のAMPとPWA機能を非推奨化しました。AMP機能を有効化する（非推奨）PWAを有効化する（非推奨）これらは昨今のウェブ情勢を鑑みたところAMP・PWAを設定するメリットよりデメリットの方が上回ると考えられるからです。現時点で機能自体は利用できますが、後々に完全に廃止しようと思います。Cocoon 2.6.1公開。段落ブロ...
2023.06.14 2023.06.15
とりあえずのメモホームページ運用
[PHP] タグ一覧に件数を追加する（Cocoon） とりあえずのメモ

[PHP] タグ一覧に件数を追加する（Cocoon）

ショートコードで表示している、ブログの記事のタグ一覧に、「件数」を追加しました。「タグリンク」をタップしても表示される記事が少ないと、別のタグを探し直さないといけないからです。前回はこちら。「クリック率向上のために！WordPressで「タグ一覧」に「記事数」を追加する方法」のコードを元に、ショートコード用関数にするために echo の部分を return にして、文字列を返すようにします。// the_tags_with_count() の末尾echo $before . ...
2023.05.21 2024.04.21
とりあえずのメモプログラミングホームページ運用
[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】 とりあえずのメモ

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

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

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

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

[WordPress] テーマの更新があったので実行した

WordPressでは、更新情報が画面上や管理メニューの「更新」から確認できます。WordPress本体だけでなく、プラグインやテーマなども随時更新されているので、毎週のように何かしらの更新があります。更新するものを選択したら、「更新」ボタンを押すだけです。自動的に「メンテナンスモード」に以降し、完了すると戻ります。ちなみに、ごくまれに更新に失敗することがあります。私は一回経験しています。その場合、メンテナンスモードのままなので、サイトにアクセスなくなります。事前にバックアッ...
2023.03.28
とりあえずのメモホームページ運用
[Cocoon] ブログカードをラベルボックスのように表示するCSS プログラミング

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

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

[WordPress] 投稿月でグループ分けした月別PV集計表を見るためのカスタムプラグインを作った【ChatGPTと】

一ヶ月分のブログ公開がどれぐらいのページビューにつながっているのか、集計する自分用のWordPressプラグインを作成しました。自分にとっては未経験の分野でしたが、対話型AI「ChatGPT」に相談してみると、使える叩き台を用意してくれました。WordPressプラグインづくりははじめてでしたが、かなりの時間短縮。無事に完成しました。アクセス集計プラグイン一ヶ月分のブログ公開が、どれぐらいの成果になっているのか知りたいことがあります。これまでは、Google Analytic...
2023.03.18 2024.05.10
とりあえずのメモプログラミングホームページ運用
[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
とりあえずのメモプログラミングホームページ運用
[Cocoon] 表のデフォルトの枠線が黒になっている（style.min.css） とりあえずのメモ

[Cocoon] 表のデフォルトの枠線が黒になっている（style.min.css）

公開したブログ内の表の枠の色が、なぜか黒に変わっていました。原因は、「style.min.css」。この中に表（table）の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。サイトの表の枠の色がおかしい？表の枠の色が、WordPressの編集画面ではオレンジなのに、公開すると黒になっていました。どうも、デフォルトの色に戻ってしまっているようです。Cocoonの表の枠の色Cocoonでは、テーマで選んだ色（サイトキーカラー）がスタイルでまと...
2023.02.19 2023.03.25
とりあえずのメモプログラミングホームページ運用
[Cocoon] ラベルボックスの枠の色を修正した（gutenberg.php） とりあえずのメモ

[Cocoon] ラベルボックスの枠の色を修正した（gutenberg.php）

Cocoon バージョン: 2.5.7.4 に更新したところ、ラベルボックスの枠の色がおかしくなってしまいました。ラベルボックスの枠を「白」に設定していた箇所が、「黒」に表示されています。追記Cocoon バージョン: 2.5.7.5 で修正されました。（参考）更新後にラベルボックスの枠の色がおかしい？ | 不具合報告 | Cocoon フォーラムラベルボックスの枠とクラスを検証Chromeでスタイルを検証すると、「.has-white-border-color」なのに「va...
2023.02.19 2023.02.21
とりあえずのメモホームページ運用
[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php） とりあえずのメモ

[Cocoon] 各見出し後に「目次に戻る」リンクを追加した（functions.php）

ブログの中でもっともよくクリックされるのは、「目次」だそうです。各セクションに Cocoonの目次に対応した「戻る」ボタンを設置しました。参考サイトを元に、自分のブログに合うように一部修正しました。確かに、目次からサッと読みたいところを確認できるサイトは、とても便利ですよね。目次に戻るリンクを挿入するコードfunctions.phpに追加します。/** 自動で目次に戻るリンクを挿入 */add_filter('the_content', function($content) ...
2023.01.23 2024.05.12
とりあえずのメモプログラミングホームページ運用
[Cocoon] 記事の関連タグをサイドバーに表示した・その2（ショートコードにできた） とりあえずのメモ

[Cocoon] 記事の関連タグをサイドバーに表示した・その2（ショートコードにできた）

結論としては、the_tag_links() ではなく、get_the_tag_links()を呼べばよかっただけでした。以前の方法の問題点以前、記事の関連タグをサイドバーに表示するときに、ショートコードにできず、テキストウィジェットでPHPコードを実行する、という方法でむりやり解決していました。ただし、この方法はウィジェットを確認するたびに、ビジュアル表示になって「コードが評価」されててまうため、作り直しが必要でした。ウィジェットを確認するだけで壊れてしまうのです……その後...
2022.11.06
とりあえずのメモプログラミングホームページ運用
Cocoonで作った注目記事ランキングのショートコードを修正した とりあえずのメモ

Cocoonで作った注目記事ランキングのショートコードを修正した

Cocoonテーマのコードを利用して、自前の「注目記事ランキング」を作っていたのですが、更新によってエラーになってしまいました。改めて、コードを修正して直すことができました。サイトのPHPにエラーがある教室ホームページを見たら、ページにエラーが表示されて、レイアウトが崩れていることに気づきました。（2022年10月17日）。このサイトで重大なエラーが発生しました。WordPressのトラブルシューティングについては、こちらをご覧ください。このエラーは、WordPressサイト...
2022.11.04 2022.11.05
とりあえずのメモニッチな話題プログラミングホームページ運用
[WordPress] カテゴリーが更新されない？ とりあえずのメモ

[WordPress] カテゴリーが更新されない？

WordPressで記事のカテゴリーを増やしたら、投稿パネルの「カテゴリー」が更新されない、というケースがありました。カテゴリーを増やした別のPCからログインして、記事を編集しようとすると、記事編集画面のカテゴリーが以前のままなのです。カテゴリーの追加が反映されていません。設定から「カテゴリー」を表示すると、正しく表示されるのですが……どうもブラウザ（Chrome）にキャッシュが残っているようです。記事編集画面を更新しても戻りません。そこで、Chromeの設定から「Cooki...
2022.09.21
とりあえずのメモホームページ運用
[Cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】 とりあえずのメモ

[Cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】

スマホでブログを表示したときに、Amazonリンクの下にあるショップへのリンクボタンがちょっと大きすぎる気がしました。CSSで少し微調整していきます。リンクボタンを一列にまとめるまずは、縦に並んで画面を占有しているボタンを、一列にまとめます。flex-wrapをnowrapにして、一列にしwidthをautoにして、左揃えにしました。/** amazonリンクのモバイル表示を整理 */@media screen and (max-width: 834px) { .bookli...
2022.06.21 2024.09.05
とりあえずのメモインターネット小話プログラミングホームページ運用
次のページ