CSS

[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
とりあえずのメモホームページ運用
ウェブサイトの左下に動画広告が出てきたけどクリックして大丈夫？【オーバーレイ広告】 とりあえずのメモ

ウェブサイトの左下に動画広告が出てきたけどクリックして大丈夫？【オーバーレイ広告】

iPhone で情報サイトをみていたら、左下に広告動画（？）が表示されました。動画の停止ボタンをクリックしたのですが、この操作は大丈夫だったでしょうか？クリックしないで広告自体をスルーした方がよかったかと、ちょっと心配になりました。画面上に勝手に広告動画が出てくるので、「サイト乗っ取り」かと心配になりますが、これはただのネット広告。情報サイトと提携しているネット広告代理店による「オーバーレイ広告」が表示されているだけなのです。煩わしい広告ではありますが、通常 クリックしたから...
2023.02.11 2024.02.15
とりあえずのメモインターネット小話プログラミングホームページ運用冊子テキスト相談と回答
[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
とりあえずのメモインターネット小話プログラミングホームページ運用
[CSS] 記事一覧画面をスッキリさせた とりあえずのメモ

[CSS] 記事一覧画面をスッキリさせた

記事一覧のページで、記事ごとにオレンジ色の枠で囲んであるのが、ちょっとうるさい気がしたので、CSSを修正しました。/** 記事一覧画面をスッキリさせた*/ .list.ecb-entry-border .entry-card-wrap{ border-color: #e9e9e9; border-width: 0px; border-bottom-width: 1px; margin-bottom:20px; }.entry-card-content { padding-bo...
2022.05.18 2024.08.30
とりあえずのメモプログラミングホームページ運用
[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした とりあえずのメモ

[note風スタイル] モバイルサイトでのアイキャッチ画像を横一面にした

noteサイトの記事レイアウトを参考に、アイキャッチ画像の余白をなくすことにしました。まず、メイン全体の余白（padding）をなくしてから、記事要素に余白（margin）を追加しました。/** モバイルサイトでアイキャッチの写真を横一面にする*/@media screen and (max-width: 1023px) { main.main { padding-right:0px; padding-left:0px; } .entry-content, .entry-fo...
2022.05.18
とりあえずのメモプログラミングホームページ運用追記予定の話
[Cocoon]モバイルサイトフォントを17pxに変更した とりあえずのメモ

[Cocoon]モバイルサイトフォントを17pxに変更した

これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。１行あたりの文字数は、表示するスマホによって異なりますが、自分のスマホ（Pixel 5：1080x2340）で確認すると、18文字になりました。このフォントサイズを選んだのは、「note 」や「ほぼ日刊イトイ新聞」などの読みものメインのサイトを参考にしました。以前に、糸井重里さんが、...
2022.05.18
とりあえずのメモホームページ運用
[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた プログラミング

[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた

ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。特に、このホームページでは、多くのアイコンリスト、ラベルボックスを「枠なし」「薄い背景色」で設定しています。印刷時に、背景色がなくなってしまうと、構造がわかりにくくなってしまうのです。そこで、設定した背景色をもとに、枠（濃いめ）をつけるようにしました。WordPre...
2022.03.27
プログラミングホームページ運用
[CSS] ブログの印刷時のフォントをUDフォントにした プログラミング

[CSS] ブログの印刷時のフォントをUDフォントにした

パソコンでの文書作成用に「BIZ UDフォント」をパソコンに入れたのですが、ブログの印刷時のフォントでも活用したいと思います。ただし、印刷時だけで、通常のパソコンやスマホの画面で表示するときには、デフォルトのフォントのままにします。ウェブフォントを利用すると、表示に時間がかかってしまうからです。利用可能なフォントファイルを用意するまず、フォントファイルをPCに用意します。利用したフォントは、「SIL Open Font License (OFL)」というライセンスで、CSSに...
2022.03.27
プログラミングホームページ運用
[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】 インターネット小話

[CSS] ウェブページの印刷時に一番上の画像と文字が重なった【display:inlineとblock】

教室ブログを印刷をしてみると、なぜか印刷が重なってしまうページがありました。すべてのページではなく、特定の記事だけで起こりました。・保護者の「承認」がないとアプリをインストールできないようにするには？【Google ファミリーリンク】 – スマホ教室ちいラボプリンタの問題ではなかったはじめは、プリンタが用紙の読み込みに失敗して、二重に印刷してしまったのか、と思ったのですが、よく見ると違います。印刷プレビューでも文字が重なっているのです。ページ切替えの一番上に画像があったときに...
2021.12.23
インターネット小話プログラミングホームページ運用
[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio] ニッチな話題

[CSS]ブログカードの画像のアスペクト比を変更した[object-fit, aspect-ratio]

これまで一行で表示できるタイトル文字数が少なくて、タイトルが長くなると読みにくいことが気になっていました。ブログカードのデザインを少し変更しました。そこで、まず画像のアスペクト比を変更したり、文字のサイズを少し小さくして、タイトルを長めに取れるようにしました。CSSで自動的に画像のアスペクト比を変えて、トリミングすることができました。img{ object-fit:cover; aspect-ratio: 100/100;}また、ドメイン名の色を変更することで、タイトルと区別...
2021.11.05 2021.11.06
ニッチな話題ホームページ運用
[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】 プログラミング

[WordPress] ブログ記事に印刷用のQRコードを追加する【Google APIs】

ポイントQRコードはGoogle APIsで自動生成できる。WordPressの記事URLは、<?php the_permalink(); ?>で出力できる。functions.phpでは「get_the_permalink()」で文字列を取得できる。ウィジェットは印刷されないので、関数で本文末尾に追加する。【追記：2024-05-09】Google APIsのQRコード生成は終了したので、代替サービスを利用します。Google APIsでQRコードを生成するウェブページには...
2021.10.23 2024.05.09
プログラミングホームページ運用
【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】 インターネット小話

【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

ウェブサイトのアクセス解析に Googleアナリティクス を使っていますが、単体では外部サイトへのクリック数を計測できません。通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナにはクリックURLの 組み込み変数がなく、頓挫していました。前回はこちら。約１年前ですね。通常ページだけでも、傾向を掴むことはできるのですが、やはり外部リンクへのクリックの実数を確認しておきたいと思い、改めて挑戦しました。WordPressのfunct...
2021.10.16 2023.07.10
インターネット小話プログラミングホームページ運用
どうして Windows XP でインターネットに接続できないの？【JWordプラグインが破損】（Let’s note CF-W7の場合） インターネット小話

どうして Windows XP でインターネットに接続できないの？【JWordプラグインが破損】（Let’s note CF-W7の場合）

家のパソコンをインターネットにつなごうとしたら、「プラグインが破損」というメッセージが表示されて進まないの。どうしてなのかな？よく、「古いパソコンはセキュリティの問題があって、インターネットにつないではいけない」と言われますが、なんか腑に落ちないですよね。今回は、Windows XP パソコンでインターネットに接続できなかった事例をもとに、実際にどんな問題点があるのか、みてみましょう。ポイントJWord プラグインは、サービス終了しているので、アンインストールする。Inter...
2021.10.02 2023.04.15
インターネット小話パソコン基礎知識
AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾） ニッチな話題

AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾）

cocoonのAMP機能で生成しているCocoonテーマのAMP設定でAMPページを生成しています。通常ページとAMPページの差デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。ヘッダーロゴが大きい。画面を圧迫しているモバイルメニューがない。検索からの流入が他のページに移動しにくい。そこで、メニューを追加したいと思います。ウィジェットにナビゲーションメニューを追加まずは、ウィジェットでナビゲーションメニューを追加します。ただ、このままだとメニュー...
2021.03.27
ニッチな話題ホームページ運用
Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？） インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？）

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。これも、note風スタイルの一環ですね。大きな字で見やすいタイトルと正方形のアイキャッチアイキャッチ画像より、タイトル文に目がいくようにする意図で、変更しました。常に左から読んで行けるほうが、目にラクな気がします。といって、そこまでブログ一覧はアクセスがないんですが……笑CSSCSSはこんな感じです。display: flexで下位の要素の順番（order）を変更できるようにしています。/** ...
2021.03.22 2024.08.30
インターネット小話ニッチな話題ホームページ運用
Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】 インターネット小話

Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。遅延表示による画面のガタツキ検索バーには、Googleのカスタム検索を利用しています。サイドバーの検索ボックスの遅延表示でズレるこのように、ウェブページの画面が、後から表示される要素によってズレることを「CLS（Cumulative Layout Shift：累積的な割付の変移）」といいます。div要素のheight属性ではうまくいかずスクリプトが非同期処理で読み込まれるので、...
2021.03.22 2023.07.17
インターネット小話ニッチな話題ホームページ運用
[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう ニッチな話題

[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう

読んでいる文章をずらされると腹が立つだろう。だから、そういうページは直した方がよい。さて、どうやって？　という話。CLS（累積レイアウト変更）とはウェブページはあとから画像が表示されると、下にある文章がずれます。これを「累積レイアウト変更（CLS：Cumulative Layout Shift）」といいます。広告が多いページだと気になるのよねーユーザーの利便性が大事Googleサーチコンソールでは、このようなレイアウトのずれを指摘してくれます。CLSに関する問題：0.25超（...
2021.01.04 2023.07.03
ニッチな話題ホームページ運用
miエディタでCSSの見出し表示をする ニッチな話題

miエディタでCSSの見出し表示をする

miエディタにしたのは、そろそろCSSを整理しようと思ったからです。いろんなスタイルを継ぎ足していったので、重複や記述方法のばらつきがあって、ちょっと見直したくなってきました。そのために必要なのが、エディタの「見出し表示」機能。miの見出しの指定方法をレポートします。モードをCSSにするまずは、テキストのモードを選びます。初期値は「標準」なので、画面上のメニューから「CSS」を選びます。これで、構文に合わせてコードに色付けされます。見出しの設定そのままでは見出しリストは空っぽ...
2020.12.23 2022.07.31
ニッチな話題パソコン基礎知識
次のページ