ホームページ運用

[CSS] 目次のデザインをすっきりさせた ホームページ運用

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

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

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

見出しに吹き出しつける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
ニッチな話題ホームページ運用
WordPressで効率的にブロックを挿入したい！ 【スラッシュ挿入を活用】 （Change Block Keywordsプラグイン） ホームページ運用

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

WordPressのブロックエディタには、スラッシュでブロックを挿入する機能があります。これを「slash inserter（スラッシュ挿入）」といいます。「slash inserter」で検索すると、英語の記事がいくつか出てきます。「change-block-keywords」プラグインを使うと、スラッシュ挿入のキーワードを自分で設定できるようになります。追記：2024-04-26ChangeBlockKeywordsプラグインのメンテナンスは、2021年5月を最後に止まっ...
2020.09.17 2024.08.08
ホームページ運用作業効率化
「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS] ニッチな話題

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

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

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

スマホでブログを書こうと思って、WordPressアプリをインストールしました。ところが、WordPressアプリと連携したら、なぜか通常のブラウザからのログインができなくなってしまいました。WordPressアプリログイン画面でパスワードを入力しても、ぐるぐるまわって先に進みません。後でわかったのですが、どうもロボットチェックの表示でひっかかかっていたようです。思い当たることといえば、WordPressアプリ。WordPress.comWordPressアプリは、WordP...
2020.09.16 2020.09.21
ホームページ運用
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
ニッチな話題ホームページ運用
ブログの絵文字のサイズを小さくした【CSSのクラス指定】 ホームページ運用

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

教室のブログを見ていたら、気になる点が……わかりますか？絵文字の部分が不自然に大きいんです。しかも、灰色の枠までついている。ということで、CSSをちょっといじります。デベロッパーツールでCSSを確認するChromeのデベロッパーツールで検証してみると、「.iwe-border-bold img」に該当するようです。絵文字ですが、インライン画像の挿入になっているんですね。ということで、文章中の画像には境界線が表示されないようにする必要があります。ところが、この「.iwe-bor...
2020.09.14 2022.03.27
ホームページ運用
ブログをnote風のデザインにしてみた（ワンカラムデザイン） ホームページ運用

ブログをnote風のデザインにしてみた（ワンカラムデザイン）

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。note風デザインの記事一覧「note（ノート）」というブログサービスをご存知ですか？ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。２カラムのアメブロと比べてみますと…パ...
2020.09.12 2024.08.29
ホームページ運用
とりあえず今の追加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
ニッチな話題ホームページ運用
CocoonのSNSフォローボタンが大きかったので小さくした（border-radius）[CSS] ホームページ運用

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

ちいラボのブログ メンテナンス日記！今日は「フォローボタン」のデザインをおしゃれにしてみました。メモしておきます。環境WordPress 5.5.1 (Cocoon テーマ バージョン: 2.2.3.1)「SNSフォロー」ボタンを見つけたホームページのメンテナンスをしながら「Cocoon設定」を見ていたら、「SNSフォロー」ボタンがありました。さっそく表示させてみたところ、スマホでみると３行とだいぶ「目立ちすぎる」感じです。フォローボタンが５つもあると、ちょっと圧迫感がありま...
2020.09.09 2022.02.24
ホームページ運用
ないものは作ってみる、ちいラボで作った公開イラスト（クリエイティブ・コモンズ） インターネット小話

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

インターネットでフリーイラストを探して、なかったのでクリエイティブ・コモンズライセンスで公開します。ご自由にお使いください。銀行の確認番号表 銀行の確認番号表イラスト この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。銀行のワンタイムパスワード生成器銀行のワンタイムパスワード生成器のフリーイラスト この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。Keynoteの図...
2020.09.09 2020.09.25
インターネット小話ニッチな話題ホームページ運用
AMP HTML タグの属性で指定されたレイアウトが無効です！？〜 video 動画のサイズ指定 ホームページ運用

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

「グーグル・サーチ・コンソール」の通知に「AMP HTML タグの属性で指定されたレイアウトが無効です。」というエラーが表示されました。今回は、動画ファイルをアップロードするときの注意点を書きました。表示されたエラーメッセージを読むと通知メッセージによると、AMP（スマホ用に高速表示されるページ）のタグに問題があるようです。Search Console により、貴サイトに影響する「AMP」関連の問題が 1 件検出されました。主なエラーエラーにより、貴サイトのページまたは機能が...
2020.09.03 2020.09.05
ホームページ運用
[WordPress] 急に番号付きリストが表示されなくなった 【VK All in One Expansion Unit プラグインのリストスタイル】 ホームページ運用

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

ブログを書いていたら、突然「番号付きリスト」がうまく出てこなくなったので、原因を調べてみました。ポイントWordPressのアップデートで番号付きリストが表示されなくなったので、VK All in One Expansion Unit プラグインを削除した。番号付きリストとは？ウェブページ（HTML）の要素として、リストは２種類あります。箇条書きリスト（<ul>タグ）番号付きリスト（<ol>タグ）ちなみに ↑ は箇条書きリストです「番号付きリスト」は、順序のある項目を並べると...
2020.09.01 2021.10.09
ホームページ運用
WordPressを自動でバックアップしたい（Softaculousの場合） ホームページ運用

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

WordPressでは更新がけっこう頻繁にあります。システムだけでなく、テーマやプラグインに更新があるからです。特に、テーマやプラグインは、検索システムのアップデートに対応するように、頻繁に更新されます。しかし、更新には注意も必要で、たまに不具合が発生して、全くブログが表示されなくなってしまうことがあります。そんなときもバックアップがあればそのときの状態に戻すことができます。今回はバックアップを忘れないための、自動バックアップの設定をみてみましょう。条件WordPress、m...
2020.09.01 2021.08.06
ホームページ運用
WordPressのURLから全角文字をなくすには？〜Cocoonの場合（日本語スラッグ） ホームページ運用

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

先日、LINEのタイムラインに投稿するときに、URLに全角文字が含まれていると、うまく共有できないことがある、という現象に遭遇しました。今回は、ブログのURLから全角文字をなくす設定を説明します。WordPress、CocoonCoccoonには日本語スラッグの設定があるこのホームページでは、WordPressのテーマにCocoonを利用しています。Cocoonの設定には、「日本語スラッグを半角英数字にする」（日本語スラッグの場合は、「post-XXXX」のような短縮文字列に...
2020.08.31
ホームページ運用
[WordPress] アップロードした画像ファイル名から全角文字をなくすには？ 【WP Multibyte Patch】 ホームページ運用

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

日本語には全角文字があって、コンピュータを利用しているとしばしばトラブルの元になります。今回は、WordPressにアップロードするファイル名に、全角文字があれば自動で変更する方法をまとめてみます。ことの発端はLINE共有でアイキャッチ画像が表示されなかったこと先日、LINEのタイムラインに投稿するときに、アイキャッチ画像のファイルが表示されないことがありました。原因は、og:imageで指定されるアイキャッチ画像のファイルURLに全角文字が含まれていることがでした。通常は、...
2020.08.28 2021.10.09
ホームページ運用
LINEのタイムライン投稿のアイキャッチ画像が表示されない？ 【OGPとURLエンコード、サーバーキャッシュ】 SNS

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

LINEのタイムラインにブログのURLを投稿したら、アイキャッチ画像が表示されないことがありました。原因を調べてみると、画像ファイル名に日本語文字が含まれているときに、うまくいかないことがわかりました。SNS共有のための「OGP情報」に、マルチバイト文字列が含まれると、LINEタイムラインではうまく表示できないようでした。【追記：2022-04-17】LINE VOOM Studioになって、リンクの挿入方法が変わりました。【関連】どんな問題があったの？ちいラボでは、教室前の...
2020.08.22 2023.05.04
SNSホームページ運用
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
とりあえずのメモニッチな話題ホームページ運用作業効率化
Amazon アソシエイトツールバーが消えて、また戻った ホームページ運用

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

Amazonでアソシエイトツールバーが表示されなくなって、また戻ったのでメモしておきます。Amazon アソシエイトツールバーが消えたまず、アソシエイトツールバーが表示されなくても、焦る必要はありません。こちら（）から見ることができます。でも、やっぱりAmazonで履歴やほしいものリストを見ながら、商品リンクを作れた方が便利です。あと、すぐにレポートを表示できるのも便利。「Amazonアソシエイトツールバー」の設定するには…Amazonアソシエイト・セントラル（）を表示する「...
2020.06.14
ホームページ運用
dokuwikiに画像をドラッグアンドドロップで挿入したい 〜 dropfiles プラグイン ニッチな話題

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

久々のdokuwikiの記事です。今回は、dokuwikiに画像をドラッグアンドドロップで挿入することができるプラグインの紹介をします。dropfilesWordやPowerPoint、あるいはブログのWordPressなど、最近のソフトは画像ファイルをドラッグアンドドロップするだけで、文章に挿入することができます。しかし、dokuwikiの場合は、デフォルトだと画面が切り替わって、画像が表示されてしまいます。「仕方がないかな」と思っていたのですが、今回「やっぱり不便」という...
2020.06.10 2020.09.20
ニッチな話題ホームページ運用
タグ「style amp-custom」の CSS 構文エラーです：Google Search Console – Cocoon 2.1.6.5 ホームページ運用

タグ「style amp-custom」の CSS 構文エラーです：Google Search Console – Cocoon 2.1.6.5

タグ「style amp-custom」の CSS 構文エラーです。グーグルサーチコンソールに上のようなエラーが表示されました。すぐわかる概要WordPress（5.4.1）のCocoonテーマ（2.1.6.5）を利用しています。今回は、直前に追加CSSの変更をしていたので、それが原因かもしれません。追加CSSを見ても構文エラーはなかったのですが、実際のウェブページのソースのCSSになったときに一部が欠けていてエラーになっていました。WordPressの中で追加CSSなどを合...
2020.06.06 2020.09.10
ホームページ運用
DokuWikiの印刷用CSSを変更する（userprint.css） とりあえずのメモ

DokuWikiの印刷用CSSを変更する（userprint.css）

DokuWikiで印刷用CSSを変更しようとした際、confフォルダにuserprint.cssを追加して印刷時専用のスタイルを記述しました。しかし、変更が反映されない問題に直面。解決策として、conf/tpl/style.iniファイルに空白文字を追加して保存することで、うまくいきました。DokuWikiはスタイルシートをキャッシュで管理しているため、プラグインやテーマの変更がなければ再読み込みされないことが原因でした。userprint.cssを作成する印刷時のCSSを変...
2020.06.02 2024.02.28
とりあえずのメモホームページ運用作業効率化
ブログの印刷時のスタイルを変更する【@media print】 ホームページ運用

ブログの印刷時のスタイルを変更する【@media print】

スタイルシートは表示画面だけではなく、印刷時のスタイルを指定することもできます。今回は、先日（2020年6月1日）更新した。追加スタイルシートの中身をまとめておきます。追加CSSの中身このブログは冊子印刷でA4に2ページ分印刷したときに、文字サイズなど読みやすいように編集しています。そのまま印刷すると文字が大きすぎるかもしれません。このホームページではちょこちょこっとしたスタイルはWordPressの追加CSSに記述しています。今回、少し整理したので、まずはずらっとCSSをお...
2020.06.01 2023.05.20
ホームページ運用
ブログの画像に枠をつける ～ CSSのimgタグとWordPress ホームページ運用

ブログの画像に枠をつける ～ CSSのimgタグとWordPress

今回は、ブログ記事の画像に枠をつける、という設定をしました。画像の文字がリズムを壊しているこのブログ記事で使う説明画像は、説明資料や講義でも使うので文字が入っています。しかし、これまで本文と画像内の文の見分けがつきにくく、記事を読むときに文章が繰り返されたりして、リズムが悪いように感じていました。なんか自分でも違和感があったんですよねそこで、違和感の原因を考えたところ「読む順番がわかりにくいから」と思い至りました。例えば、漫画でも上から下へ自然な順番で読むことができるように、...
2020.05.25
ホームページ運用
[WordPress] ブログの一部をウェブフォントに変更する 【Google Fontsを追加する】 ホームページ運用

[WordPress] ブログの一部をウェブフォントに変更する 【Google Fontsを追加する】

ホームページを見ながら、デザインのメリハリをつけたいと思いました。そこで、今回はウェブフォントの変更をした話を書きます。コンテンツ管理システムとテーマこのホームページはWordPressのCocoonを利用して管理しています。環境コンテンツ管理システム：WordpressWordpressのテーマ：Cocoon利用したウェブフォント：Google Fonts利用しているシステム・テーマによって、CSSの読み込み・記述をどこにするか変わってきますよーGoogle Fontsでフ...
2020.05.21 2022.03.27
ホームページ運用
ブログでJavaScriptプログラムを動かしてみよう【カスタムHTMLとscriptタグ】 ニッチな話題

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

ブログの中でJavaScriptを動かして遊ぶ方法をご紹介します。WordPressサイトに直接HTMLコードを入力するために「カスタムHTML」というブロックを挿入します。JavaScriptのコードは最初と最後をのタグで囲んだ中に入力します。
2020.05.14 2021.12.18
ニッチな話題プログラミングホームページ運用
WordPressテーマを「Cocoon」に変更した ホームページ運用

WordPressテーマを「Cocoon」に変更した

こんにちは。オープンに向けて、教室の説明をする機会が増えてきました。いろんな人から聞かれることで、どう伝えたらわかりやすいか、とても考えさせられます。ということで、今日はホームページのデザインをもっとわかりやすくできないか、いじってみることにしました。WordPressとホームページビルダーの違いこの教室HPは、WordPressで作成・管理しています。WordPressはブログと同じように、直接ホームページに文章や画像をアップロードしていくことができます。　以前、ホームペー...
2020.01.13 2023.02.14
ホームページ運用
DokuWikiの編集画面のメッセージを直したい ホームページ運用

DokuWikiの編集画面のメッセージを直したい

ちいラボでは、社内WikiとしてDokuWikiを使っています。Wikiは気軽に編集できてこそ、価値が高まります。しかし、デフォルトのdokuwikiの編集画面で出てくる「当然のことですが、この文書の質を 向上 させる場合のみ編集してください。」というメッセージがちょっときついのです。編集するためのハードルが高くなってしまいそうですね。 そこで変更するための方法をまとめました。編集画面のメッセージとは dokuwikiで「ページの編集」をすると、編集画面上部にメッセージが表示...
2019.11.19 2024.03.06
ホームページ運用