ブログ

ソースコード【html, css】をはてな記法で記事中に表示がどうしてもできない時の解決法

投稿日:8月 9, 2015 更新日:

ソースコードを記事の中表示させるっていうのは、結構いろんな方が説明してくれているんですが、どのページを見て、その通りにやってみてもできなかったので、もう諦めかけていたんですが、できました!

たぶん、こんな馬鹿なことをしているのは自分ぐらいな気がするんですが、もしかしたら、他にも間違ったやり方してる人がいるかもなので、ここにシェアしときます。

まず、簡単なソースコードを用意

これを記事の中に挿入するのが今回の目的です。

#menu_wrap span {
    display: none;
}

はてな表記法を有効にする

以下のブログにもある通り、ダッシュボードの「設定」→「編集モード」で「はてな記法モード」にチェックを入れます。
f:id:Daiki2013:20150809091352p:plain
sonickun.hatenablog.com

その後、先ほど用意したソースコードの前と後ろにこの記号を挿入します。

必ず、この記号の前にはスペースなどが入っていないか確認してください!

f:id:Daiki2013:20150809091905p:plain

無事はてな記法を挿入できたら、次のステップです。

はてなブログに挿入

私の場合過去の記事にソースコードがあり、それをはてな記法で編集しよう頑張っていたんですが、、全然うまくいきませんでした。。。

はてな記法を有効にした後に、新しい記事を作成すると、以下のように表示されるはずです。
f:id:Daiki2013:20150809092250p:plain

もしこれが、以下のような状態だと、まだはてな記法は有効になっていないということです。
f:id:Daiki2013:20150809092334p:plain

注意してほしいのは、はてな記法を有効にした後でも、過去の記事を編集しようとすると、はてな記法の使えない!ということです。

なので、新規の記事を作成し、さきほど作成したソースコードをコピペして、プレビュー画面でちゃんと表示されているか確認してください。

わからないことなどがあれば、出来る限り回答するので、コメント欄に書いてくださいね。

関連記事

簡単にはてなブログにナビゲーションバー【カテゴリー】を追加する。

ナビゲーションバーとは、ウェブサイトのトップにあり、カテゴリーに素早くアクセスさせることが可能です。ある特的の記事に興味がある人が見に来てくれた時でも、このナビゲーションバーで気になる記事だけチェック …

超簡単!記事中の見出し【サブタイトル】を自動的にもっと見やすくする!

はてなブログはフォントの大きさなどもちょうどよくて気に入っているんですが、他の人のブログを読んでいると、あーこんなんいいなぁと思うことがありまして、、 そのうちの一つがこれ!サブタイトル、見出しという …

私が使っているブログ設定、テンプレート選び、デザイン、プラグイン等を公開します!

ブログの設定、デザイン、会社選びなどについて質問されることが多くなってきたのでここでまとめておきます。 ブログを初めて間もない方、初めようと思っている方、分からないことが多いと思うのでなるべく丁寧に解 …

はてなブログからwordpressに移行した5つの理由。

はてなブログ、livedoorブログ、アメーバブログってブログを始める方に最適ですよね。私も以前、はてなブログを使っていたのですが、今回、wordpressに移行し、このブログをwordpressで始 …

超簡単!Facebookページをwordpressに表示するには

wordpressはてなブログと違い、孤立しがち。TwitterやFacebookなどのSMSと連携していことで、閲覧数を増やすことが可能です。 ということで、以下のようなFacebookをページをサ …


2008年から2年間オーストラリアにワーホリ、留学。卒業後、シドニーでIT関連の仕事につく。結婚し子供が生まれたばかり。オーストラリア旅行、生活に役立つ情報を中心にシドニーからブログを書いてます。詳しいプロフィールを見る。