グローバルメニューをやっとの思いで作成し、作成方法の記事を書いている際に、HTMLやCSSのソースコードを記事に埋め込みたいのに、ソースコードをコピペしてそのまま記事に貼り付けたら、
☝☝こんな感じで全て左詰になってしまって、私としてはソースコードをコピペして使用してほしいのに、これじゃ使えない(ﾉω･､) と色々と調べた結果、なんとも超簡単でした( ´艸｀)
記事編集モードの変更をする
まず、記事の編集方法を「見たまま」モードから「はてな記法」に変更する必要があります。
「ダッシュボード」→「設定」→「基本設定」→「編集モード」で「はてな記法モード」に変更します。
この設定が終わって、通常通り記事を書くページに行くと「編集はてな記法」になっています。
プログラミング記号でソースコードを囲んで貼り付け
プログラミングなんて分からないよ！！という方、私もですヾ(＾∇＾)
ここで使用する記号が、「不等号」と「パイプライン2本」になります。
この状態でコピペしたソースコードを「 >|| 」と「 ||< 」で囲んであげると、
☟☟☟出来上がり☟☟☟
<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">こんな感じで埋め込み完了です。
色の変更をしたい方
記事中に埋め込まれているソースコードって、結構色が付いているものが多くないですか？
色を変えるには「プログラミング言語」の変更をするらしいのですが、そもそもプログラミング言語が何なのか分からない＆調べていたら頭が痛くなった私としては、
・何に必要かもわからないし、
・白黒でも問題ないし、
・私程度なら拘る必要もないのかな…
という感じですが、二種類ほどプログラミング言語とやらに行き着いたので、参考までに…
✔「 >|| 」の「 >|○○| 」○○の部分にプログラミング言語を入れます。
例１：ruby
<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">
例２：python
<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">
確かに色が変わってかわいい感じになりましたが、そもそも自分でこのコードを作れない私にすると、別になくても問題ないかな…と思った機能でした(笑)
こんな感じでソースコードの埋め込みが可能でした♡