cocoon

ニッチな話題

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

記事のアクセスランキング(人気記事)は、上位の記事がなかなか変わらないので、あまりおもしろくありません。 WordPressの記事のアクセス数の前週比のランキング(急上昇の記事)を作りたいと思って、Cocoonのコードを読んでみまし...
インターネット小話

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

ブログのサイドバーの項目を見直してみました。 WordPressのサイドバーに記事のタグを追加した カスタム検索とナビゲーションメニューの間に、・リンク・目次・タグ・関連記事を追加しました。 とくに、記事のタグを追加する...
ニッチな話題

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

cocoonのAMP機能で生成している CocoonテーマのAMP設定でAMPページを生成しています。 通常ページとAMPページの差 デフォルトスタイルだと、AMPページのスタイルは通常ページとだいぶ差があります...
インターネット小話

Cocoonで記事一覧の画像と文字の位置を逆にした(note風スタイル第6弾?)

久々にホームページのCSSをいじりました。今回は、記事一覧の画像と文字の配置です。 これも、note風スタイルの一環ですね。 大きな字で見やすいタイトルと正方形のアイキャッチ アイキャッチ画像より、タイトル文に目がいくよ...
2021.03.23
ニッチな話題

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

読んでいる文章をずらされると腹が立つだろう。 だから、そういうページは直した方がよい。 さて、どうやって? という話。 CLS(累積レイアウト変更)とは ウェブページはあとから画像が表示されると、下にある文...
2021.01.05
ニッチな話題

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

スマートフォンのユーザーの画面上下にずっと表示する広告を、アンカー広告(あるいはオーバーレイ広告)といいます。 アンカー広告がメニューバーと重なると不便なので、今回はGoogle広告のアンカー広告の位置を変更しようと思います。 ...
2020.12.23
ニッチな話題

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

note風デザインもそろそろ簡単な微調整です。 今回は引用文(blockquote)とコード(pre)のデザイン。 ビフォア・アフター 元のデザインに比べて、小さくグレー基調にしました。 以前は引用部分が...
ニッチな話題

note風スタイル第4弾!目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。 今回は、目次について。 主な変更点は…… 文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加 noteの目次の特徴は、「控え...
ニッチな話題

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

ブログ記事のタイトル部分のスタイルを少しいじりました。 作成日時と更新日時を2段になるようにしました。 こちらがCSSです。 .entry-header .date-tags { order: 3; colo...
2021.03.22
ニッチな話題

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

Cocoonのアイキャッチ画像は、既定ではタイトルの下に表示されます。 今回はアイキャッチ画像をタイトルの上に表示されるように、スタイルシートを編集しました。 これもnoteのデザインを参考にしています。 タイ...
2020.12.21
ニッチな話題

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

こんにちは。以前、noteのような読みやすいブログを目指して、スタイルシート(CSS)を変更しました。 前回は、パソコンでもシングルカラムの方が読みやすいのではないか、というテーマでした。 今回のメインはモバ...
2020.12.21
ニッチな話題

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

以前、funtion.phpでテンプレートを変更することで、ブログカードのデザインを変更しました。 しかし、「デザインを変更するならCSS」ということで、改めて挑戦してみました。 こんなふうに変えました ...
ニッチな話題

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

Cocoonのアイコンリストのデザインが、ラベルボックスに比べて余白が多すぎる感じがしたので、修正しました。 ビフォー・アフターを比べる 元のデザインがこれで ちょっとラベルボックスに比べると間延びしている気がし...
ニッチな話題

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

Cocoonには商品紹介のショートコードがあります。 これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。 ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表...
2021.04.03
ニッチな話題

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

cocoonには「ソースコード設定」をしておいて「コードブロック」を挿入すると、コードをカラフルにハイライト表示する機能があります。 なんか見た目にカラフルでいいですよね。 cocoonでコードがハイライトしない と...
2020.09.27
ニッチな話題

cocoonのfunction.phpを追加してブログカードの表示順を変更してみる

こちらの記事を参考にブログカードの表示順を変更してみることにしました。 目的は、ブログカードの下(blogcard-footer)になっているブログロゴを上に上げる、ということです。 今のブログ(C...
2020.09.26
タイトルとURLをコピーしました