ブログ

ソースコード【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

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

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

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

関連記事

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

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

簡単に、”続きを読む”ボタンの見栄えを良くする

はてなブログのトップページにある記事をすばやく閲覧してもらうために、”続きを読む”ボタンを配置しておく方は結構多いと思います。このボタンを追加するのは簡単で、以下の画像のように、文章中のどの箇所でもよ …

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

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

トラッキングがインストールされていません / Tracking Not Installed (Google Analytics)

グーグルアナリティクスをはてなブログに導入しようとしてみたけれど、データがうまく反映されていないことがありました。同じ経験する人が必ずいると思ったので、シェアしておきます。 スポンサーリンク

はてなブログからwordpressへの移行の仕方【2015】

以前、はてなブログからwordpressに移行した理由を書いたので、移行の仕方についても書きます。自動化できたので、以外に簡単でした。 スポンサーリンク はてなブログエクスポート まず、はてなブログか …

  • 2008年から2年間オーストラリアに留学。卒業後、シドニーでIT関連の仕事につく。留学中に出会った彼女と結婚しオーストラリアで生息中。ブログは「オーストラリア生活の予備知識」として、オーストラリア生活に役立つ情報を中心にブログを書いてます。 詳しいプロフィールはこちら!!