とりあえずのメモ[CSS] 印刷時にラベルボックスの一部だけが別のページになるのをどうにかしたい
メモ。 ラベルボックスの見出し ラベルボックスの内容 こんな感じで、ラベルボックスのラベル部分と内容部分が別のページに印刷されてしまうのが気になります。 たぶん、CSSのpage-breakみたいなのがあった気がする。
CSS
とりあえずのメモ
とりあえずのメモ[Cocoon] モバイルフッターメニューをなくしたのでCSSを減らした
以前に、モバイルフッターメニュー（共有ボタンやいいねボタン）を作ったときにスタイルを追加していました。 その後、Google AdSenseのフッター広告と重なるので削除していました。 ただ、style.cssにそのときのスタイルが残ってい...
とりあえずのメモ[CSS] AdSense広告のCLSを改善した
AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。 /** 広告のCLS 改善 * */ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280p...
とりあえずのメモ[PSI] サイトロゴの画像サイズを最適化した 「画像要素で width と height が明示的に指定されていない」（片方だけでは暗黙）
PageSpeed Insights（PSI）の減点項目に「画像要素で width と height が明示的に指定されていない」としてヘッダーのサイトロゴがありました。 これまで ヘッダーのロゴとモバイルヘッダーメニューのロゴは、高さだけ...
とりあえずのメモスクリプトとスタイルの遅延読込みのしかた[PSI]（WordPress）
CSSは、とりあえずCocoonの「CSS縮小化」で除外できました。 jqueryは、wp_enqueue_script でフッター読込みに変更しました。 レンダリングを妨げるリソース 久々に PageSpeed Insights（PSI）...
とりあえずのメモ[PHP] jetpack.cssを無効化する
Jetpackプラグインを有効にすると、CSSとJavaScriptが読み込まれます。 /wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.0 これを無効にします。 /** Jetpack...
とりあえずのメモ[PHP] 不要なCSS/JavaScriptを無効化する（wp_dequeue_style, wp_dequeue_script）
トップページで読み込まれているスタイル・スクリプトの中から、不要なものを削減しました。 項目変更前CSS/JS減パフォーマンス7071使用していないJavaScriptの削減0.40s0.60s使用していないVSSの削減0.35s0.45s...
とりあえずのメモ[CSS] ブログの文字詰めを微調整した【letter-spacing と font-feature-settings】
ちいラボでは、なるべく「文字が見やすい大きさ」に設定しています。しかし、自分のスマートフォンで閲覧すると、一行の文字数が少ないために、改行が多すぎる気もしています。 そこで、文字の大きさをそのままに、「文字詰め」を狭めてみることにしました。...
とりあえずのメモ[CSS] 幅とパディングの関係【box-sizing】
HTML要素の幅を固定して、パディングを内側に取りたいときには、「box-sizing」プロパティでborder-boxに指定します。 固定ヘッダーとサイドバーが重なって幅が取れない ウェブページに固定ヘッダーを作ろうと思いました。位置を ...
とりあえずのメモ[Cocoon] ソースコードハイライトが反映されない？【CSSセレクタ】
なぜか、Cocoonのテーマ設定のソースコードが反映されませんでした。CSSセレクタを設定し直したら、うまく動きました。 highlight.jsが動作しない Cocoonテーマには、ソースコード ハイライト機能があります。これは、high...
とりあえずのメモ[WordPress]記事ごとの平均PVを集計するサブメニューを自作プラグインに追加した
どんな記事が安定して読まれているのか把握するために、平均PVを調べたいと思いました。前回作った月別ページビュー集計の自作プラグインに追加します。 前回はこちら。 管理ページにサブメニューを追加する（add_submenu_page） 最終的...
SNS【未解決】埋め込んだTwitterのフォントサイズを小さくしたい（けど、いったん断念）[WordPress]
ただ、ツイートの埋め込みの文字サイズを本文に揃えたいだけなのに、めちゃくちゃ大変……。 Twitterのツイートは、「ツイートを埋め込む」からコードを表示して、HTMLに埋め込むことができます。ところが、枠の幅や文字サイズなどは、ウェブサイ...
とりあえずのメモ[WordPress] 脚注のプラグインを入れてCSSを変更した【Easy Footnotes】
脚注のプラグインを入れました。定番の「Easy Footnotes」です。 脚注のメリットは、根拠を添えておけることだよね。 Easy Footnotesのショートコード（efn_note） 「Easy Footnotes」は、プラグインの...
とりあえずのメモ[CSS] 印刷用のラベルボックスの枠線の色を渋めにした
ラベルボックスなどは、ディスプレイ上では薄い背景色で表示しています。しかし、そのまま印刷するとインクがにじみやすいので、枠線のみにしています。 Cocoonのテーマ色をもとに、グレー、青、緑、黄、赤 に対応する、渋めの色リストを作りました。...
プログラミング[Cocoon] ブログカードをラベルボックスのように表示するCSS
カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。 記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。 ブログカードでは、スニペットという概要を表示できます。用語と説明を小さ...
とりあえずのメモ[CSS] ブログの記事一覧をInstagramっぽくしたい（いったん断念）
ひとこと日記のアイキャッチ画像を、Instagramのように大きく表示できるようにしたいと思いました。 カスタムHTMLウィジェットでスタイル設定 カスタムHTMLのウィジェットで、styleを追加すると、特定のページにスタイルを追加できま...
とりあえずのメモ[Cocoon] 表のスタイルで縦線をなしにした【横線のみのtable】
最近は、表のデザインで、縦の枠線を付けないことが多いようです。 Spotifyの「支払いに問題がある」？【クレジットカード情報の更新】より 確かに、スッキリした印象になります。 ブログ内の表を CSS を変更してみました。 「border-...
とりあえずのメモ[Cocoon] 表のデフォルトの枠線が黒になっている（style.min.css）
公開したブログ内の表の枠の色が、なぜか黒に変わっていました。 原因は、「style.min.css」。この中に表（table）の枠線の色のスタイルがあるのですが、これが Cocoonのスタイルと競合しているのです。 サイトの表の枠の色がおか...
とりあえずのメモ[Cocoon] ラベルボックスの枠の色を修正した（gutenberg.php）
Cocoon バージョン: 2.5.7.4 に更新したところ、ラベルボックスの枠の色がおかしくなってしまいました。 ラベルボックスの枠を「白」に設定していた箇所が、「黒」に表示されています。 追記 Cocoon バージョン: 2.5.7.5...
とりあえずのメモウェブサイトの左下に動画広告が出てきたけどクリックして大丈夫？【オーバーレイ広告】
iPhone で情報サイトをみていたら、左下に広告動画（？）が表示されました。動画の停止ボタンをクリックしたのですが、この操作は大丈夫だったでしょうか？クリックしないで広告自体をスルーした方がよかったかと、ちょっと心配になりました。 画面上...
#PR含む[cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】
スマホでブログを表示したときに、Amazonリンクの下にあるショップへのリンクボタンがちょっと大きすぎる気がしました。 CSSで少し微調整していきます。 リンクボタンを一列にまとめる まずは、縦に並んで画面を占有しているボタンを、一列にまと...
とりあえずのメモ[CSS] 記事一覧画面をスッキリさせた
記事一覧のページで、記事ごとにオレンジ色の枠で囲んであるのが、ちょっとうるさい気がしたので、CSSを修正しました。 /** 記事一覧画面をスッキリさせた*/ .list.ecb-entry-border .entry-card-wrap{ ...
とりあえずのメモ[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした
noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。 まず、メイン全体の余白（padding）をなくしてから、記事要素に余白（margin）を追加しました。 /** モバイルサイトでアイキャッチの写真を横一...
とりあえずのメモ[Cocoon]モバイルサイトフォントを17pxに変更した
これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。 そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。 １行あたりの文字数は、表示するスマホによ...
プログラミング[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた
ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。 これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。 特に、このホームページ...