ソースコードのハイライトする際の左上の言語名 - Cocoonテーマに関する質問 https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/ Cocoon ディスカッション掲示板 ja Fri, 16 Oct 2026 10:58:01 +0000 wpForo 60 RE: ソースコードのハイライトする際の左上の言語名 https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21857 Sun, 15 Sep 2019 11:30:23 +0000 CSSでスタイリングしているだけです。
スキンなどで実装されています。

これはテーマは、あまりCSSサイズを増やしたくないので、実装はしてないです。

]]> Cocoonテーマに関する質問 わいひら https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21857 RE: ソースコードのハイライトする際の左上の言語名 https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21855 Sun, 15 Sep 2019 11:18:55 +0000 かうたっくさん＞
Cocoonの機能ではなく、スキンの機能だったんですね。
疑問が解決しました、ありがとうございます。

わいひらさん＞
よければですが、添付画像のような感じで左上に自分の好きな文字列を入れることができる機能を追加していただけるとうれしいです。

例えば大量のコードを全部載せようとすると、ファイル名もあったほうが便利だったりするからです。

]]> Cocoonテーマに関する質問 youtuberOK https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21855 RE: ソースコードのハイライトする際の左上の言語名 https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21851 Sun, 15 Sep 2019 10:02:25 +0000 pre.css:before { position: absolute; top: 0; left: 0; content: "CSS"; background: #0e7ac4; color: #fff; padding: 0 1em; font-size: 16px; }

/*
Skin Name: Season (Autumn)
Description: 春夏秋冬のような季節をモチーフにして優しさを感じられるデザインを目指して作成されたスキン。
Skin URI: https://ponhiro.com/season/
Author: ぽんひろ
Author URI: https://ponhiro.com/
Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-season-autumn.png
Version: 1.0.0
Priority: 92
*/

なんか文字化けしてますけど、上記スキンでスタイル指定されてるかと思われます。

]]> Cocoonテーマに関する質問 かうたっく https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21851 ソースコードのハイライトする際の左上の言語名 https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21844 Sun, 15 Sep 2019 05:21:23 +0000 いつもお世話になっております。

さっそく本題なんですが、このCocoonのサイトでよく使っている添付画像のようなカスタマイズはCocoonに内蔵されているのでしょうか？

]]> Cocoonテーマに関する質問 youtuberOK https://wp-cocoon.com/community/cocoon-theme/%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%81%ae%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%81%99%e3%82%8b%e9%9a%9b%e3%81%ae%e5%b7%a6%e4%b8%8a%e3%81%ae%e8%a8%80%e8%aa%9e%e5%90%8d/#post-21844