ただのメモ書き [Cocoon]モバイルサイトフォントを17pxに変更した
これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。
そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。
１行あたりの文字数は、表示...
Cocoon
ただのメモ書き 
インターネット小話 [Cocoon] 広告除外カテゴリのページなのにAdSense自動広告が表示された【Cocoon 2.4.2の更新で直った】
AdSenseの自動広告が、除外カテゴリーのページで表示されていました。Cocoon 2.4.2のアップデートで、広告表示がちゃんと制御できるようになりました。
Google AdSenseの広告コード
一般向けの読みものブロ...
プログラミング [CSS] Cocoonで印刷時のアイコンリスト・ラベルボックスに枠をつけた
ウェブページを印刷する時に、通常は「背景画像を表示しない」になっていて、画面で表示されている背景画像や背景色が印刷されません。
これには、インクの使い過ぎを防ぐ効果がありますが、画面表示と見た目が変わってしまいます。
特に、こ...
ニッチな話題 画像ごとの個別ページは画像SEOに有効な場合もある【検索とページ構造】
「検索エンジンに評価される工夫」のことを「SEO：検索エンジン最適化」といいます。
現在はキーワード検索だけではなく、地図で表示されるための「MEO（地図エンジン最適化）」など、ひろがっています。
今回は、Googleの「画像...
ホームページ運用 アンカー広告が印刷に表示される [Google Adsense, Cocoon]
自分のブログを印刷していたら、アンカー広告が印刷されてしまうことに気づきました。
ページごとに下部に広告が表示されてしまっています。
◆追記（2022年4月3日）Cocoon 2.4.2の更新で直ったかもしれません。
...
ニッチな話題 Cocoonで注目記事ランキングのショートコードを作成した【SQLって何？からのデータベース操作】
記事のアクセスランキング（人気記事）は、上位の記事がなかなか変わらないので、あまりおもしろくありません。
WordPressの記事のアクセス数の前週比のランキング（急上昇の記事）を作りたいと思って、Cocoonのコードを読んでみまし...
インターネット小話 [Cocoon] 記事のタグをサイドバーに表示した（タグクラウドではない）
ブログのサイドバーの項目を見直してみました。
WordPressのサイドバーに記事のタグを追加した
カスタム検索とナビゲーションメニューの間に、・リンク・目次・タグ・関連記事を追加しました。
とくに、記事のタグを追加する...
ニッチな話題 AMP用ページを見やすくしたりメニューをつけたり（note風スタイル第7弾）
cocoonのAMP機能で生成している
CocoonテーマのAMP設定でAMPページを生成しています。
通常ページとAMPページの差
デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります...
インターネット小話 Cocoonで記事一覧の画像と文字の位置を逆にした（note風スタイル第６弾？）
久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。
これも、note風スタイルの一環ですね。
大きな字で見やすいタイトルと正方形のアイキャッチ
アイキャッチ画像より、タイトル文に目がいくよ...
ニッチな話題 [Cocoon] カルーセルの「CLSに関する問題」を改善したいけれど難しそう
読んでいる文章をずらされると腹が立つだろう。
だから、そういうページは直した方がよい。
さて、どうやって？ という話。
CLS（累積レイアウト変更）とは
ウェブページはあとから画像が表示されると、下にある文...
ニッチな話題 [cocoon] Googleアドセンスのアンカー広告を下に固定する
スマートフォンのユーザーの画面上下にずっと表示する広告を、アンカー広告（あるいはオーバーレイ広告）といいます。
アンカー広告がメニューバーと重なると不便なので、今回はGoogle広告のアンカー広告の位置を変更しようと思います。
...
ニッチな話題 note風スタイル第5弾！引用とコード
note風デザインもそろそろ簡単な微調整です。
今回は引用文（blockquote）とコード（pre）のデザイン。
ビフォア・アフター
元のデザインに比べて、小さくグレー基調にしました。
以前は引用部分が...
ニッチな話題 note風スタイル第４弾！目次のデザイン
「note風スタイル」ということで、ブログのスタイルシートを編集しています。
今回は、目次について。
主な変更点は……
文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加
noteの目次の特徴は、「控え...
ニッチな話題 [Cocoon] ブログ記事の作成日時・更新日時を２段にする 【white-space pre】
ブログ記事のタイトル部分のスタイルを少しいじりました。
作成日時と更新日時を２段になるようにしました。
こちらがCSSです。
.entry-header .date-tags {
order: 3;
colo...
ニッチな話題 note風スタイル第３弾！ Cocoonのアイキャッチをタイトルの上に変更した 【display-flex】
Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。
今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。
これもnoteのデザインを参考にしています。
タイ...
ニッチな話題 note風スタイル第２弾！モバイルメニューを編集
こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート（CSS）を変更しました。
前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。
今回のメインはモバ...
ニッチな話題 [Cocoon]外部ブログカードのサイトアイコンを上に移動した【CSSのposition:absolute】
以前、funtion.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。
しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。
こんなふうに変えました
...
ニッチな話題 [Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた
Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。
ビフォー・アフターを比べる
元のデザインがこれで
ちょっとラベルボックスに比べると間延びしている気がし...
ニッチな話題 Amazon商品紹介リンクをショートコードで入れられるようにした
Cocoonには商品紹介のショートコードがあります。
これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。
ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表...
ニッチな話題 遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】
cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。
なんか見た目にカラフルでいいですよね。
cocoonでコードがハイライトしない
と...
ニッチな話題 [Cocoon]ブログカードの表示順を変更してみる【functions.phpに追加する方法】
今のブログ（Cocoonのもとのデザイン）がこんな感じです。
これを、はてなブログ風にしてみたいんですよね。
出典：「はてなブログ OSSコミュニティ支援プログラム」「はてなブログ 学校支援プログラム」を開始しました ...
ホームページ運用 CocoonのSNSフォローボタンが大きかったので小さくした（border-radius）[CSS]
ちいラボのブログ メンテナンス日記！
今日は「フォローボタン」のデザインをおしゃれにしてみました。メモしておきます。
環境
WordPress 5.5.1 (Cocoon テーマ バージョン: 2.2.3.1)
「SN...