numbers
03.29.2021

highlight.jsに行番号を追加する方法

highlight.jsを使ってソースコードを綺麗に表示するだけでも充分なのですが、行番号があるとコードの解説がしやすいですよね。 この記事では、highlight.jsで整えたコード表示に、行番号を入れる方法をまとめました。 開発者さんのGitHub(https://github.com/wcoder/highlightjs-line-numbers.js/)のREADME.mdファイルに導入方法が説明されています。 まだhighlight.jsを導入していない場合は、こちらの記事を先にお読みください* ライブラリの読み込み <head></head>タグ内で読み込んでいる highlight.js コードの部分を下記のように変更します。 変更前 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <script>hljs.highlightAll();</script> 変更後 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <!-- highlightjs-line-numbers.js: 行番号の追加 --> <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> <script> hljs.highlightAll(); hljs.initLineNumbersOnLoad(); //行番号用の起動コードを追加 </script> 上記のように行番号表示用のコードを入れると、私の場合はこのようになりました。 CSSでデザインを整える 枠線や数字の幅などいろいろと気になったので、私の場合は下記のようにデザインを変更しました。 /* 枠線の削除 */ .hljs-ln { margin-bottom: 0; border: none; } .hljs-ln tr, .hljs-ln td { border: none; } /* 行番号 */ .hljs-ln-numbers { font-family: inherit; -webkit-touch-callout: none; /* スマホ等で長押しで表示されるポップアップメニューの非表示 */ -webkit-user-select: none; /* コードコピー時に行番号が除外されるようにする */ -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; color: #ccc; /* 行番号の色 */ vertical-align: top; padding-right: 10px; width: 2rem; /* 番号の幅 */ min-width: 2rem; /* 番号の最低幅 */ } .hljs-ln-code.hljs-ln-line { …

wordpress
02.13.2021

ワードプレス: タグクラウドのカスタマイズ

このウェブサイトはWordPressを使って作成しています。 ちょこちょこカスタマイズをしているので、メモにしました。今回はタグクラウドに関するカスタマイズ。いろいろ試してみて、最終的にはこのような感じに落ち着きました。 Before After functions.phpやstyle.cssに追記した内容は下記です。 ※ もしお試しになる場合には、特にfunctions.phpをいじる際、自己責任においてお試しください。 カスタマイズしたいと思った部分 私の使用しているWordPressテーマのタグクラウドはデフォルトだとこんな感じでした。右側のタグクラウドは「<?php the_widget('WP_Widget_Tag_Cloud'); ?>」で任意の場所にタグクラウドを表示したものです。 ここが気になる 投稿数によりフォントサイズが違う → functions.php the_widget( )で呼び出すタグクラウドも投稿数を表示したい → functions.php 文字色がaタグの色になっている(右のタグクラウド) → CSS hoverしているときのリンクの色の変化 → CSS どれがひとつのタグ名なのか分からない → CSS タグのアイコンをつけてみようかな → CSS とりあえずフォントの大きさや投稿数を表示するところから始めました。 フォントサイズ・投稿数表示 フォントサイズ: 下記のコードで簡単に統一されました。 投稿数の表示: 私の場合、PHPで任意の場所に呼び出すタグクラウドは、functions.phpに「$args['show_count'] = true;」を別途指示する必要がありました。 参考: WordPress公式ページ — widget_tag_cloud_args 書き込む場所: functions.php /* タグクラウド カスタマイズ */ function my_widget_tag_cloud_args($args) { $args['largest'] = 0.75; //フォント最大サイズ: 単位は下記の'unit' $args['smallest'] = 0.75; //フォント最小サイズ: 単位は下記の'unit' $args['unit'] = 'rem'; //フォントサイズの単位 $args['show_count'] = true; //タグの投稿数表示の有無 return $args; } add_filter('widget_tag_cloud_args', 'my_widget_tag_cloud_args'); サイズが整い、the_widget( )で呼び出すタグクラウドにも投稿数が表示されるようになりました。 リンクの色やタグの配置等 次に色や各タグの配置をもう少し整えたいので、下記をstyle.cssに書き込みました。 書き込む場所: style.css /* タグクラウド カスタマイズ */ .tagcloud { display: flex; flex-wrap: wrap; } .tagcloud a { border: 1px solid #ddd; /* 各タグを囲む枠線の色 */ border-radius: 2px; /* 枠線の角の丸み */ color: #555; /* …