Cocoon

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

[WordPress] ウィジェットエリアを転用して左サイドバーにした（CSS）

WordPressサイトで、ワイド画面の左側の空きスペースを活用し、目次を左サイドバーとして表示するカスタマイズを行いました。このカスタマイズは、使っていないウィジェットエリアを、CSSで転用して実現しています。画面幅に応じて表示を切り替える仕組みも導入し、小さな画面では従来の記事内目次を表示するようにしました。すぐに見出しに飛びたいパソコンで記事を読んでいるときに、スムーズに見出しに移動できるように、左サイドに目次を追加しました。従来の目次は、導入文の後（１つ目の見出しの前...

2024.08.29 2024.08.30

とりあえずのメモプログラミングホームページ運用

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

[Cocoon] アイコンリストで二項対立のスライドを作るCSS

2つの事柄を対比して説明することが多いです。毎回、Keynoteで図解を作るのは大変。テキスト入力だけでかんたんに作成できると便利です。そこで、Cocoonテーマのアイコンリストを二項対立のスライドにするCSSを作りました。追加CSSクラスにslide dichotomyを入れるアイコンリストの追加 CSS クラスに「slide dichotomy」を入力すると、二項対立（dichotomy）のスライドになります。追加されたCSSポイントは、 display: flex; j...

2024.08.18 2024.08.19

とりあえずのメモプログラミングホームページ運用

ブログカード抜粋の先頭に「関連」を付けた

ブログカード抜粋の先頭に「関連」を付けた

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...

プログラミングホームページ運用

[Cocoon] ブログカードを2列に並べるCSS

[Cocoon] ブログカードを2列に並べるCSS

メッセージ動画の一覧を並べるために、Cocoonのブログカードに「thumbnail-only」のCSSクラスを追加しました。style.cssに以下のコードを追加しました。ポイントは、「display: flex」と「flex-wrap: wrap」です。/** 2024-07-01 ブログカードを2列に並べるCSS */.blogcard-type.thumbnail-only .blogcard-snippet{ display: none;}.blogcard-typ...

とりあえずのメモプログラミングホームページ運用

[CSS]ラベルボックスをスライド画像風にした

[CSS]ラベルボックスをスライド画像風にした

ふだんは、説明用の画像スライドを用意しているのですが、WordPress上で簡易版の文字スライドを作れるようにしました。まず、このようなラベルボックス（Cocoon汎用ブロック）を作ります。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素の幅を内容に合わせて自動的に調整要素の左右の余白を自動的に調整これをカスタムクラス「slide」に追加します。ラベルボックスのスライド化枠線を半透明のグレーに設定ラベル背景色を明るいベージュに変更要素...

2024.06.17 2024.08.18

プログラミングホームページ運用

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

[Cocoon]アイコンリストにステップ箇条書きのカスタムクラスを追加した

これが普通のアイコンリストです。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるそこに、追加CSSクラスに「step-list」を入れて、アイコンを変更してみます。追加CSSクラスにstep-listを追加する全体が太字になる2行目はそのままリストタイトルの文字が大きくなる項目内の行間と項目間の余白が調整されるstyle.cssに追加しました。/** step-listタグを...

とりあえずのメモプログラミングホームページ運用

[WordPress]インデックスされていた変なURL “page/74/?cat=-1”を除外した（functions.php）

[WordPress]インデックスされていた変なURL “page/74/?cat=-1”を除外した（functions.php）

WordPressサイトのGoogle Search Consoleで、「page/74/?cat=-1」のような変なURLがインデックスされていました。このような記事一覧ページを検索インデックスから除外するために、functions.phpにコードを追加しました。page/74/?cat=-1とは？（記事一覧ページ）Google Search Consoleのインデックス済みのページを眺めていたら、変なURLがありました。 https://chiilabo.co.jp/pa...

とりあえずのメモホームページ運用

[Cocoon] ブログカードのラベルを小さくしたけど

[Cocoon] ブログカードのラベルを小さくしたけど

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。そこで、ラベルの大きさを少し小さくしてみました。/** ブログカードのラベルを小さく 2024-05-19 */.blogcard-label { top: -22px; left: 0px; padding: 0px .6em;}Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。しかし、スタイルシートを変更して表示を確認したところ、予想と異なる...

2024.05.19 2024.08.08

とりあえずのメモホームページ運用

モバイルヘッダーロゴが中央になっていたので左に直した（Cocoon 2.7.3.1）

モバイルヘッダーロゴが中央になっていたので左に直した（Cocoon 2.7.3.1）

スマホで自サイトを表示したら、ロゴの左端から中央に変わっていました。サイトロゴはもともとは中央で、自サイトでは以前にカスタマイズしていたところです。style.cssのロゴクラス（.mobile-menu-buttons .menu-button.logo-menu-button）に「justify-content: flex-start」を追加して戻しました。ちょうどCocoonテーマの更新で 2.7.3.1になっていました。環境WordPress：6.5.2、PHP：8....

2024.04.26 2024.05.12

とりあえずのメモプログラミングホームページ運用

[Cocoon] サイトロゴのリンク先をページ種類で変えた（WordPress）

[Cocoon] サイトロゴのリンク先をページ種類で変えた（WordPress）

Cocoonテーマでサイトロゴのリンク先を変更したいと思って、 functions.phpをカスタマイズしました。add_filterで「'mobile_header_site_logo_url'」の処理で条件分岐するようにして、記事ページとトップページではブログ一覧に移動するように変更しました。ロゴのリンク先を分岐させたいサイト上のロゴを押したとき、通常はトップページに移行します。しかし、記事上に限ってはブログ一覧ページに移行するように変更しようと思います。以下のコードを ...

とりあえずのメモプログラミングホームページ運用

[Cocoon]タグ一覧から1記事しかないタグを除外した（WordPress）

[Cocoon]タグ一覧から1記事しかないタグを除外した（WordPress）

WordPressのCocoonテーマのタグ一覧で、1記事しかないタグを非表示にするように、functions.phpのショートコードを修正しました。記事数が2以上のタグを降順で表示するようにしたら、タグ一覧がスッキリして関連記事を探しやすくなりました。生成AIでコードの修正案を生成したので、数分でできました。環境WordPress, Cocoonテーマさらにタグ一覧をカスタマイズした以前、WordPressサイトで記事のタグ一覧を表示するショートコードを作りました。しかし、...

2024.04.13 2024.04.21

とりあえずのメモプログラミングホームページ運用

[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

[WordPress 6.5] ブログカードでYouTube動画がうまく表示されない？(Cocoonのキャッシュとリンク)

Cocoonテーマの「ブログカード」を使ってYouTube動画を埋め込んでいるのですが、たまに外部ブログカードとして表示されてしまうことがあるんです。原因を調べてみると、YouTubeで公開前処理が終わる前に埋め込み動画を設置したことや、URL貼付け時に「リンク」に自動変換されていることが関係しているようです。埋め込み動画を設置するには、YouTube上で閲覧可能になるまで待って、URLに付いたリンクを削除する必要があります。ブログカードで動画を埋め込んでいるブログ内にYou...

2024.04.10 2024.04.14

とりあえずのメモトラブルと対処ホームページ運用

WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

WordPress 6.5にアップデートしたらブログカード内のURLに改行が追加されるようになった[Cocoon]

昨日、WordPress6.5にアップデートしたところ、ブログカードを再編集したときに、URLの間に空行が追加されることに気づきました。どうも、ブロックエディタのブログカード内での改行の仕様が変更になっているようです。Cocoon バージョン：2.7.2.5で修正されました。環境Cocoonバージョン: 2.7.2.3WordPress: 6.5ブログカードが妙に縦に伸びているブログカードに複数URLを挿入する運用をしています。WordPress6.5にアップデート後に、ブロ...

2024.04.04 2024.04.10

とりあえずのメモトラブルと対処プログラミングホームページ運用

[Cocoon] 「SNSシェア」ボタンをショートコードで表示できるようにした

[Cocoon] 「SNSシェア」ボタンをショートコードで表示できるようにした

記事内で、以下のショートコードを入力することで、好きな位置にSNSシェアボタンを出せるようにしたいと思います。[sns_share_buttons]できたコード（functions.php）はこちら。/** CocoonのSNSシェアボタンを表示するショートコード 2024-02-18 */add_shortcode( 'sns_share_buttons', 'wrap_get_template_sns_share' );if ( ! function_exists( 's...

とりあえずのメモプログラミングホームページ運用

教室のトップページの色数を減らしてみた

教室のトップページの色数を減らしてみた

教室のトップページを「すっきり」した印象にしようと、白基調にして要素の色数を減らしてみました。枠を目立たなくして、中の背景色を白にしてみました。こちらもどうぞ。（参考）短時間で得られる刺激から距離を置く | Piyopanman

とりあえずのメモホームページ運用

[Cocoon] ブログカードを編集するとURLだけが表示されるようになった？（Cocoon 2.6.3.2）

[Cocoon] ブログカードを編集するとURLだけが表示されるようになった？（Cocoon 2.6.3.2）

最近、過去に入れていたリンクがCocoonのブログカードになっていないことがあります。ブログカード内を編集したタイミングで、ブロックのHTMLの整合性が崩れるようです。いったん、「書式を削除」して、行頭の余分な空白を消し、改行しなおすと元に戻せます。ブロック内の改行の扱いが<p>から<br>に変更になっているようです。WordPress 6.3にアップデート後の仕様変更によるもので、Cocoonの最新版（Cocoon 2.6.3.3）では、対応されました（追記：2023年8月...

2023.07.27 2024.04.04

とりあえずのメモホームページ運用

[Cocoon] 広告位置でAdSenseのモバイル広告サイズが違う？

[Cocoon] 広告位置でAdSenseのモバイル広告サイズが違う？

モバイル広告のサイズは広告コードの入れ方で変わります。自動広告だと広告スペースの位置や大きさを認識して自動的にサイズを決めます。モバイル対応のレスポンシブ広告にするには、「オート」ではなく広告ユニットを設定します。本文中などだと逆に大きく表示されました。モバイル広告のサイズと広告コードAdSenseのコードの入れ方によって、モバイル広告のサイズが違うことに気づきました。左は、Cocoonの「広告」設定で挿入した広告で、右 2つは、Cocoonの「広告」ウィジェットで挿入した広...

2023.07.18 2023.07.22

とりあえずのメモホームページ運用追記予定の話

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。Largest Contentful Paint を速めるのに、ちょっと効果がありました。項目FontAwesome 5FontAwesome 4パフォーマンス9294First Contentful Paint1.9 秒1.8 秒Largest Contentful P...

2023.07.15 2023.07.16

とりあえずのメモホームページ運用

Cocoonの「事前読込みドメイン」を減らした（DNSプリフェッチ）

ついでに、「LiteSpeed Cacheのは、Cocoonの機能と重複する」ということで、Cocoonの事前読込み設定も確認してみました。DNSプリフェッチ事前読込みは、「DNSプリフェッチ」と「preconnect」に関係しています。ドメイン名からIPアドレスを求める処理（DNSの名前解決）にかかる時間は平均して 200ミリ秒と言われています。要は、アクセスしそうなドメインの IPアドレスを事前に調べておくことです。Webブラウザーやアプリケーションにおいて、リンクで指定...

とりあえずのメモホームページ運用追記予定の話

[Cocoon] LiteSpeed Cacheを改めて使ってみる

[Cocoon] LiteSpeed Cacheを改めて使ってみる

PageSpeed Insightsをみると、あとは「サーバーの応答時間」を改善するぐらいです。以前、サーバーキャッシュを設定したら、更新が反映されなかったり、ページ内のランダム要素が固定化したり、とかえって困ることがありました。改めて調べてみたら「LiteSpeed Cacheの不具合の少ない設定方法と使い方 | マニュオン」での解説がわかりやすかったので、LiteSpeed Cacheのプラグイン設定に再挑戦しました。ただ、結果としてはパフォーマンススコアが「85」→「...

2023.07.14 2023.07.15

とりあえずのメモホームページ運用

次のページ

1 2 … 4