ブログ

ソースコード【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への移行の仕方【2015】

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

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

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

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

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

簡単!横長アイキャッチ画像をStinger / wordpressの記事一覧に埋め込んで見やすくしよう!

Stinger6を愛用させてもらっています。無料とは思えない本当に使いやすいブログテンプレートなんです。 でも、たくさんの人に使われすぎているために、インストールしただけだと他の人と同じデザインになり …

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

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


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