インターネット小話

[mixhost] 自分のサイトにアクセスできない【データベース接続確立エラー】 #PR含む

[mixhost] 自分のサイトにアクセスできない【データベース接続確立エラー】

ブログの編集をしていたら、いきなりアクセスできなくなりました。どうもレンタルサーバの一時的なエラーで、1時間ほど待つと無事に復旧されました。はじめてのことでびっくりしましたので、その顛末を記録しておきます。Error establishing a database connectionとは?自分のサイトにアクセスしたら、こんなメッセージが表示されました(2020-09-26 17:33)。Error establishing a database connectionThis...
[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】 ニッチな話題

[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】

以前、funtions.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。こんなふうに変えましたいつものようにビフォー・アフターをお見せします。↓こうなりました。HTML要素を変更せずにちゃんとCSSでデザインを変えられました。CSSコードはこちらポイントはblogcard-footer要素の位置をabsolute(絶対配置)にして、移動することです。親要素内に自由に配置で...
[Cocoon] 引用ブロックをすっきりさせた ニッチな話題

[Cocoon] 引用ブロックをすっきりさせた

引用ブロックのデザインをすっきりさせました。前後のデザインの比較もとはこんな感じでこうしました。引用符を枠線の外に出すことで、ちょっとすっきりしてませんか?CSSコードはこちら/** * 引用をすっきりさせた * */.entry-content blockquote:before, .entry-content blockquote:after { position: absolute; width: 0.5em; color: #a08010; background: w...
[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた ニッチな話題

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...
スムーズにフリーイラストの配布する【ショートコードでクリエイティブコモンズ登録】 インターネット小話

スムーズにフリーイラストの配布する【ショートコードでクリエイティブコモンズ登録】

こないだは自作の画像ファイルをクリエイティブ・コモンズ・ライセンスで公開する方法を調べました。せっかく作った図案のうち、再利用できそうなものは、ほかの方も使えるようにすると便利なはずです。しかし、ライセンス情報をHTMLで記述するのは大変です。そこで、ショートコードで省力化できないか、と考えました。それが今回のお題です。ショートコードで実現したい目標ショートコードは[cc_img url=画像のURL name=表示名]という書き方にします。つまり、こんなふうに入力したらこん...
OneDriveのバックアップが終わらない? カメラアップロードから古い写真を除外したい インターネット小話

OneDriveのバックアップが終わらない? カメラアップロードから古い写真を除外したい

先日、OneDriveが調子が悪かったので、何度か再インストールしました。そこで問題になるのがカメラアップデート。スマホの中の全部の写真を延々と、OneDriveにアップロードしだすのです。今回は、OneDriveを再インストールしたときのちょっとしたコツについて説明します。カメラアップロードの基本的な仕組み「カメラアップロード」は、スマホで撮影した写真をOneDriveというクラウド・ストレージに自動でバックアップする機能です。スマホ内の写真がなくなってしまっても、OneD...
まずはSkypeの3つの基本機能から覚えよう【ビデオ通話の基礎知識】 インターネット小話

まずはSkypeの3つの基本機能から覚えよう【ビデオ通話の基礎知識】

仕事などでビデオ通話をするとなると、Skypeが有名です。今でこそ たくさんのビデオ通話サービスがありますが、Skypeはその草分け的な存在です。名前は聞いたことはある、という人も多いですよね。もともとはパソコン用ソフトでしたが、今はスマホにもアプリがあります。今回は、そんなSkypeに一歩近づく、一番かんたんな使い方をおさえておきましょう。要件・Androidスマートフォン・Skype ver. 8.64.0.83Skypeの画面構成まずはスマホのSkypeアプリの画面を見...
Amazon商品紹介リンクをショートコードで入れられるようにした #PR含む

Amazon商品紹介リンクをショートコードで入れられるようにした

Cocoonには商品紹介のショートコードがあります。これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表示することできることに気づきました。これまでのやり方は大変だった見出しやボタンを組み合わせて、作っていました。画像リンクやテキストリンクなどをコピーしてくるのに、かなり時間がかかります。それを、こんなふうにしました。見た目にもコンパクトだし、何よりも気軽に使...
遅延読込みでコードハイライトが機能しない【LiteSpeed  Cache】 ニッチな話題

遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。なんか見た目にカラフルでいいですよね。cocoonでコードがハイライトしないところが何故かうまく表示されません。まずは、表示されたコードブロックを見てみてください。このように、コードブロックがあるのにjavascriptの色分けがされていません。まずはHTMLを検証してクラスを確認する検証でHTMLを見てみると、ちゃんとjavascriptのクラ...
リンクを表示するとスタンプが押されるCSSアニメーション ニッチな話題

リンクを表示するとスタンプが押されるCSSアニメーション

今回は「押すのが心地よいリンク」というのを考えてみました。それが、画面に表示すると、スタンプが押されるアニメーションです。枠の中にマウスをポイントしてみてください。 どうでしょうか? 押したくなります?HTMLコードポイントは、my-stampとstamp2というクラスです。my-stampが枠全体、stamp2が中のイラストを指しています。<figure class="wp-block-image size-large is-resized my-stamp"> 読んだよ ...
「にほんブログ村」をはじめた理由 ちいラボエッセイ

「にほんブログ村」をはじめた理由

「にほんブログ村」というサイトをご存知ですか?にほんブログ村は、ブログのランキング・交流サイトです。(参考)にほんブログ村ちいラボも登録してみたので、その理由を整理しておこうと思います。登録サービスの利用これまでは、ちいラボでは登録サービスをあまり使って来なかった気がします。振り返ってみると、何があるかな……ジモティーに登録したらSNS以外では、ジモティーぐらいかもしれません。ジモティーは、一番はじめに教室の内装を安く手に入らないかな、という下心で登録したんですが、結局取りに...
いらすとや だけじゃない、権利的に使いやすいイラストサイト 【PixabayやTopeconHeroes】 パソコン基礎知識

いらすとや だけじゃない、権利的に使いやすいイラストサイト 【PixabayやTopeconHeroes】

チラシやブログなどの資料作成では、イラストがあると伝わりやすくなります。今回は、イラストサイトについてまとめておきます。個人的オススメ度運営特徴いらすとや★★☆個人使いやすく、誰でも見たことのあるイラストpixabay★★★投稿フリーライセンスで、ダウンロードも速いTopeconHeroes★★★個人いろんなサイトがあるAC Illust★☆☆投稿ダウンロードに手間がかかるのが難点イラストくん★☆☆個人学校や地域活動で使いやすい雰囲気ストックイラストのPIXTAもちろん有料の...
どうする?期限切れのウイルスバスタークラウドがそのままになっているよ【アンインストール】 インターネット小話

どうする?期限切れのウイルスバスタークラウドがそのままになっているよ【アンインストール】

パソコンのメンテナンスをすると、よくあるのが期限切れのセキュリティソフトがそのままになっているものです。期限切れのセキュリティソフトは、ただ広告(あるいは警告)を表示するだけで、何も保護してくれません。パソコンにとっては無駄な動作になるので、更新するのでなければ、ちゃんと削除しておきましょう。ということで、ウイルスバスタークラウドをアンインストールした話です。本製品の有効期間が終了しましたパソコンのタスクバーにこんな通知がありました。このグレーの丸いマークはウイルスバスターの...
WordPressのテンプレートをいじらずにPHPコードで遊びたい【テキストウィジェットで評価】 ニッチな話題

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

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。ウィジェットとしてPHPコードを実行したいと思います。追記(2024-07-20)任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。カスタムHTMLではPHPコードは実行できないまず試したのがウィジェットの「カスタムHTML」です。しかし、「<?」で始まるタグはエラーになってしまいます。Special characters must be es...
OneDriveアプリのファイル一覧が更新できない[Android] インターネット小話

OneDriveアプリのファイル一覧が更新できない[Android]

パソコンからスマホにデータを移すときに、よくOneDriveを使っています。しかし、今日いつものようにスマホにデータをダウンロードしようとしたら、うまくいきませんでした。数時間格闘したので、書いておきますね。OneDriveアプリのファイル一覧が更新されないまず、状況を整理すると、使っているのはAndroidのOneDriveアプリです。OneDriveアプリのファイルリストの表示を更新しようとしても、いつまでもぐるぐる回って、更新が完了しません。何かに詰まっていて更新が進ま...
タイトル見出しにアニメーションをつけてみた 【CSS animation】 ニッチな話題

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

タイトル見出しを大きく表示するようにしたので、アニメーションで表示するようにしてみました。基本的なアニメーション部分の構造をみる見出し全体のフェードインと、上下の線の伸びるエフェクトの2つが組み合わせています。CSSの中でフェードインの部分だけを抜き出してみます。/* 見出しをフェードイン */h1.entry-title { animation: title-fade-in 0.5s ease 0.8s 1 normal running forwards;}@keyfram...
【一部市町村は11月20日まで!】  スマホから国勢調査のインターネット回答してみた (2020年9月) 【ログインIDとアクセスキー】 インターネット小話

【一部市町村は11月20日まで!】 スマホから国勢調査のインターネット回答してみた (2020年9月) 【ログインIDとアクセスキー】

国勢調査の案内が届きました。デジタル化の流れもありますし、せっかくなのでインターネットで回答してみました。10分かからずにできましたよ。調査期間は10月20日(火)までですが、一部地域で引き続きインターネットでも受け付けていますよ。【追記】市町村によって1ヶ月の期限延長(2020年10月21日時点)国勢調査は10月20日まででしたが、一部の市町村では調査期間が11月20日まで1ヶ月間 延長されています。調査期間が延長された市町村(153市町村)はこちら(PDF)です。【追記】...
[CSS] 目次のデザインをすっきりさせた ホームページ運用

[CSS] 目次のデザインをすっきりさせた

style.cssに目次のデザインを追加しました。こんなふうに変更しました。違いがわかりますか?スタイルを変更したのは主に3箇所目次のアイコンを追加した見出し3のフォントサイズを小さくした余白を狭くした/*目次のデザイン*/.article .toc { border-color: #a08010 ; padding: 10px; width: 95%;}.article .toc-title { text-align: left;}.article .toc-title::...
見出しに吹き出しをつけるスタイルをやめた ニッチな話題

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

見出しに吹き出しつける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...
最近のインターネットはあまり「匿名の空間」ではなくなっている【電話番号が必須】 ちいラボエッセイ

最近のインターネットはあまり「匿名の空間」ではなくなっている【電話番号が必須】

とりとめもない話ですが、最近のセキュリティとプライバシーについて感じたことがあります。Yahoo IDの登録で携帯電話番号が必要たまたま TポイントをPayPayと連携するためにYahoo IDの登録をしたんですが、アカウントの作成に「電話番号」が必須になっていました。「電話番号」は、大事な個人情報なので、なるべくなら入力したくない気がします。Yahoo IDといえば、以前はフリーメールのYahooメールを作るために取得した記憶があります。そのときは、特に何の個人情報も出さず...