ニッチな話題 Cocoonで注目記事ランキングのショートコードを作成した【SQLって何？からのデータベース操作】
記事のアクセスランキング（人気記事）は、上位の記事がなかなか変わらないので、あまりおもしろくありません。
WordPressの記事のアクセス数の前週比のランキング（急上昇の記事）を作りたいと思って、Cocoonのコードを読んでみまし...
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]外部ブログカードのサイトアイコンを上に移動した
以前、funtion.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。
しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。
こんなふうに変えました
...
ニッチな話題 [Cocoon]アイコンリストのデザインをラベルボックスみたく余白をつめた
Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。
ビフォー・アフターを比べる
元のデザインがこれで
ちょっとラベルボックスに比べると間延びしている気がし...
ニッチな話題 Amazon商品紹介リンクをショートコードで入れられるようにした
Cocoonには商品紹介のショートコードがあります。
これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。
ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表...
ニッチな話題 遅延読込みでコードハイライトが機能しない【LiteSpeed Cache】
cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。
なんか見た目にカラフルでいいですよね。
cocoonでコードがハイライトしない
と...
ニッチな話題 cocoonのfunction.phpを追加してブログカードの表示順を変更してみる
こちらの記事を参考にブログカードの表示順を変更してみることにしました。
目的は、ブログカードの下（blogcard-footer）になっているブログロゴを上に上げる、ということです。
今のブログ（C...