PVアクセスランキング にほんブログ村

記事にソースコードを掲載する方法【はてなブログ】

グローバルメニューをやっとの思いで作成し、作成方法の記事を書いている際に、HTMLやCSSのソースコードを記事に埋め込みたいのに、ソースコードをコピペしてそのまま記事に貼り付けたら、
f:id:lifeishappy_right:20200924161232p:plain
☝☝こんな感じで全て左詰になってしまって、私としてはソースコードをコピペして使用してほしいのに、これじゃ使えない(ノω・、) と色々と調べた結果、なんとも超簡単でした( ´艸`)

f:id:lifeishappy_right:20200924180024j:plain

記事編集モードの変更をする

まず、記事の編集方法を「見たまま」モードから「はてな記法」に変更する必要があります。
「ダッシュボード」→「設定」→「基本設定」→「編集モード」で「はてな記法モード」に変更します。
f:id:lifeishappy_right:20200924162615p:plain

この設定が終わって、通常通り記事を書くページに行くと「編集はてな記法」になっています。
f:id:lifeishappy_right:20200924163843p:plain

プログラミング記号でソースコードを囲んで貼り付け

プログラミングなんて分からないよ!!という方、私もですヾ(^∇^)
ここで使用する記号が、「不等号」と「パイプライン2本」になります。
f:id:lifeishappy_right:20200924173257p:plain
この状態でコピペしたソースコードを「 >|| 」と「 ||< 」で囲んであげると、
f:id:lifeishappy_right:20200924164543p:plain

☟☟☟出来上がり☟☟☟

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">

こんな感じで埋め込み完了です。

色の変更をしたい方

記事中に埋め込まれているソースコードって、結構色が付いているものが多くないですか?

色を変えるには「プログラミング言語」の変更をするらしいのですが、そもそもプログラミング言語が何なのか分からない&調べていたら頭が痛くなった私としては、
・何に必要かもわからないし、
・白黒でも問題ないし、
・私程度なら拘る必要もないのかな…

という感じですが、二種類ほどプログラミング言語とやらに行き着いたので、参考までに…

✔「 >|| 」の「 >|○○| 」○○の部分にプログラミング言語を入れます。

例1:ruby
f:id:lifeishappy_right:20200924181606p:plain

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">

例2:python
f:id:lifeishappy_right:20200924181630p:plain

<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
    </div>
    <ul id="menu-content">

確かに色が変わってかわいい感じになりましたが、そもそも自分でこのコードを作れない私にすると、別になくても問題ないかな…と思った機能でした(笑)

こんな感じでソースコードの埋め込みが可能でした♡

www.beautyaroma217.com