WordPress

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

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

WordPressのカスタマイズにはPHPコードを利用しますが、テンプレートをいじるのはなんか不安です。ウィジェットとしてPHPコードを実行したいと思います。追記(2024-07-20)任意のPHPコードを評価する機能は、セキュリティリスクが大きいので削除しました。カスタムHTMLではPHPコードは実行できないまず試したのがウィジェットの「カスタムHTML」です。しかし、「<?」で始まるタグはエラーになってしまいます。Special characters must be es...
WP ULikeプラグインがAMPページでうまく表示されない [WordPress] ニッチな話題

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

WP ULikeプラグインは、WordPressに「いいね」ボタンを設置するプラグインです。通常ページではこのようにハートマークのいいねボタンが表示されます。ところが、AMPページだと……0の隣の小さな白い丸になってしまっています。このハートマークは、CSSの:after 擬似クラスで背景画像として表示されています。ところが、AMPページでは:after擬似クラスが使えないため、何も表示されていないのです。いったんWP ULikeプラグインは無効にしました。残念。こちらもどう...
WordPressで効率的にブロックを挿入したい! 【スラッシュ挿入を活用】 (Change Block Keywordsプラグイン) ホームページ運用

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

WordPressのブロックエディタには、スラッシュでブロックを挿入する機能があります。これを「slash inserter(スラッシュ挿入)」といいます。「slash inserter」で検索すると、英語の記事がいくつか出てきます。「change-block-keywords」プラグインを使うと、スラッシュ挿入のキーワードを自分で設定できるようになります。追記:2024-04-26ChangeBlockKeywordsプラグインのメンテナンスは、2021年5月を最後に止まっ...
WordPressのログイン画面にパスワードを入れても進まない ~WordPressアプリ・Jetpack ホームページ運用

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

スマホでブログを書こうと思って、WordPressアプリをインストールしました。ところが、WordPressアプリと連携したら、なぜか通常のブラウザからのログインができなくなってしまいました。WordPressアプリログイン画面でパスワードを入力しても、ぐるぐるまわって先に進みません。後でわかったのですが、どうもロボットチェックの表示でひっかかかっていたようです。思い当たることといえば、WordPressアプリ。WordPress.comWordPressアプリは、WordP...
[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】 ニッチな話題

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

Cocoonテーマのブログカードをはてなブログ風のデザインに変更する方法を紹介します。functions.phpファイル内のurl_to_internal_blogcard_tag関数を修正して、ブログカードの要素の表示順を変更します。ブログロゴを上部に移動させ、CSSで抜粋のフォントサイズなどを調整することで、目的のデザインを実現できます。
ブログの絵文字のサイズを小さくした【CSSのクラス指定】 ホームページ運用

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

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

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

今回はCocoonとCSSを使って、note風のシンプルなブログデザインに変更してみました。note風デザインの記事一覧「note(ノート)」というブログサービスをご存知ですか?ブログサービスといえば、ヤフーブログ、アメブロ、はてなブログといろいろありますが、noteの特徴は簡単にいえば、投稿されたブログにカンパしたり、有料記事として公開することができること。でも、それ以上にnoteの特徴になっているのは、シンプルなデザインだと思います。2カラムのアメブロと比べてみますと…パ...
[WordPress] 急に番号付きリストが表示されなくなった 【VK All in One Expansion Unit プラグインのリストスタイル】 ホームページ運用

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

ブログを書いていたら、突然「番号付きリスト」がうまく出てこなくなったので、原因を調べてみました。ポイントWordPressのアップデートで番号付きリストが表示されなくなったので、VK All in One Expansion Unit プラグインを削除した。番号付きリストとは?ウェブページ(HTML)の要素として、リストは2種類あります。箇条書きリスト(<ul>タグ)番号付きリスト(<ol>タグ)ちなみに ↑ は箇条書きリストです「番号付きリスト」は、順序のある項目を並べると...
[WordPress] アップロードした画像ファイル名から全角文字をなくすには? 【WP Multibyte Patch】 ホームページ運用

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

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

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

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

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

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

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

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