ホームページ運用

ニッチな話題

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

タイトル見出しを大きく表示するようにしたので、アニメーションで表示するようにしてみました。 基本的なアニメーション部分の構造をみる 見出し全体のフェードインと、上下の線の伸びるエフェクトの2つが組み合わせています。 ...
ホームページ運用

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

style.cssに目次のデザインを追加しました。 こんなふうに変更しました。 違いがわかりますか? スタイルを変更したのは主に3箇所 目次のアイコンを追加した見出し3のフォントサイズを小さくした余白を狭...
ニッチな話題

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

見出しに吹き出しつけるCSSを入れていたんですが、やめることにしました。 こんな見た目でした /** 見出しに吹き出しをつける */ @media screen { #container h2 { pos...
ニッチな話題

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

WP ULikeプラグインは、WordPressに「いいね」ボタンを設置するプラグインです。 通常ページではこのようにハートマークのいいねボタンが表示されます。 ところが、AMPページだと…… ...
ホームページ運用

WordPressで効率的にブロックを挿入したい! 【スラッシュ挿入を活用】 Change Block Keywordsプラグイン

WordPressのブロックエディタには、スラッシュでブロックを挿入する機能があります。これを「slash inserter」といいます。 slash inserterで検索すると、英語の記事がいくつか出てきます。 ス...
ニッチな話題

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

プログラミングには論理演算というのがあって、条件を組み合わせることがよくあります。 条件を組み合わせたい(論理積)ことは多い 例えば、擬似コードですが、 if(day ≠ "日" ∧ day ≠ "土") retu...
ホームページ運用

WordPressのログイン画面にパスワードを入れても進まない ~WordPressアプリ・Jetpack

スマホでブログを書こうと思って、WordPressアプリをインストールしました。 ところが、WordPressアプリと連携したら、なぜか通常のブラウザからのログインができなくなってしまいました。 WordPressアプリ ...
ニッチな話題

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

ブログ記事の中にフォームを入れていたら、AMPエラーになりました。 カスタムHTMLを使うとよくAMPエラーになりますね。 足りなかったのは、formタグのtarget属性でした。formタグの説明では特に見か...
ニッチな話題

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

CSSのクラス指定が複雑になったときの意味を調べてみました。 散々、迷って出来上がったCSSのコードは以下です。 .article :not(div.toc-content) li { font-size: 115%; ...
ニッチな話題

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

今のブログ(Cocoonのもとのデザイン)がこんな感じです。 これを、はてなブログ風にしてみたいんですよね。 出典:「はてなブログ OSSコミュニティ支援プログラム」「はてなブログ 学校支援プログラム」を開始しました ...
ホームページ運用

ブログの絵文字のサイズを小さくした【CSSのクラス指定】

教室のブログを見ていたら、気になる点が…… わかりますか? 絵文字の部分が不自然に大きいんです。 しかも、灰色の枠までついている。 ということで、CSSをちょっといじります。 デベロッパーツー...
ホームページ運用

ブログをnote風のデザインにしてみた

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。 ◆ note風デザインの記事一覧 ◆ 「note(ノート)」というブログサービスをご存知ですか? ...
ニッチな話題

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

ブログのデザインを練り上げている過程が全部わかる! いろいろスタイルを設定したので、ここまでの「追加CSS」の中身をここにメモしておきます。 それぞれの機能について、ブログで説明しているページがあればリンクも貼っておきます...
ニッチな話題

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

画像検索の「クリエイティブ・コモンズ」の結果ってあんまりパッとしないよね!(失礼) Googleの画像検索はとても便利ですが、検索されたイラストを利用するためにはライセンスを確認する必要があります。画像検索ではライセンスによる絞...
ホームページ運用

CocoonのSNSフォローボタンが大きかったので小さくした(border-radius)[CSS]

ちいラボのブログ メンテナンス日記! 今日は「フォローボタン」のデザインをおしゃれにしてみました。メモしておきます。 環境 WordPress 5.5.1 (Cocoon テーマ バージョン: 2.2.3.1) 「SN...
インターネット小話

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

インターネットでフリーイラストを探して、なかったのでクリエイティブ・コモンズライセンスで公開します。ご自由にお使いください。 銀行の確認番号表 銀行の確認番号表イラスト この 作品 は クリエイティブ...
ホームページ運用

AMP HTML タグの属性で指定されたレイアウトが無効です!?〜 video 動画のサイズ指定

「グーグル・サーチ・コンソール」の通知に「AMP HTML タグの属性で指定されたレイアウトが無効です。」というエラーが表示されました。 今回は、動画ファイルをアップロードするときの注意点を書きました。 表示されたエラーメッセ...
ホームページ運用

[WordPress] 急に番号付きリストが表示されなくなった 【VK All in One Expansion Unit プラグインのリストスタイル】

ブログを書いていたら、突然「番号付きリスト」がうまく出てこなくなったので、原因を調べてみました。 ポイント WordPressのアップデートで番号付きリストが表示されなくなったので、VK All in One Expansion U...
ホームページ運用

WordPressを自動でバックアップしたい(Softaculousの場合)

WordPressでは更新がけっこう頻繁にあります。システムだけでなく、テーマやプラグインに更新があるからです。特に、テーマやプラグインは、検索システムのアップデートに対応するように、頻繁に更新されます。 しかし、更新には注意も必要...
ホームページ運用

WordPressのURLから全角文字をなくすには?〜Cocoonの場合(日本語スラッグ)

先日、LINEのタイムラインに投稿するときに、URLに全角文字が含まれていると、うまく共有できないことがある、という現象に遭遇しました。今回は、ブログのURLから全角文字をなくす設定を説明します。 WordPress、Cocoon ...
ホームページ運用

[WordPress] アップロードした画像ファイル名から全角文字をなくすには? 【WP Multibyte Patch】

日本語には全角文字があって、コンピュータを利用しているとしばしばトラブルの元になります。 今回は、WordPressにアップロードするファイル名に、全角文字があれば自動で変更する方法をまとめてみます。 ことの発端はLINE共有...
ホームページ運用

LINEのタイムライン投稿のアイキャッチ画像が表示されない? 【OGPとURLエンコード、サーバーキャッシュ】

ちいラボでは、教室前のブラックボードに書いている「今日の一言」をインターネットにも投稿しています。その中で、LINEの公式アカウントのタイムラインにも投稿しているのですが、うまくいくときといかないときがあります。 今回は、SNSでブ...
ニッチな話題

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

dokuwikiを最新バージョンにアップグレードしたら、エラーが表示されてシステムにログインできなくなってしまいました。今回は、ニッチな話ですが、dokuwikiのアップグレードについて書いてみます。 表示されたエラー:Fatal ...
ホームページ運用

Amazon アソシエイトツールバーが消えて、また戻った

Amazonでアソシエイトツールバーが表示されなくなって、また戻ったのでメモしておきます。 Amazon アソシエイトツールバーが消えた まず、アソシエイトツールバーが表示されなくても、焦る必要はありません。こちら()...
ニッチな話題

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

久々のdokuwikiの記事です。今回は、dokuwikiに画像をドラッグアンドドロップで挿入することができるプラグインの紹介をします。 dropfiles WordやPowerPoint、あるいはブログのWordPressな...
タイトルとURLをコピーしました