HTMLとCSSを使えば載せることができる
HTMLとCSSのコードをブログに載せようとすると、外部から埋め込みをして載せるということを、よく言われています。
しかし外部サイトから埋め込みをするには、会員登録したりダウンロードしたりと、色々と面倒です。
なので、今回はHTMLとCSSを使ってHTMLとCSSのコードをブログに載せる方法を紹介します。
HTMLで編集できるようにする
今回は、HTMLとCSSを使うので、記事をHTMLで書けるようにします。
まずは、いつも記事を作成している画面を開いてください。その画面の左上にブログ名が表示されています。そのブログ名の下に 作成｜HTML というボタンがあります。
作成は今開いている画面のことで、HTMLはHTMLで記事を書く画面のことです。HTML画面にしたいときは、HTMLを押して画面を変えます。逆に、作成画面にしたいときは作成を押して画面を変えます。
HTML画面に下記のコードをコピペしてください
HTMLとCSSをブログに載せるためのコードです。
<ol style="background-color: #000000;color: #ffffff;font-size: 14px;font-weight: bold;"><code><li>文字</li></code></ol>このコードをコピペして、プレビューすると以下のようになります。
- 文字
作成画面に戻っても、同じように表示されているので、作成画面から文字を消して、そこに好きなコードを入れてください。
これで、完成です。
コピペだけなら簡単です。ここから自分好みにカスタマイズしたいという方のために、説明したいと思うのですが、その前に応用をご覧ください。応用の下に説明を書いています。
応用！入力するのが面倒くさい
style="background-color: #000000;color: #ffffff;font-size: 14px;font-weight: bold"は長いので、いちいち入力するのが面倒です。
なので、応用では入力する手間を省く方法を教えます。
まずは、テーマ→カスタマイズ→上級者向け→CSSを追加の手順で進んでください。
そして、以下のコードをCSSを追加してください。
- .coding{background-color: #000000;color: #ffffff;font-size: 14px;font-weight: bold;}
コードを追加したら、ブログに適用を押して保存してください。
これで、HTML画面ではコードを短くできます。
では、HTMLで記事を書く画面にしてください。そして、下のコードを入力してください。
- <ol class="coding">
- <code>
- <li>文字</li>
- </code>
- </ol>
入力したら、プレビューで確認してください。先ほどと同じように、
- 文字
しかし、これには少し欠点があり作成画面では背景に色がつかず、文字も通常の色のままです。少し、文字は小さくなっていますが・・・。
なので、作成画面からコードを書く場合は、番号と文字の大きさで見分けてください。
では、応用はここまでです。次は、コードの説明をします。
<code></code> (HTML)
この間に書かれている内容がソースコードだということを表しています。一見なくても良いのではないか？と思ってしまいがちです。
しかし、これを使えば等幅フォントにしてくれるので、見やすくなります。
<code></code>ありと<code></code>なしが、どう違うのか見てみましょう。
<code></code>あり
- <ol style="background-color: #000000;color: #ffffff;font-size: 14px;font-weight: bold;">
- <code>
- <li>文字</li>
- </code>
- </ol>
<code></code>なし
- <ol style="background-color: #000000;color: #ffffff;font-size: 14px;font-weight: bold;">
- <li>文字</li>
- </ol>
上記2つは同じコードなのですが、<code></code>ありの方が文字と文字に間隔があって見やすいと思いませんか？特に1行目は違いがよくわかると思います。
<ol></ol>と<li></li> (HTML)
この2つでリストを作っています。先頭にある数字は<ol></ol>と<li></li>
で作っています。
今回はコードの行数を表すために使いました。
background-color: #000000;とcolor: #ffffff; (CSS)
background-color: #000000;は背景の色を変更しています。
color: #ffffff;は文字の色を変更するための変更しています。
#の後ろの英数字は色コードで、この色コードを変えると背景の色や文字の色が変わります。
今回は、背景を黒、文字を白にしました。説明するのに、一番わかりやすいと思ったので、この色を選びました。
しかし、実際にブログに載せるとなったら変えてください。黒と白では目がチカチカするという方もおられます。なので、私が実際に使うときは色を変えています。
もちろん、背景の色を薄い色にして文字を濃い色にしても大丈夫です。自分の好きな配色にしてください。見やすさを重視すると良いと思います。
font-size: 14px; (CSS)
font-size: 14px;はフォントの大きさを変更しています。
私のブログは記事が16pxで、ブログ記事と同じ文字の大きさだと少し違和感があったので少し小さくするために14pxに変えました。どのサイトも、ソースコードは記事より文字が小さいので、小さくした方が良いのかなぁという感じです。
記事とソースコードの文字が同じ大きさで良いならfont-size: 14px;は削除してください。
今回は私のブログに合わせて14pxにしましたが、文字の大きさはブログに合わせて変えてください。
font-weight: bold; (CSS)
font-weight: bold;は文字を太字にしています。
<b></b>でも太字にできるのですが、CSSで太字にしたかったのでfont-weight: bold;を使用しました。
文字を太字にしない場合は消してください。
太字
- <ol style="background-color: #000000;color: #ffffff;font-size: 14px;font-weight: bold;">
- <code>
- <li>文字</li>
- </code>
- </ol>
通常
- <ol style="background-color: #000000;color: #ffffff;font-size: 14px;">
- <code>
- <li>文字</li>
- </code>
- </ol>
最後に
今回は<pre>は使いませんでした。
HTMLとCSSを載せるだけならコードを整える必要がないので<pre>はいりません。
それに、<pre>を使えばコードが長くなったときに折り返してくれません。長ければブログから、はみ出してしまいます。なので、使いませんでした。
もし、<pre>を使うならoverflow: auto;をfont-weight: bold;の後ろに入れてください。そうすることで、長いコードを書くと横スクロールバーが表示され、横にスクロールしてコードを見ることができるようになります。
