とりあえずのメモ [Cocoon] 記事の関連タグをサイドバーに表示した・その2（ショートコードにできた）
結論としては、the_tag_links() ではなく、get_the_tag_links()を呼べばよかっただけでした。
以前の方法の問題点
以前、記事の関連タグをサイドバーに表示するときに、ショートコードにできず、テキスト...
Cocoon
とりあえずのメモ 
とりあえずのメモ Cocoonで作った注目記事ランキングのショートコードを修正した
Cocoonテーマのコードを利用して、自前の「注目記事ランキング」を作っていたのですが、更新によってエラーになってしまいました。
改めて、コードを修正して直すことができました。
サイトのPHPにエラーがある
教室ホームペ...
とりあえずのメモ [WordPress] カテゴリーが更新されない？
WordPressで記事のカテゴリーを増やしたら、投稿パネルの「カテゴリー」が更新されない、というケースがありました。
カテゴリーを増やした別のPCからログインして、記事を編集しようとすると、記事編集画面のカテゴリーが以前のままなの...
とりあえずのメモ [cocoon]Amazonリンクの表示スタイルを少しスッキリさせた【display:flex】
スマホでブログを表示したときに、Amazonリンクの下にあるショップへのリンクボタンがちょっと大きすぎる気がしました。
CSSで少し微調整していきます。
リンクボタンを一列にまとめる
まずは、縦に並んで画面を占有している...
とりあえずのメモ [Cocoon]モバイルサイトフォントを17pxに変更した
これまで、少し文字は大きめにしていましたが、スマホから見た時に、文章の行数が多くなっている気がしました。
そこで、「モバイルサイトフォント」のサイズを「18px」から「17px」に変更してみました。
１行あたりの文字数は、表示...
インターネット小話 [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コミュニティ支援プログラム」「はてなブログ 学校支援プログラム」を開始しました ...