Cocoon

[Cocoon]モバイルサイトフォントを17pxに変更した とりあえずのメモ

[Cocoon]モバイルサイトフォントを17pxに変更した

これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。１行あたりの文字数は、表示するスマホによって異なりますが、自分のスマホ（Pixel 5：1080x2340）で確認すると、18文字になりました。このフォントサイズを選んだのは、「note 」や「ほぼ日刊イトイ新聞」などの読みものメインのサイトを参考にしました。以前に、糸井重里さんが、...
2022.05.18
とりあえずのメモホームページ運用
[Cocoon] 広告除外カテゴリのページなのにAdSense自動広告が表示された【Cocoon 2.4.2の更新で直った】 インターネット小話

[Cocoon] 広告除外カテゴリのページなのにAdSense自動広告が表示された【Cocoon 2.4.2の更新で直った】

AdSenseの自動広告が、除外カテゴリーのページで表示されていました。Cocoon 2.4.2のアップデートで、広告表示がちゃんと制御できるようになりました。Google AdSenseの広告コード一般向けの読みものブログには、収益化のために広告をつけていますが、教室内のお知らせには広告をつけないように設定しています。ところが、いつの間にか 広告の表示を除外しているカテゴリのページなのに、AdSense広告の自動広告が表示されていることに気づきました。WordPressでC...
2022.04.03 2022.04.04
インターネット小話ホームページ運用
[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた プログラミング

[CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた

ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。特に、このホームページでは、多くのアイコンリスト、ラベルボックスを「枠なし」「薄い背景色」で設定しています。印刷時に、背景色がなくなってしまうと、構造がわかりにくくなってしまうのです。そこで、設定した背景色をもとに、枠（濃いめ）をつけるようにしました。WordPre...
2022.03.27
プログラミングホームページ運用
画像ごとの個別ページは画像SEOに有効な場合もある【検索とページ構造】 ニッチな話題

画像ごとの個別ページは画像SEOに有効な場合もある【検索とページ構造】

「検索エンジンに評価される工夫」のことを「SEO：検索エンジン最適化」といいます。現在はキーワード検索だけではなく、地図で表示されるための「MEO（地図エンジン最適化）」など、ひろがっています。今回は、Googleの「画像検索でのSEO」についての話が興味深かったので、メモしておきます。へ〜、「画像SEO」という考え方もあるんだね。画像検索と個別ページ「Google SEO オフィスアワー（2021-11-05）」の25:07ごろからの話題で、画像SEOについての話がありまし...
2021.12.01 2021.12.02
ニッチな話題ホームページ運用
アンカー広告が印刷に表示される [Google Adsense, Cocoon] ホームページ運用

アンカー広告が印刷に表示される [Google Adsense, Cocoon]

自分のブログを印刷していたら、アンカー広告が印刷されてしまうことに気づきました。ページごとに下部に広告が表示されてしまっています。◆追記（2022年4月3日）Cocoon 2.4.2の更新で直ったかもしれません。これまでは、本文内のAdsense広告は、印刷されないように設定されていました。印刷時のスタイルを、@media print で指定することができるからです（WordPressのCocoonテーマを利用しています）。しかし、最近（2021年7月19日から）表示されるよ...
2021.08.11 2022.04.03
ホームページ運用
Cocoonで注目記事ランキングのショートコードを作成した【SQLって何？からのデータベース操作】 ニッチな話題

Cocoonで注目記事ランキングのショートコードを作成した【SQLって何？からのデータベース操作】

記事のアクセスランキング（人気記事）は、なかなか上位の記事が変わらない傾向があります。そこで、WordPressの記事のアクセス数の前週比のランキング（急上昇の記事）を作りたいと思いました。Cocoonのコードを読んでみるとアクセスランキングは、SQLクエリで生成されていました。完成したものCocoonのget_access_ranking_recordsのSQLクエリCocoonのアクセスランキングは、「lib/page-access/access-func.php」の「f...
2021.04.11 2024.07.20
ニッチな話題プログラミングホームページ運用
[Cocoon] 記事のタグをサイドバーに表示した（タグクラウドではない） インターネット小話

[Cocoon] 記事のタグをサイドバーに表示した（タグクラウドではない）

ブログのサイドバーの項目を見直してみました。WordPressのサイドバーに記事のタグを追加したカスタム検索とナビゲーションメニューの間に、・リンク・目次・タグ・関連記事を追加しました。とくに、記事のタグを追加するのが、大変だったのでメモします。「タグ」を表示する今回、サイドバーにタグを設置しようと思ったのは、検索が面倒な人に関連記事を探しやすくしたいからです。Cocoonテーマでは、記事のタイトル上下や本文下には、「タグ」を表示することができます。Cocoonの投稿にタグを...
2021.04.04 2024.04.21
インターネット小話ニッチな話題ホームページ運用
AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾） ニッチな話題

AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾）

cocoonのAMP機能で生成しているCocoonテーマのAMP設定でAMPページを生成しています。通常ページとAMPページの差デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります。ヘッダーロゴが大きい。画面を圧迫しているモバイルメニューがない。検索からの流入が他のページに移動しにくい。そこで、メニューを追加したいと思います。ウィジェットにナビゲーションメニューを追加まずは、ウィジェットでナビゲーションメニューを追加します。ただ、このままだとメニュー...
2021.03.27
ニッチな話題ホームページ運用
Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？） インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？）

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。これも、note風スタイルの一環ですね。大きな字で見やすいタイトルと正方形のアイキャッチアイキャッチ画像より、タイトル文に目がいくようにする意図で、変更しました。常に左から読んで行けるほうが、目にラクな気がします。といって、そこまでブログ一覧はアクセスがないんですが……笑CSSCSSはこんな感じです。display: flexで下位の要素の順番（order）を変更できるようにしています。/** ...
2021.03.22 2024.08.30
インターネット小話ニッチな話題ホームページ運用
[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう ニッチな話題

[Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう

読んでいる文章をずらされると腹が立つだろう。だから、そういうページは直した方がよい。さて、どうやって？　という話。CLS（累積レイアウト変更）とはウェブページはあとから画像が表示されると、下にある文章がずれます。これを「累積レイアウト変更（CLS：Cumulative Layout Shift）」といいます。広告が多いページだと気になるのよねーユーザーの利便性が大事Googleサーチコンソールでは、このようなレイアウトのずれを指摘してくれます。CLSに関する問題：0.25超（...
2021.01.04 2023.07.03
ニッチな話題ホームページ運用
Googleアドセンスのアンカー広告を下に固定する[Cocoon] ニッチな話題

Googleアドセンスのアンカー広告を下に固定する[Cocoon]

スマートフォンのユーザーの画面上下にずっと表示する広告を、アンカー広告（あるいはオーバーレイ広告）といいます。アンカー広告がメニューバーと重なると不便なので、今回はGoogle広告のアンカー広告の位置を変更しようと思います。ウェブサイト運営者向けの話ですポイントスクリプトで上部アンカー広告を抑制できる。上下にメニューがあると、アンカー広告の配置に影響がある。【追記】パソコン画面にも表示されるようになります。（2021年7月9日）追記（2023-07-17）アンカー広告の位置指...
2020.12.22 2023.07.17
ニッチな話題ホームページ運用
note風スタイル第5弾！引用とコード ニッチな話題

note風スタイル第5弾！引用とコード

note風デザインもそろそろ簡単な微調整です。今回は引用文（blockquote）とコード（pre）のデザイン。ビフォア・アフター元のデザインに比べて、小さくグレー基調にしました。以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。ただ、文字は少し小さいかもしれません。こんな感じの引用。こんな引用元code is here { something.}引用ブロック引用ブロックは、かなりスッキリしました。.entry-content blockqu...
2020.12.21
ニッチな話題ホームページ運用
note風スタイル第４弾！目次のデザイン ニッチな話題

note風スタイル第４弾！目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。今回は、目次について。主な変更点は……文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加noteの目次の特徴は、「控えめ」なこと。記事によっては目次を付けていないものも多いです。目次（table of contents）のHTML構造.toc.toc-title.toc-contentol.toc-listliaリスト構造（ol, li）とアンカーリンク（a）の関係で、かなり複雑な入れ子になっ...
2020.12.21
ニッチな話題ホームページ運用
[Cocoon] ブログ記事の作成日時・更新日時を２段にする 【white-space pre】 ニッチな話題

[Cocoon] ブログ記事の作成日時・更新日時を２段にする 【white-space pre】

ブログ記事のタイトル部分のスタイルを少しいじりました。作成日時と更新日時を２段になるようにしました。こちらがCSSです。.entry-header .date-tags { order: 3; color: #a8abb1; font-size: 16px;}.entry-header .date-tags .post-update:after { content: "\A" ; white-space: pre ;}少し、文字の色や大きさも変更していますが、メインになるのは...
2020.12.21 2021.03.22
ニッチな話題ホームページ運用
note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】 ニッチな話題

note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。これもnoteのデザインを参考にしています。タイトルと本文の位置が近くなるので、読みやすいですよね。Cocoon設定やPHP編集もいいけれど……アイキャッチ位置を変更する方法をざっと調べると…Cocoonの設定でアイキャッチを非表示にして本文中に画像挿入する方法content.phpを書き換えて表示位置を変更する方法が紹介...
2020.12.20 2020.12.21
ニッチな話題ホームページ運用
note風スタイル第２弾！モバイルメニューを編集 ニッチな話題

note風スタイル第２弾！モバイルメニューを編集

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。今回のメインは モバイルメニューです。どうすれば、スマホユーザーにとって集中して読みやすいか、というテーマでnoteのUIを参考に、ブログのスタイルをいろいろ試してみましたので、レポートします。モバイルメニューボタンをいろいろ変更した上部バーはすっきりさせました。下部バーはLINE登録、ツイッ...
2020.12.19 2023.07.13
ニッチな話題ホームページ運用
[Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】 ニッチな話題

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

以前、funtions.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。こんなふうに変えましたいつものようにビフォー・アフターをお見せします。↓こうなりました。HTML要素を変更せずにちゃんとCSSでデザインを変えられました。CSSコードはこちらポイントはblogcard-footer要素の位置をabsolute（絶対配置）にして、移動することです。親要素内に自由に配置で...
2020.09.26 2024.08.08
ニッチな話題ホームページ運用
[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた ニッチな話題

[Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。ビフォー・アフターを比べる元のデザインがこれでちょっとラベルボックスに比べると間延びしている気がします。こんなふうにしました。ほんとはさらにリストタイトルをラベルのようにしたかったんですが、ボーダーをつけるdiv要素を変えるのは大変だったので、やめました。Cocoonのラベルボックスのいいところ記事の中のポイントが目立って、読みやすいことです。Cocoonのアイコンリス...
2020.09.26
ニッチな話題ホームページ運用
Amazon商品紹介リンクをショートコードで入れられるようにした #PR含む

Amazon商品紹介リンクをショートコードで入れられるようにした

Cocoonには商品紹介のショートコードがあります。これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表示することできることに気づきました。これまでのやり方は大変だった見出しやボタンを組み合わせて、作っていました。画像リンクやテキストリンクなどをコピーしてくるのに、かなり時間がかかります。それを、こんなふうにしました。見た目にもコンパクトだし、何よりも気軽に使...
2020.09.24 2024.08.31
#PR含むニッチな話題ホームページ運用
遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】 ニッチな話題

遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。なんか見た目にカラフルでいいですよね。cocoonでコードがハイライトしないところが何故かうまく表示されません。まずは、表示されたコードブロックを見てみてください。このように、コードブロックがあるのにjavascriptの色分けがされていません。まずはHTMLを検証してクラスを確認する検証でHTMLを見てみると、ちゃんとjavascriptのクラ...
2020.09.24 2023.04.23
ニッチな話題ホームページ運用
[Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】 ニッチな話題

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

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

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

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