【小ネタ】記事にソースコードを貼り付ける方法
この方法だと「JavaScript」のソースコードは表示できないみたいです。
今判明しました。他の方法もあるので検証してみます。
なお、CSSや他のHTMLコードはこの方法でOKです。
おはようございます。
原因はPCかキーボードかは不明ですが、キー入力するときに急に連打状態になったり、入力できなかったりと挙動不審な動きをするので泣きそうになっている、わいのり研究所です・・・しくしく
ワイヤレスやめて有線キーボード買えば原因の切り分けができますよね。
もったいないけど・・・
さて、本題に入ります。
今回は、記事にソースコードを貼り付ける方法をお話します。
ソースコードって、HTMLやCSSのコマンドとかの記述のことです。
謎の改行・・・
なぜこの記事を書いたのか?
それは、私が記事に書いたソースコードをWordに「普通にコピペ」(Ctrl+Alt+V)したら、なぞの改行が間に入ってしまったからです。
例えば、私がこんな風に記事に書きます。
/* 行間調整 */
.entry-content p {
margin: 0.5em 0;
}
プレビューでは左のように表示されますが、それをコピってWordとかに貼り付けると右のように謎の改行が発生してしまいます・・・(泣)
貼り付ける方法を調べてみた
このサイト様の説明が一番分かりやすかったです。
ありがとうございます!
はてなブログにソースコードを載せる3つの方法 – つばさのーと
4つ目の方法・・・
このサイト様が紹介してくれた中で、4つ目の方法・・・そう!「おまけ」に書いてある方法が私は一番簡単でしたので、今回はこれを紹介します。
サイト様の文中にもありますが、HTMLの<pre>タグと<code>タグを使う方法です。
<pre>タグと<code>タグの説明はこちらをご覧ください。
ソースコードを貼り付けてみよう
では、このソースコードを記事に貼り付ける手順を見ていきましょう。
/* 行間調整 */
.entry-content p {
margin: 0.5em 0;
}
<pre>タグと<code>タグの使い方を確認
まず、先ほど紹介したサイト「HTMLタグリファレンス」を読んでくださいね。
記述方法は、こうです。
私はこれを辞書に登録しました。
<pre><code>表示したいソースコード</code></pre>
表示したいソースコードを、<pre>タグと<code>タグでくくればOKです。
簡単ですね!
「HTML編集」に貼り付けよう
では、上記のソースコードを貼り付けましょう。
これはHTMLなので、「HTML編集」に貼り付けてくださいね。
こんな感じで記述します。
/* 行間調整 */
.entry-content p {
margin: 0.5em 0;
}
すると、なんということでしょう!
こんな感じでソースコードを貼り付けることができました♪
/* 行間調整 */
.entry-content p {
margin: 0.5em 0;
}
プレビュー表示して確認してみよう
公開する前にプレビュー表示で確認してみましょう。
「HTML編集」の右横「プレビュー」を選択します。
プレビューに表示されたソースコードをコピーしてください。
そしてWordなどにコピーしてみてください。
(Wordの場合は「Ctrl+Alt+V」で「テキスト」を選択します。)
こんな感じになると思います。
最初のように余計な改行がありませんね。
最後に
ソースコードをそのまま貼ると謎の改行が発生することを初めて知りました。
はてなブログをしていると、いろいろ勉強できるので面白いです♪
ゲームより楽しいです。
以上、小ネタと言いながら長くなってしまいましたね・・・(汗)
では、今回もお付き合いいただきまして、ありがとうございました。