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 { …

icons
03.28.2021

iPone・SafariでもFont Awesomeを表示する方法

先日ふとiPhone(Safari)で自分のサイトの表示を見てみたら、Font Awesomeのアイコンが全て「 □ 」になっていてかなり焦りました。 原因は広告表示を制限するアプリで、Ad-Blocker Pro、Adblock Plus、AdFilter、AdGuardのPrivacy、が影響していました(どれかひとつでも解除するとSafariでもアイコンが表示されました)。 でもこの記事で書くのは「アドブロッカーを外す」という方法ではありません! 結論からずばっと言うと、<head></head>で読み込んでいるFont AwesomeのURLを下記のようにcdnjs.comで配布されているものに変更したら、アドブロッカーを外さなくてもアイコンが表示されるようになりました! <!-- 以前までの読み込みURL --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"> <!-- 今の読み込みURL --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> このリンクは cdnjs.com で font-awesome と試しに検索したら出てきました。 (ご参考までに、検索結果のページは「https://cdnjs.com/libraries/font-awesome」から飛べます Font Awesomeが更新されると変わるかもしれません) 私は一番上に出てきたリンクを使っています。 なので、all.min.cssを指定してはいますが、URLの末尾を all.css に変更しても表示されました。 また、正確にはリンクコピー時に自動で「integrity」や「crossorigin」が入っているので、 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" /> という長いコードで読み込んでいます(integrityやcrossoriginがなくても表示されます)。 integrityとは 配布しているファイルと読み込んでいるファイルが同じものかどうかを見分けるための暗号化された文字列だそう。万が一ハッキングで配布ファイルが改ざんされても、このintegrityがマッチしないので、integrityを入れておくと改ざんされたファイルが読み込まれることを防ぐことができるようです。 cdnjs.comが配信している他のJavaScriptなどのライブラリも使ってるからまあ安心かな、という軽い気持ちで、あまり期待なく試してみたので、Safariでもアイコンが表示された瞬間は飛び上がりそうでした!笑 何でこれなら表示されるのかという理由は・・・全然分かりません。 別の方法としては、CSSファイル冒頭で @import でfontawesomeを読み込んだら表示された!との情報もありましたが、私は @import のやり方が分からず(←)、エラーになったので断念(勉強します・・・)。 サイトに遊びきてくれる方に毎度「広告ブロッカーを外してください〜」なんてお願いしたく無いし、何か方法はないかな〜と思っていたので、本当に良かったです。 またいつアイコンが表示されない問題が起きるかは分かりませんが、当面これで大丈夫そうです。後日Font Awesomeがアップデートされてもまだ問題があれば、また cdnjs.com でファイルを探してみようと思います。 …

03.28.2021

HTMLやPHPのコードをそのまま表示する方法

コードをそのまま表示させたいのに、HTMLやPHPを書くとコードがごっそり非表示になってしまったり、インデントのあるコードのインデントが消え、コードが左揃えになってしまって、困ったことがありました。 この記事では、それらを解決した方法をまとめました。 コードをそのまま表示する方法 まずは、HTMLやPHPをそのまま表示させる方法です。WordPressに標準搭載されているコードエディターやカスタムHTMLブロックを使います。 一番簡単なのはコードエディターを使うことです。特殊文字のエスケープなども必要なく、そのまま表示してくれました。 カスタムHTMLだと特殊文字のエスケープが必要ですが、コードエディターの場合はその一手間が要らないようです。一つずつ説明します。 コードエディターにPHPを書いた場合 例えば<?php echo 'hello!'; ?>というコードを表示させたいとして、コードエディターに <?php echo 'Hello!'; ?> と書くと、下記の通り表示したいコードをそのまま表示してくれます。HTMLも同様。 <?php echo 'Hello!'; ?> 少し前まではこれでも表示されなかったような気がするのですが、最近のWordPressのアップデートで仕様が変わったのかもしれません。以前はコードエディターに書いて、それをカスタムHTMLブロックに変換し、「 < 」や「 > 」を「&lt;」や「&gt;」などでエスケープさせてようやく表示ができました。 とてもとても手間だったので、嬉しいアップデートです。 メモ コードエディターの場合は<pre><code>を自分で書く必要は無く、表示したいコードをそのまま書きます。 カスタムHTMLにPHPを書いた場合 一方で、カスタムHTMLに <pre><code><?php echo 'Hello!'; ?></code></pre> と記述すると、コードがまるまる非表示の状態になります。(カスタムHTMLの場合には<pre><code>タグが必要です) 表示されませんが、記事を書いている画面ではここ( )にコードが書かれています・・・ カスタムHTMLブロックでコードをそのまま表示させるには、表示させたいコード中の「 < 」などの特殊文字を「エスケープさせる」必要があります。こちら( )は「<?php」の「<」を「&lt;」と書いたものです。 <?php echo 'Hello!'; ?> (カスタムHTMLブロックへの実際の記述) <pre><code>&lt;?php echo 'Hello!'; ?></code></pre> 何故かは分かりませんが、「 > 」はエスケープさせなくても大丈夫みたいです(場合によるのかも)。<pre><code>タグは表示されなくて良いので、エスケープしません。 上記のように特殊文字をエスケープさせれば、カスタムHTMLブロックでもコード表示ができますが、コードが多いときはとても大変です。なので、コードエディターがおすすめです。 <pre><code>タグにクラスを追加したい場合 こちらの記事で紹介した「コードに色を付けて綺麗に表示してくれる機能」ですが、たまに言語が正しく認識されず、<pre><code class="php">...</code></pre>のように、クラスで言語名を指定したいときがあります。 その場合は下記のように対応しています。 一旦コードエディターにコードを書く カスタムHTMLブロックに変換する(適宜特殊文字が自動的に変換される) <pre class="wp-block-code"> を <pre> にする <code> を <code class="言語名"> にする コードエディターからカスタムHTMLブロックに変換すると、「無効なコンテンツが含まれています」のような注意喚起の文が表示されるのですが、「HTMLに変換」で大丈夫です。 また、カスタムHTMLブロックに変換した時点で「 < 」や「 > 」が「 &lt; 」などの文字列に自動的に変わってくれていて、それ以上何もしなくてもカスタムHTMLブロックのままコードが表示されるようになります。 また、手順「3」と「4」は highlight.js のマニュアル通りに<code>に言語名のクラスを追加していますが、<pre>タグに言語名を指定しても同じでした。なので、上記手順「3」の時点でクラス名を言語名に変えるだけでも良いかもしれません。 とりあえず今のところはマニュアル通りに<code>タグで言語名を指定してみています。 インデントを保つ方法 コードエディターが大活躍してくれることは分かったのですが、一つ大きな悩みが残りました。インデントのあるコードを表示させようとすると、大切なインデントが全て消えてしまうことです。 <div class="greetings"> <p>Good morning.</p> <p>Good afternoon.</p> <p>Good evening.</p> </div> より読みやすい、整理されたコードを表示したいので、個人的にインデントは消えてほしくないのですが、WordPressの機能の一つ「自動変換」のような機能が働いて行頭の空白をありがたくも削除してくれちゃうみたいです。(Pythonなんかは見た目どうこうじゃなくて、インデント自体が重要なときがありますよね。) functions.phpにこの自動変換機能?を止めるコマンドを書いたら良い、TinyMiceを使って設定を変えたら良い、などいろいろ情報があったので試してみたのですが、私の場合上手く行きませんでした。 コードエディター → カスタムHTMLに変換 私の場合、この悩みを解決してくれたのは コードエディターにコードを書く カスタムHTMLブロックに変換 <pre class="wp-block-code"> のクラスから「"wp-block-code"」を削除する  重要! ( 必要に応じてクラス名やインデントなどを編集 ) という、一つ前でも触れた手順です。 (HTMLやPHPでなければ、最初からカスタムHTMLブロックに<pre><code>表示したいコード</code></pre>という具合でインデント付きのコードを貼ってもちゃんと表示されるみたいです。) …

chicks making sounds
02.21.2021

クリックで音が出るボタン: 1種類の音声ファイルのみで作る場合

こちらの記事で紹介した音の出るボタンですが、私は音声データが .mp3だけでも良いかなと思ったので、.mp3ファイルだけで音の出るボタンを作った方法もメモにしました。 この素晴らしいボタンの開発者SyncerさんのページからJavaScript(「sounds-multi.js」)をダウンロードするところまでは上記の記事と同じです。 ダウンロードしたJavaScriptを所々コメントアウト 方法は、ダウンロードしたJavaScriptファイルのうち数カ所削除、もしくはコメントアウトするだけです。 コメントアウトしてちゃんとボタンが動いているのを確認できたら、そのコメントアウトの部分は削除してしまっても良いと思います(思った動作をしない場合は、キャッシュを削除してからもう一度確認してみてください)。 削除またはコメントアウトする部分は下記です。 // コメントアウトする部分 // 37行目 var setDir = './' ; // 音声ファイルがあるフォルダ(最後は[/]) // 62, 63行目 if( audio.canPlayType( 'audio/mp3' ) ) { // 65行目〜71行目 } // ブラウザが[.wav]に対応している場合は[.wav]を読み込む else if( audio.canPlayType( 'audio/wav' ) ) { audio.src = setDir + file + '.wav' ; } さらに、64行目についても削除またはコメントアウトし、その下にaudio.src = file;を追記します。(64行目と同じコードから「setDir + 」と「 + '.mp3' 」を除いた部分。) // 64行目: オリジナルをコメントアウト // audio.src = setDir + file + '.mp3' ; // その下に下記を追記 audio.src = file; 上記の結果、私のファイルは最終的にこのような感じになりました。 (下記はSyncerさんの「sounds-multi.js」を一部コメントアウト・加筆したものです。上記で示している行数はダウンロードしたオリジナルのJavaScriptのものなので、下記の行数とは異なります) // グローバル変数 var syncerSounds = { flag: {}, currentTime: null, }; // 即時関数 (function () { // 設定 var setClass = 'sounds'; // ボタン要素のクラス名 //var setDir = ''; // 音声ファイルがあるフォルダ(最後は[/]) var setStopButtonId = 'stop-button-syncer'; // …

chicks making sounds
02.20.2021

クリックで音が出るボタンをWordPressで実装する方法

クリックすると音が出るボタンを作成することができ、とっても感激したので、WordPressでの利用方法についてご紹介します!Syncerさんの「クリックすると音が鳴るボタンの作り方」を見ながら作成させていただきました。 応用方法はいろいろですが、例えば、こんなボタン「」を作っていきます( 部分を押してみてください。こちらの音声データはsoundoftext.comにて作成しました。) 私はアイコンをボタンにしましたが、画像やテキストなど、何でも音が出るように作成することができるようです。開発者さんが公開されているJavaScriptを利用します。 JavaScriptファイルをダウンロード 前述の開発者さんのページ下部にあるJavaScriptファイルをダウンロードします。私はページ内に複数個違う音声データのボタンを入れたいので「sounds-multi.js」を選びました。 続いて、ダウンロードしたファイルをテキストエディターで開き、37行目あたりにある「./」を削除します。この行ではボタンに使用する音声データのアップロード先を指定しています。(私は「Visual Studio Code」でテキストファイルを編集しており、見やすくてお気に入りです。ご参考までに。) // オリジナル var setDir = './'; // シングルクオテーション内を空にする var setDir = ''; メモ 「./」はカレントディレクトリという意味。削除しなくても後述のように音声データをURLで指定すると普通に再生できたのですが、念の為削除。 JavaScriptファイルをWordPressへアップロード 次に、上記のファイルを使用中のテーマフォルダ内の任意の場所にアップロードします。私は使用しているテーマフォルダの中にJavaScriptファイルがまとまって入っている「js」というフォルダがあるので、そこにアップロードしました。 このファイルまでのパスは次のステップで使います。 JavaScriptファイルの読込み footer.phpの下部等にある</body>タグの前に、下記のコードを追記。どこにファイルをアップロードしたかにより、2行目の「src=""」の内容が多少違ってきます。 </body>タグは大概footer.phpの下の方にあると思いますが、使用するテーマにより異なるかもしれません。 <!-- クリックで音が出るボタンのJavaScript読み込み --> <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/sounds-multi.js" ></script> メモ 私の場合は public_html > wp-content > themes > 使用中のテーマ名 > assets > js に上記のJavaScriptファイルをアップロードしたので、上記の「/js/」の前に /assetsを入れました。 ボタン作成のためのデータを準備 音の出るボタン作成のためには音声データが必要です。このボタンの開発者Syncerさんのページでは、無料で使用できる効果音配布サイトがいくつか紹介されています。 音声データは .mp3 や .wav ファイルだと、だいたいのブラウザで再生できるようなので、できるだけ .mp3 と .wav 両方用意します。 追記 caniuse.comで各ブラウザの音声ファイル対応状況を調べたところ、現時点では.mp3ファイルでおおよそのブラウザに対応していそうでした。なので、.mp3のみでいいかなと思う場合は下記を合わせてご参照ください。 話を戻して、.mp3、.wav、いずれかの音声データを取得したら、音声変換サイトなどを利用してもう片方のファイルを作ることができます。Online Audio Converterというサイトで .mp3 ファイルを .wav ファイルに簡単に変換できます。 変換が終わると画面が変わるので、「ダウンロード」を選択。 手元に準備できた .mp3 、.wav ファイルは両方とも拡張子の前にある名前を揃えてからWordPressにアップロードします。(例.「hello.mp3」、「hello.wav」) もし画像をボタンにしたい場合には、合わせて画像データを準備し、アップロードします。こちらは特に拡張子やファイル名など気にする部分はありません。 実際にボタンを作成、動作確認 音の出るボタンにしたいものを下記のような<a></a>タグで囲ってあげると、アイコン、画像、テキストなどが音の出る素敵なボタンになります。 <a href="#" class="sounds" data-file="音声ファイルのURLから拡張子を消したもの"> <img タグなどなど > </a> 例えばこんなかわいい画像を音の出る仕様にしてみました。ひよこをポチッと押してみてください。(音声データは「効果音ラボ」さんからダウンロードさせていただきました。) ひよこの画像を、下記のような<a></a>タグで囲ってあげると音が出る画像になります。下記は見やすいように改行しましたが、改行なしでも大丈夫です。 <!-- 音の出るボタン --> <a href="#" class="sounds" data-file="https://example.com/wp-content/uploads/chick"> <img src="https://example.com/wp-content/uploads/chicks.png"> </a> 音声ファイルのURLは、メディアのライブラリで該当の音声ファイルを選択し、「URLをクリップボードにコピー」という部分を押すと簡単に取得できます。ただし、この音の出るボタンの<a></a>タグ内に書き込む際には拡張子(お尻についている .mp3 等)を削除します。 テキストやアイコンについても同じような要領で音の出るボタンにできます。 使い方の一例 私は外国語について記事を書く際に、発音の出るボタンを作れたらいいなと思っていたので、下記のように使っていきたいと考えています。(以下、言語音声はsoundoftext.comで作成) 言葉 発音 …