ニッチな話題

WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】 ニッチな話題

WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。ウィジェットとしてPHPコードを実行したいと思います。追記（2024-07-20）任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。カスタムHTMLではPHPコードは実行できないまず試したのがウィジェットの「カスタムHTML」です。しかし、「<?」で始まるタグはエラーになってしまいます。Special characters must be es...
2020.09.22 2024.07.20
ニッチな話題プログラミングホームページ運用
タイトル見出しにアニメーションをつけてみた 【CSS animation】 ニッチな話題

タイトル見出しにアニメーションをつけてみた 【CSS animation】

タイトル見出しを大きく表示するようにしたので、アニメーションで表示するようにしてみました。基本的なアニメーション部分の構造をみる見出し全体のフェードインと、上下の線の伸びるエフェクトの２つが組み合わせています。CSSの中でフェードインの部分だけを抜き出してみます。/* 見出しをフェードイン */h1.entry-title { animation: title-fade-in 0.5s ease 0.8s 1 normal running forwards;}@keyfram...
2020.09.19 2020.11.09
ニッチな話題ホームページ運用
見出しに吹き出しをつけるスタイルをやめた ニッチな話題

見出しに吹き出しをつけるスタイルをやめた

見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。こんな見た目でした/** 見出しに吹き出しをつける */@media screen { #container h2 { position: relative; padding: 0.6em 1em !IMPORTANT; } #container h2:not(.entry-card-title):not(.related-entry-heading):after { position: absolute...
2020.09.19 2021.10.24
ニッチな話題ホームページ運用
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
ニッチな話題ホームページ運用
「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS] ニッチな話題

「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]

プログラミングには論理演算というのがあって、条件を組み合わせることがよくあります。条件を組み合わせたい（論理積）ことは多い例えば、擬似コードですが、if(day ≠ "日" ∧ day ≠ "土") return 営業else return 休日このような２つの条件、Aでもなく、Bでもない、という書き方をすることがあります。CSSではどうすればよいのでしょうか？否定擬似クラス:notを組み合わせる否定擬似クラス:notがありますが、複数組み合わせる場合は実はつなげて書きます。...
2020.09.17 2024.06.12
ニッチな話題ホームページ運用
AMPエラー HTML タグに必須属性がありません。- formとJavaScript ニッチな話題

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

ブログ記事の中にフォームを入れていたら、AMPエラーになりました。カスタムHTMLを使うとよくAMPエラーになりますね。足りなかったのは、formタグのtarget属性でした。formタグの説明では特に見かけなかったんですが、必須属性なんですね。今回のコードでは、javascriptの関数を動作させるためのボタンを配置するためにフォームを作りました。特にデータをサーバーに送るものでもなかったので、formのプロパティを指定していなかったのが、よくなかったようです。こちらが参考...
2020.09.16 2021.10.24
ニッチな話題ホームページ運用
CSSのクラス指定の空白の意味 知っていますか？子孫結合子と除外の方法 ニッチな話題

CSSのクラス指定の空白の意味 知っていますか？子孫結合子と除外の方法

CSSのクラス指定が複雑になったときの意味を調べてみました。散々、迷って出来上がったCSSのコードは以下です。.article :not(div.toc-content) li { font-size: 115%; font-weight: 600;}意図としては、「記事（.articleクラス）の中のリスト項目のフォントサイズを大きくする、ただし、目次（toc-contentクラス）のリスト項目のフォントサイズは大きくしない」です。これは3つの要素が組み合わせてあります。....
2020.09.16 2020.09.21
ニッチな話題ホームページ運用
[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】 ニッチな話題

[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】

Cocoonテーマのブログカードをはてなブログ風のデザインに変更する方法を紹介します。functions.phpファイル内のurl_to_internal_blogcard_tag関数を修正して、ブログカードの要素の表示順を変更します。ブログロゴを上部に移動させ、CSSで抜粋のフォントサイズなどを調整することで、目的のデザインを実現できます。
2020.09.15 2024.08.08
ニッチな話題ホームページ運用
目で見てわかる、こんな暗証番号がよく使われている 【危険な暗証番号のパターン】 インターネット小話

目で見てわかる、こんな暗証番号がよく使われている 【危険な暗証番号のパターン】

暗証番号に誕生日や生年を使用する人が多いことは、研究でも明らかです。特徴的な数字や2桁の繰り返しパターンも頻繁に使用されており、セキュリティリスクが高いです。安全性を高めるには、ランダムな数字を選ぶことが推奨されます。4桁の時点で何回も挑戦できたら、いずれはわかってしまうよね。まぁ、4桁のPINコードを採用するシステムでは、何度か失敗したら次の試行まで時間が空けられることも多いので、そうそう総当たり攻撃はできないはずですが。11人に1人が誕生日を暗証番号にしている？暗証番号に...
2020.09.14 2024.08.13
インターネット小話ニッチな話題
とりあえず今の追加CSSをバックアップしておく（2020年9月11日現在） ニッチな話題

とりあえず今の追加CSSをバックアップしておく（2020年9月11日現在）

いろいろスタイルを設定したので、ここまでの「追加CSS」の中身をここにメモしておきます。それぞれの機能について、ブログで説明しているページがあればリンクも貼っておきます。ブログのデザインを練り上げている過程が全部わかる！改めてみるとコードの重複があったりするので、ちょっと整理したほうが良さそうですね。追加CSS全体（2020年9月11日現在）長いのでこちら/*** 印刷時のフォント*/@media print { p { font-family: 'Noto Serif JP...
2020.09.11 2024.08.08
ニッチな話題ホームページ運用
自分のイラストをgoogleの画像検索のクリエイティブ・コモンズに表示させるには ニッチな話題

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

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

ないものは作ってみる、ちいラボで作った公開イラスト（クリエイティブ・コモンズ）

インターネットでフリーイラストを探して、なかったのでクリエイティブ・コモンズライセンスで公開します。ご自由にお使いください。銀行の確認番号表 銀行の確認番号表イラスト この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。銀行のワンタイムパスワード生成器銀行のワンタイムパスワード生成器のフリーイラスト この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。Keynoteの図...
2020.09.09 2020.09.25
インターネット小話ニッチな話題ホームページ運用
Dokuwikiをアップグレードしたら動かなくなった「Fatal error: Class ‘Doku_Handler_Quote’ not found 」（markdowkuプラグイン） とりあえずのメモ

Dokuwikiをアップグレードしたら動かなくなった「Fatal error: Class ‘Doku_Handler_Quote’ not found 」（markdowkuプラグイン）

DokuWikiを「2018-04-22c Greebo」 から「2020-07-29 Hogfather」にアップグレードしました。すると、エラーが表示されてシステムにログインできなくなってしまいました。今回は、ニッチな話ですが、dokuwikiのアップグレードについて書いてみます。表示されたエラー：Fatal error: Class 'Doku_Handler_Quote' not foundDokuWikiのアップグレードの通知があったので適用しました。その後ログイン...
2020.08.21 2024.03.16
とりあえずのメモニッチな話題ホームページ運用作業効率化
[Windows10] ディスクの利用率が常に50%？ 【mountvolコマンドでアンマウント 】 #PR含む

[Windows10] ディスクの利用率が常に50%？ 【mountvolコマンドでアンマウント 】

ある日、突然パソコンの動きが悪くなる。仕事で利用している場合、想像するだけでも恐ろしいですよね。今回、Windows 10のパソコンが急に動作が遅くなったので、原因を調べてみました。パソコンの不調の理由はさまざまですが、同様のケースの参考になれば、嬉しいです。環境：2018年製 Windows10 マウスコンピュータ（MB-B504HS-A）タスクマネージャでディスクアクセスを確認する最近Windowsパソコンが急に遅くなる原因の第一位（体感）は、Windows Update...
2020.08.20 2023.09.22
#PR含むいろんな周辺機器ニッチな話題パソコン基礎知識
Macで写真を回転するなら…　知っておきたいショートカット（⌘+L, ⌘+R） ニッチな話題

Macで写真を回転するなら…　知っておきたいショートカット（⌘+L, ⌘+R）

スマートフォンで撮ったたくさんの写真ですが、整理するならパソコンの方が便利です。写真の整理の一つに「向きの回転」があります。私は紙のメモやスマートフォンの画面を真上から撮影することが多いのですが、撮影するのでけっこう向きがバラバラになるんです。ということで、パソコンで回転の向きを修正するのですが、WindowsパソコンとMacパソコンで、ファイル管理ソフトや写真編集ソフトが異なります。今回は、macの基本ソフトでの回転方法をご紹介します。Finderで右クリックMacのファイ...
2020.08.07 2022.03.27
ニッチな話題パソコン基礎知識
ニッチな話題

「プロシージャ」で問題解決をする？〜ライトボットのプログラミング教育

Lightbotでは、 「 プロシージャ 」 という考え方を学ぶことができます。プロシージャとはなんなのでしょうか？一緒に見てみましょう。プロシージャとは？「プロシージャ（Procedure）」は、「一連の手続き」という意味です。 「メイン」スロットとは別に、「 プロシージャ 」 スロットにもコマンドを追加できるようになります。例えば「 プロシージャ 1 」 に並べてあるコマンドは、「メイン」スロットで「 P1 」 コマンドを追加することで、まとめて実行することができます。「...
2020.07.17 2020.12.03
ニッチな話題
JavaScriptでウェブページのタブを閉じたい 【できる場合、できない場合】 ニッチな話題

JavaScriptでウェブページのタブを閉じたい 【できる場合、できない場合】

JavaScriptでウェブページのタブを閉じるコードは、ブラウザ（あるいはバージョン）によって挙動が違います。ここで検証できます。ネットで調べると「できる」と書いてあったのに、バージョンの関係なのか、うまくいかないことがあるのよね。結局、実際にコードを試して、実験するしかなさそうね。そもそもセキュリティによる制約があるまず、基本的にはJavaScriptでは、コードから開いたウィンドウは閉じることができるものの、ユーザーが開いたウィンドウは閉じられません。これは、セキュリテ...
2020.06.23 2022.06.17
ニッチな話題プログラミング
Adobe Premiere Elementsの始め方（体験版のインストール 2020年度） ニッチな話題

Adobe Premiere Elementsの始め方（体験版のインストール 2020年度）

Adobe Premiere Elementsはメジャーな動画編集ソフトAdobe Premiere Proの簡易版です。体験版のインストールをしたので、メモをしておきます。無料体験版は時期によってルールも変わると思います。2020年6月時点のメモです。Adobe IDの登録Adobe Premiere体験版をインストールするには、まずAdobeの会員登録が必要です。メールアドレスとパスワードを決めて、Adobeアカウントと作ってください。製品版を利用開始するときにもこのアカ...
2020.06.13
ニッチな話題パソコン基礎知識
iMovieと外部マイク：背景ノイズを減らす〜Open Camera いろんな周辺機器

iMovieと外部マイク：背景ノイズを減らす〜Open Camera

マイクで録音するときに「ザーッ」という風の音が気になります。今回は、ノイズとの付き合い方をメモしておきます。スマホに外部マイクならOpen CameraアプリスマートフォンにUSBマイクをつないでいるUSB-C USB-Aアダプターをつけて、USBマイクとスマートフォンをつなぎました。スマホはパソコンと違って、通常の「設定」アプリにはマイク入力の項目がないんですよね。ということで、Androidスマートフォンで外部マイクを利用するには、「Open Camera」アプリが定番で...
2020.06.12 2020.06.15
いろんな周辺機器ニッチな話題
[Mac] 移動先に同名のフォルダがある場合の置き換えと統合の注意点 【Windowsとの違い】 dittoコマンド ニッチな話題

[Mac] 移動先に同名のフォルダがある場合の置き換えと統合の注意点 【Windowsとの違い】 dittoコマンド

「作業中」フォルダに花の写真をまとめた「花」というフォルダがあって、「完了」フォルダに移動する、とします。このとき、移動先の「完了」フォルダにすでに同じ名前の「花」フォルダがあったらどうなるのか、というのが今回のテーマです。Windows PCの場合は、どちらも残せるWindows PCでフォルダを移動した場合、中のファイルはすべて、移動先の同名フォルダに移動します。つまり、「作業中¥花」フォルダの中身と「完了¥花」フォルダの中身が合計されます。Windows PCで同名フォ...
2020.06.12 2022.04.10
ニッチな話題パソコン基礎知識
dokuwikiに画像をドラッグアンドドロップで挿入したい 〜 dropfiles プラグイン ニッチな話題

dokuwikiに画像をドラッグアンドドロップで挿入したい 〜 dropfiles プラグイン

久々のdokuwikiの記事です。今回は、dokuwikiに画像をドラッグアンドドロップで挿入することができるプラグインの紹介をします。dropfilesWordやPowerPoint、あるいはブログのWordPressなど、最近のソフトは画像ファイルをドラッグアンドドロップするだけで、文章に挿入することができます。しかし、dokuwikiの場合は、デフォルトだと画面が切り替わって、画像が表示されてしまいます。「仕方がないかな」と思っていたのですが、今回「やっぱり不便」という...
2020.06.10 2020.09.20
ニッチな話題ホームページ運用
古いWindow10パソコンで動画撮影をしたらうまくできなかった #PR含む

古いWindow10パソコンで動画撮影をしたらうまくできなかった

古いパソコンに「動画撮影用」という用途を考えてみたのですが、うまくいきませんでした（残念…）。今回は、その3時間の悪戦苦闘をレポートをします。スマートフォンの外付けマイクがなかなかない動画撮影といえばスマートフォンが便利です。スマートフォンには初めから性能の良いカメラやマイクがついています。しかし、販売されているスマートフォン用の外付けマイクの多くは、電話やビデオ通話用の無線接続のヘッドセットで、録音用のマイクは少ないです。ほとんどのスマートフォンには、独立したマイク端子がな...
2020.05.24 2023.09.22
#PR含むいろんな周辺機器ニッチな話題
MacにNode.jsをインストールした ニッチな話題

MacにNode.jsをインストールした

MacでローカルにJavaScriptを使うために、Node.jsをインストールしました。手順をメモしておきます。「Node.js」からMac用インストーラをダウンロードして、インストールします。LTS（長期間サポート版）をダウンロードしました。あとは、通常のインストール操作です。Node.js v12.16.3と、npm v6.14.4をインストールできました。続きはこちらからこちらもどうぞ
2020.05.18 2021.12.18
ニッチな話題パソコン基礎知識
このページはモバイル フレンドリーではありません！？ 〜Google Search Consoleとスタイルの話 インターネット小話

このページはモバイル フレンドリーではありません！？ 〜Google Search Consoleとスタイルの話

この記事では、Google Search Consoleで出てきた「このページはモバイル フレンドリーではありません」というエラーの修正した事例をご紹介します。このページはモバイル フレンドリーではありませんGoogle Search ConsoleでURL検査をしていたところ、こんなエラーが表示されました。このページはモバイル フレンドリーではありません詳しい問題の内容を読んでみましょう。コンテンツの幅が画面の幅を超えていますクリック可能な要素同士が近すぎますテキストが小さ...
2020.05.15
インターネット小話ニッチな話題
ブログでJavaScriptプログラムを動かしてみよう【カスタムHTMLとscriptタグ】 ニッチな話題

ブログでJavaScriptプログラムを動かしてみよう【カスタムHTMLとscriptタグ】

ブログの中でJavaScriptを動かして遊ぶ方法をご紹介します。WordPressサイトに直接HTMLコードを入力するために「カスタムHTML」というブロックを挿入します。JavaScriptのコードは最初と最後をのタグで囲んだ中に入力します。
2020.05.14 2021.12.18
ニッチな話題プログラミングホームページ運用
どうしてスマホの充電器では Macbook の充電ができないの？【USB充電器の違い、USB Type-C】 #PR含む

どうしてスマホの充電器では Macbook の充電ができないの？【USB充電器の違い、USB Type-C】

スマートフォンの充電器やケーブルは、１００円ショップでも販売されています。家電量販店では、もう少し高い充電器やケーブルも販売されています。今回は、「見た目ではわからない」USB充電器の違いについて解説してみたいと思います。ポイントUSB Type-Cで充電器につないでも、電圧が足りないことがある。充電器の性能、ケーブルの性能を確認する。macbookの話がメインですが、Androidスマートフォンを使っている方にも役に立つと思いますこの充電器の違い、わかりますか？Amazon...
2020.05.11 2024.04.15
#PR含むいろんな周辺機器スマホ基礎ニッチな話題
Macで Control+M を改行に設定する（Karabiner-Elementsの設定） ニッチな話題

Macで Control+M を改行に設定する（Karabiner-Elementsの設定）

MacBookの controlキーは、UNIX系のショートカットキー操作が利用できるのが面白い特徴です。ところが、一部のキー操作はアプリによって動作したり、しなかったり、ということがありました。control-mは returnキーと同等ではないのか？例えば、「control-m」のキー操作。Emacsやターミナルでは「改行（return）」にバインドされているキー操作です。しかし、macOSのアプリで操作していると、これが動作するときと、しないときがあることに気づきました...
2020.04.26 2023.06.21
ニッチな話題パソコン基礎知識
なぜ Macにはコマンドキーとコントロールキーがあるのか？ 【ターミナル操作】 Mac

なぜ Macにはコマンドキーとコントロールキーがあるのか？ 【ターミナル操作】

コマンドキーの操作系列とコントロールキーの操作系列が重ならないのがメリットです。インターネット利用や画像編集などGUIの操作とターミナル作業がスムーズに「繋がる」のです。「コマンドキー」と「コントロールキー」Macのキーボードには「コマンドキー」と「コントロールキー」があります。それって、違うキーなの？そもそも似たようなキーが２つもあるなんて謎ですよね。わたしもそうだったんですが、使っているうちに「あぁ、そういうことか！」と眼から鱗の落ちました。ということで、今回はパソコンの...
2020.04.20 2024.03.31
Macニッチな話題パソコン基礎知識
MacにEmacsをインストールした 【パッケージ管理システムHomebrew】 Mac

MacにEmacsをインストールした 【パッケージ管理システムHomebrew】

MacにEmacsをインストールするには、まずパッケージ管理システムのHomebrewをインストールします。 次に、ターミナルから「brew install emacs」コマンドを実行することで、Emacsをインストールできます。 これで、「emacs」コマンドを使ってEmacsを起動し、テキスト編集を始めることができるようになります。MacにEmacsをインストールする２つの準備macOS 10.15 Catalinaには、はじめからEmacsが入っているわけではありません...
2020.04.19 2024.04.19
Macニッチな話題
Macでスクリーンショットの保存フォルダを変更するには 【コマンドdefaults write】 ニッチな話題

Macでスクリーンショットの保存フォルダを変更するには 【コマンドdefaults write】

macでは標準のOSの機能でスクリーンショットを保存することができます。デフォルトの状態だと、以下のキーボードショートカットが設定されています。macOSのスクリーンショットのショートカットキーcommand+shift+3　画面をファイルとして保存command+shift+4　選択部分をファイルとして保存command+shift+5　オプションを表示して任意のスクリーンショットを撮るこのショートカットキーは「設定」ー「キーボード」ー「ショートカット」から、変更することが...
2020.04.18 2021.03.30
ニッチな話題
Macで親指シフトで入力できるようにするまで （2020年）【Lacaille 2.3, macOS Catalina 10.15.4】 Mac

Macで親指シフトで入力できるようにするまで （2020年）【Lacaille 2.3, macOS Catalina 10.15.4】

こんにちは。今日はMacBook Airで「親指シフト入力」の設定をした手順をまとめておきます。（2020年4月現在）「親指シフト」で入力していて、MacPCを使い始める、という「非常にレア」な読者の方を対象にしています。ですので、「親指シフト」についてはある程度知っている前提で説明します。Windows PCからの移行私の場合は、これまでWindows PCやLinux PCで 「親指シフト入力」の設定をして、タイピングをしてきました。と言っても、自分のPC以外では「ローマ...
2020.04.17 2023.09.22
Macニッチな話題