ブログカード

[Cocoon] ブログカードのHTML構造でCSSを整理した（style.css） とりあえずのメモ

[Cocoon] ブログカードのHTML構造でCSSを整理した（style.css）

Cocoonテーマのブログカードの追加CSSを整理しました。ブログカードのHTML階層構造とメディアクエリで順序立ててまとめました。スタイルを追加するときは、はじめから構造を意識しておけばよかったね。style.cssに追加コードを整理したいstyle.cssに追加コードが増えて来たので、整理したいと思います。ただし、優先順位の問題があるので、並び順やCSSクラスの重ねた修飾の仕方も重要です。ブログカードの階層構造Cocoonテーマのブログカードは、HTMLの階層構造になって...
2024.09.18
とりあえずのメモプログラミングホームページ運用
ブログカード抜粋の先頭に「関連」を付けた プログラミング

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

Cocoonテーマの「ブログカード」のカスタムCSSクラス「simple」の先頭に「【関連】」という文字を自動的に追加するようにしました。コードを整理して、よりスッキリとしたデザインに改善しました。「関連」という文字を先頭に追加したCocoonテーマのブログカードにCSSクラス「simple」を追加すると、文字リンクにするようにしています。このまえに「【関連】」という文字を自動的に追加するようにしました。.wp-block-cocoon-blocks-blogcard.sim...
2024.08.08
プログラミングホームページ運用
[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...
2024.07.01
とりあえずのメモプログラミングホームページ運用
[Cocoon] ブログカードのラベルを小さくしたけど とりあえずのメモ

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

ブログカードのラベルを表示させたとき、シンプルなカードデザインと合わないと感じました。少し重なっています。そこで、ラベルの大きさを少し小さくしてみました。/** ブログカードのラベルを小さく 2024-05-19 */.blogcard-label { top: -22px; left: 0px; padding: 0px .6em;}Cocoonテーマには「ブログカード」ブロックがあり、ラベルを設定できます。しかし、スタイルシートを変更して表示を確認したところ、予想と異なる...
2024.05.19 2024.08.08
とりあえずのメモホームページ運用
[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] ブログカードを編集すると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] ブログカードをラベルボックスのように表示するCSS プログラミング

[Cocoon] ブログカードをラベルボックスのように表示するCSS

カタカナ用語は、はじめて目にする人には意味がわかりにくいものです。記事の中で共通して使われる用語説明を、挿入しやすいように、「ブログカード」を活用することにしました。ブログカードでは、スニペットという概要を表示できます。用語と説明を小さな記事にしておけば、ブログ内に挿入できます。「word-description」というHTMLクラスへのスタイルシートで「ラベルボックス」のように表示させてみます。こちらがスタイルシートです。不要な項目を非表示（display: none;）に...
2023.03.25 2023.03.26
プログラミングホームページ運用
[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】 ニッチな話題

[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】

以前、funtions.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。こんなふうに変えましたいつものようにビフォー・アフターをお見せします。↓こうなりました。HTML要素を変更せずにちゃんとCSSでデザインを変えられました。CSSコードはこちらポイントはblogcard-footer要素の位置をabsolute（絶対配置）にして、移動することです。親要素内に自由に配置で...
2020.09.26 2024.08.08
ニッチな話題ホームページ運用
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
ホームページ運用作業効率化
[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】 ニッチな話題

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

Cocoonテーマのブログカードをはてなブログ風のデザインに変更する方法を紹介します。functions.phpファイル内のurl_to_internal_blogcard_tag関数を修正して、ブログカードの要素の表示順を変更します。ブログロゴを上部に移動させ、CSSで抜粋のフォントサイズなどを調整することで、目的のデザインを実現できます。
2020.09.15 2024.08.08
ニッチな話題ホームページ運用
とりあえず今の追加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
ニッチな話題ホームページ運用