HTML

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

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

記事一覧ページのモバイル表示を改善するためにCSSを調整しました。サムネイル画像を左側に配置し、正方形にすることで視認性を向上させました。記事間の余白を増やし、背景色を変更することで各記事の区切りを明確にしました。記事一覧ページのサムネイルを大きくした記事一覧ページを見やすくしたいと思いました。そこで、サムネイル画像を左にして正方形にしました。記事一つ一つのかたまりを意識できるように余白も増やしました。記事一覧ページのHTMLタグの構造記事一覧ページのHTMLタグの構造は、#...

とりあえずのメモプログラミングホームページ運用

[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト（functions.php）

[WordPress]画像キャプションをalt属性を自動設定するカスタムスクリプト（functions.php）

WordPressの画像ブロックにおいて、キャプションをalt属性に自動設定するカスタムスクリプトを作成しました。このスクリプトは、figcaptionタグ内のテキストを優先的にalt属性に設定します。functions.phpに追加することで、画像のアクセシビリティを向上させることができます。画像のキャプションをalt文字列に活用したいWordPressの画像ブロックには、キャプションを付けることができます。画像にAlt文字列が設定されていないときに、もしキャプションがあれ...

とりあえずのメモプログラミングホームページ運用

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

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

:not(::first-line)は無効になるtitle-listクラスのリスト要素（li）の各一行目を太字にしています。このCSSセレクタは、.title-list li::first-line 二行目以降にスタイルを設定したいと思いました。一見、::first-line 擬似要素を :not() 否定擬似クラスに入れれば、リスト項目の最初の行以外を選択するセレクタになりそうです。.title-list li:not(::first-line) しかし、これはうまくいきま...

とりあえずのメモプログラミングホームページ運用

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

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

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

2024.05.13 2024.08.19

とりあえずのメモプログラミング

[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

Cocoonテーマの「ブログカード」を使ってYouTube動画を埋め込んでいるのですが、たまに外部ブログカードとして表示されてしまうことがあるんです。原因を調べてみると、YouTubeで公開前処理が終わる前に埋め込み動画を設置したことや、URL貼付け時に「リンク」に自動変換されていることが関係しているようです。埋め込み動画を設置するには、YouTube上で閲覧可能になるまで待って、URLに付いたリンクを削除する必要があります。ブログカードで動画を埋め込んでいるブログ内にYou...

2024.04.10 2024.04.14

とりあえずのメモトラブルと対処ホームページ運用

Googleドキュメントに感じる「ハイパーカード的なもの」（リンク型データ管理）

Googleドキュメントに感じる「ハイパーカード的なもの」（リンク型データ管理）

Googleドキュメントなどを使っていると、情報管理方法が根本から変わってきたことを感じます。関連するファイルをフォルダでまとめて送らなくても、「@」のリンクだけで共有できるからです。従来の「フォルダ」によるファイル整理だけでなく、クラウドとリンクによるデータ管理に意識を切り替えていく必要がありますね。リンクでつなぐ情報の世界Google Workspaceなどでは、文書、スプレッドシート、プレゼンテーションなど、異なるタイプのファイルを相互にリンクできます。関連する情報同士...

とりあえずのメモクラウド作業効率化

急に Google Search Console にアクセスできなくなった？【プロパティのアクセス権】

急に Google Search Console にアクセスできなくなった？【プロパティのアクセス権】

トップページの Googleタグマネージャーのスクリプトを停止したために、Google Search Console でのサイトの所有権の再確認が必要になりました。今回はサイト内に確認用HTMLファイルを設置する方法にしました。サイトの所有権がわからなくなったGoogle Search Consoleにアクセスしようとしたら、エラーになりました。このプロパティへのアクセス権がありませんログイン中のアカウント：〜@gmail.comプロパティ：https://〜.com/この...

とりあえずのメモアカウントトラブルと対処ホームページ運用

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

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

2023.07.02 2023.07.09

とりあえずのメモホームページ運用追記予定の話

[WordPress] 遅延読込みのせいで印刷時に画像が消えていた（loading=”lazy”, decoding=”async”）

[WordPress] 遅延読込みのせいで印刷時に画像が消えていた（loading=”lazy”, decoding=”async”）

ブログを冊子印刷にして配布しているのですが、一部の画像が印刷されていないことがあります。画像の遅延読込みで失敗しているようです。WordPress によって自動的に付加される「loading=”lazy”」「decoding=”async”」を消すよう、functions.php を編集しました。add_filter( 'wp_lazy_loading_enabled', '__return_false' );add_filter('wp_img_tag_add_decod...

2023.06.29 2023.06.30

とりあえずのメモプログラミングホームページ運用

MRIやCTの画像ディスクをパソコンで見るには？【DICOMの閲覧】

MRIやCTの画像ディスクをパソコンで見るには？【DICOMの閲覧】

病院で画像診断のディスクをもらいました。パソコンに入れたところ、「このディスクに対して行う操作を選んでください」と表示されています。どうすればいいのでしょうか？Windows PCなら、同梱されている専用ビューワ「AOC Stackato」で画像データを閲覧できます。CD-ROMの自動再生「AOC_Stackato の起動」というのは、CD-ROM内の自動再生プログラムです。プログラムの表示を見ると、「専用ビューワ（AOC Stackato）」か「Webブラウザ」で画像診断デ...

Windowsとりあえずのメモインターネット小話セキュリティパソコン基礎知識相談と回答

ブラウザはインターネット以外のHTMLも読み込める

ブラウザはインターネット以外のHTMLも読み込める

Chomeや Edgeなどの「インターネット・ブラウザ」は、「インターネットを見るもの」だと思われています。しかし、それだけでなくパソコンや CDなどに保存されている HTMLファイルを読み取るのにも使われます。HTMLファイルは、文章に加えて画像やリンクを挿入できる「ハイパーテキスト」。例えば、プログラムの説明書や健康診断の結果などいろんな場面で利用されることがあります。HTML「HTML」は、「HyperText Markup Language」の略です。文章を「タグ」...

2023.04.28 2023.04.30

Windowsとりあえずのメモインターネット小話冊子テキスト

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

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

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

2023.04.09 2023.07.03

SNSとりあえずのメモプログラミング

無料ホームページの2つのやり方【HTMLサーバとCMS】

無料ホームページの2つのやり方【HTMLサーバとCMS】

ホームページを作ってみたいのですが、無料でできますか？無料ホームページ作成には、2つの種類があります。無料のレンタルサーバとCMSです。xfreeとJimdoを例に、それぞれの利点・注意点を確認してみましょう。HTMLサーバとCMSの違いxfreeと Jimdo は、どちらもウェブサイトを作成するための無料サービスです。しかし、ホームページの作り方に大きな違いがあります。▶ xfree は「レンタルサーバ」で、▶ Jimdo は「CMS（コンテンツ管理システム）」だからです。...

#PR含むホームページ運用相談と回答

「メタバース」とは？【3D空間のゲーム以外の使い方】

「メタバース」とは？【3D空間のゲーム以外の使い方】

「メタバース（metaverse）」は、「ネットワークにつないだ3D空間」のことです。3Dゲーム内で遊ぶだけでなく、コミュニケーションや作業領域として活用することが想定されているのがポイントです。3D空間上で遊んだりするゲームは、すでにたくさんあります。これまで3D処理は、カクカクして重かったですが、技術の進歩でだいぶスムーズになってきました。ボタン１つで3D空間に入れるようになれば、コミュニケーションや仕事の「場所」として普及するかもしれません。子どもたちの様子を見ると、す...

2022.05.28 2023.04.09

ニュースから考えるミニ用語辞典

BASEのショップデザインを変えたい【デザインとHTML編集】

BASEのショップデザインを変えたい【デザインとHTML編集】

BASEでショップデザインを変えるには、「デザイン」の「ショップデザイン」ー「テーマ」からフォントや色を変更することができます。出典：HTML編集 | BASE Appsもっと細かく変更したい場合は、やや専門的な知識が必要になります。「HTML編集」Appをインストールすると、内部のHTMLを編集することができます。公式サイトBASE こちらもどうぞ参考HTML編集 | BASE Apps【解説】テーマ別！ショップデザイン切り替えガイド - BASE U｜ネットショップの開設...

インターネット小話ホームページ運用

SBI証券の指値注文で価格が入力できない【パスワード管理とinputのtype属性】

SBI証券の指値注文で価格が入力できない【パスワード管理とinputのtype属性】

ネットで株を購入しようとして価格を入力しようとすると、「次のアカウントで続行」という画面が表示されるんだけど、どうしたらいい？スマホのChromeブラウザで、SBI証券にログインしたところ、指値注文の価格の入力で、うまく進みませんでした。今回は、ブラウザのパスワード保存機能と、HTMLの入力欄の仕組みについて、見てみましょう。ポイントブラウザがパスワード入力欄を認識すると、記録しているパスワードを選択肢に表示する。不要な場合は、下にスライドして非表示にする。HTML5では、...

2021.11.27 2023.12.27

アカウントインターネット小話スマホ基礎セキュリティ

macのエディタでmiをインストールした話

macのエディタでmiをインストールした話

わたしは、文章をメモするときにテキストエディタを利用しています。起動が早いからです。テキストエディットはプレーンテキストのエディタではないところが、macのデフォルトのテキストエディタは、「テキストエディット」は、起動すると「ファイルを選ぶ画面」が表示されます。すぐに白紙が表示されないんですね。しかも、ファイル形式は「リッチテキスト形式」になっています。軽快にプレーンテキストを編集したい、という用途のアプリではないようです。メモアプリでもいいけれど……「メモ」アプリでもよい...

ニッチな話題パソコン基礎知識

「ARで動く年賀状」のしくみ？【ARとかQRとか】

「ARで動く年賀状」のしくみ？【ARとかQRとか】

「AR動く年賀状……？」近江印刷株式会社さま（omi-in.co.jp）の近江タイムス（第1248号、令和2年11月5日（木）発行）に掲載された広告が目に留まりました。「ARで動く年賀状」、なにやらワクワクする内容ですよね。楽しかったので、AR年賀状のしくみとウェブページの進化について、紹介したいと思います。ARで動く年賀状とは？「ARで動く年賀状」って何でしょう？「しくみ」としてはまず、年賀状に特別なQRコードを印刷しておきます。そのQRコードをスマホで読み取ると、画面の中...

2020.11.09 2020.11.10

インターネット小話スマホ基礎

WP ULikeプラグインがAMPページでうまく表示されない [WordPress]

WP ULikeプラグインがAMPページでうまく表示されない [WordPress]

WP ULikeプラグインは、WordPressに「いいね」ボタンを設置するプラグインです。通常ページではこのようにハートマークのいいねボタンが表示されます。ところが、AMPページだと……0の隣の小さな白い丸になってしまっています。このハートマークは、CSSの:after 擬似クラスで背景画像として表示されています。ところが、AMPページでは:after擬似クラスが使えないため、何も表示されていないのです。いったんWP ULikeプラグインは無効にしました。残念。こちらもどう...

2020.09.17 2021.10.24

ニッチな話題ホームページ運用

AMPエラー HTML タグに必須属性がありません。- formとJavaScript

AMPエラー HTML タグに必須属性がありません。- formとJavaScript

ブログ記事の中にフォームを入れていたら、AMPエラーになりました。カスタムHTMLを使うとよくAMPエラーになりますね。足りなかったのは、formタグのtarget属性でした。formタグの説明では特に見かけなかったんですが、必須属性なんですね。今回のコードでは、javascriptの関数を動作させるためのボタンを配置するためにフォームを作りました。特にデータをサーバーに送るものでもなかったので、formのプロパティを指定していなかったのが、よくなかったようです。こちらが参考...

2020.09.16 2021.10.24

ニッチな話題ホームページ運用

自分のイラストをgoogleの画像検索のクリエイティブ・コモンズに表示させるには

自分のイラストをgoogleの画像検索のクリエイティブ・コモンズに表示させるには

画像検索の「クリエイティブ・コモンズ」の結果ってあんまりパッとしないよね！（失礼）Googleの画像検索はとても便利ですが、検索されたイラストを利用するためにはライセンスを確認する必要があります。画像検索ではライセンスによる絞り込みができるのですが、画像の数が少ないからか、検索キーワードに関係ない画像ばかりが表示されるのが現状です。逆にいうと、ここはまだブルーオーシャンで、もし有用な画像素材を登録すればひと目につくのではないか、と考えました。さて、いったいどうすれば、「クリエ...

2020.09.10 2020.09.23

ニッチな話題ホームページ運用

Wordはもう古い？文書作成にMarkdown（マークダウン）記法を使うメリット

Wordはもう古い？文書作成にMarkdown（マークダウン）記法を使うメリット

文書をWordで書くケースは多いですが、機能が多すぎたり立ち上がりが遅かったり、逆に使いにくいと感じることもありませんか。この記事では、文書作成をスムーズに進めるためのMarkdown記法とエディタについて解説します。Wordで文書を作るときに感じる不満あなたは長い文章を書くときに何のソフトを使っていますか。多くの人はビジネス文書の作成に Word を使っているのではないでしょうか。しかし、Wordは長い文章を書くのにあまり効率的でないと感じることはありませんか？起動に時間...

2019.10.12 2024.03.11

Word・Excelなどパソコン基礎知識