ホームページ運用

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 タグの属性で指定されたレイアウトが無効です。」というエラーが表示されました。今回は、動画ファイルをアップロードするときの注意点を書きました。表示されたエラーメッセージを読むと通知メッセージによると、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 プラグインを削除した。番号付きリストとは？ウェブページ（HTML）の要素として、リストは２種類あります。箇条書きリスト（<ul>タグ）番号付きリスト（<ol>タグ）ちなみに ↑ は箇条書きリストです「番号付きリスト」は、順序のある項目を並べると...

2020.09.01 2021.10.09

ホームページ運用

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

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

2020.09.01 2021.08.06

ホームページ運用

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

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

2020.08.31

ホームページ運用

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

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

2020.08.28 2021.10.09

ホームページ運用

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を「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アソシエイト・セントラル（）を表示する「...

2020.06.14

ホームページ運用

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 構文エラーです。グーグルサーチコンソールに上のようなエラーが表示されました。すぐわかる概要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を変更しようとした際、confフォルダにuserprint.cssを追加して印刷時専用のスタイルを記述しました。しかし、変更が反映されない問題に直面。解決策として、conf/tpl/style.iniファイルに空白文字を追加して保存することで、うまくいきました。DokuWikiはスタイルシートをキャッシュで管理しているため、プラグインやテーマの変更がなければ再読み込みされないことが原因でした。userprint.cssを作成する印刷時のCSSを変...

2020.06.02 2024.02.28

とりあえずのメモホームページ運用作業効率化

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

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

2020.06.01 2023.05.20

ホームページ運用

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

今回は、ブログ記事の画像に枠をつける、という設定をしました。画像の文字がリズムを壊しているこのブログ記事で使う説明画像は、説明資料や講義でも使うので文字が入っています。しかし、これまで本文と画像内の文の見分けがつきにくく、記事を読むときに文章が繰り返されたりして、リズムが悪いように感じていました。なんか自分でも違和感があったんですよねそこで、違和感の原因を考えたところ「読む順番がわかりにくいから」と思い至りました。例えば、漫画でも上から下へ自然な順番で読むことができるように、...

2020.05.25

ホームページ運用

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

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

2020.05.21 2022.03.27

ホームページ運用

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

ブログの中でJavaScriptを動かして遊ぶ方法をご紹介します。WordPressサイトに直接HTMLコードを入力するために「カスタムHTML」というブロックを挿入します。JavaScriptのコードは最初と最後をのタグで囲んだ中に入力します。

2020.05.14 2021.12.18

ニッチな話題プログラミングホームページ運用

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

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

2020.01.13 2023.02.14

ホームページ運用

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

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

2019.11.19 2024.03.06

ホームページ運用