こんにちは、mymykenshinです。
今日は、はてなブログでのHTML編集と画面のカスタマイズを進めていこうと思います。私はブログを作り出して１年になるのですが、このHTML編集を、普通に使って効率的にブログを書いているのですが、友達を見ていると、全然使いこなせてなかったので、基本的な使い方を解説していきます。
PR
①「編集 見たまま」と「HTML編集」
はてなブログでブログを運営すると「記事を書く」に飛ぶと、「編集見たまま」と「HTML編集」というのがあります。
例えば、このページの現在の状況を「HTML編集」にすると
こんな風になります。
※一部見せたくないHTMLを削除しています。
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。
つまり、上のHTMLは、WEB上で、私達が表示したいを具体的にプログラミング言語（つまりコンピュータがわかる言葉）で表現したものとなります。
このHTMLについて、達人だと自分でガンガン書けてしまうのですが、私達素人が、このHTMLをガンガン書く必要性はありませんし、そんなの非効率ですよね。
だから「編集見たまま」でどんどん入力すると、システムがHTMLにガンガン変換してくれて、私達がそれを意識しなくても、ブログがかけてしまうのです。
ですが、このHTML編集を少しだけ理解すると、とても作業が簡単になります。
どうやって理解するか。とても簡単なことです。画面とHTML編集を見比べて、ここに、こんなHTMLが書かれているんだなと理解すればいいです。
②実例で解説
このHTMLが、こんな感じです。（ちょっとだけ理解用に手をいれていますが）
<p>こんにちは、mymykenshinです。</p>
<p>今日は、はてなブログでのHTML編集と画面のカスタマイズを進めていこうと思います。</p>
<p><!-- more --></p>
<p>[:contents]</p>
<h3><span style="color: #ff0000;">①「編集 見たまま」と「HTML編集」</span></h3>
<p> はてなブログでブログを運営すると「記事を書く」に飛ぶと、「編集見たまま」と「HTML編集」というのがあります。</p>
<h3>②段落２（大見出し）</h3>
<h4>１.中見出し</h4>
<p>がががが</p>
<h4>２.中見出し２</h4>
<p> 写真</p>
<p><img class="hatena-fotolife" title="f:id:my
mykenshin:20180814034810j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/mymykenshin/20180814/20180814034810.jpg" alt="f:id:mymy
kenshin:20180814034810j:plain" width="212" /></p>
<p> </p>
<p> ※よかったらポチお願いします。</p>
<p><a href="//blog.with2.net/link/?省略>アフィリエイトランキング</a></p>
<p><a href="//money.blogmura.com省略>にほんブログ村</a></p>
上から見比べるといくつかの法則に気がつくと思います。
1.<p>文章（何もないときは空白行）</p>
この <p>と </p>の間に文章が入っています。これが文章表現になります。
2.<p><!-- more --></p>
「続きをよむ」のところです。
３。<p>[:contents]</p>
目次を作るしるし。はてな記法っていって、はてなだけに通用する表現です。
４.<h3>②段落２（大見出し）</h3> と <h4>１.中見出し</h4>
わざと、わかるようにしたのですが、<h3>と</h3>で囲まれると、大見出し h4なら中見出しです。
文章書き終えると、目次見ると、意図しない目次ができていることがあります。
そういうときには、このh3とかh4を探して <p>と </p>になおしてやれば直ります。
５.写真のHTML
<p><img class～width="212" /></p>
前後関係からこのゴチャゴチャが写真だということがわかればいいと思います。
６.※よかったらポチお願いします。の後
<p><a href="//blog.with2.net/link/?省略>アフィリエイトランキング</a></p>
<p><a href="//money.blogmura.com省略>にほんブログ村</a></p>
これは下記のところで、人気ブログランキングや日本ブログ村で取得したHTMLです。
はてブロ アフィリエイト講座８ ブログ村とブログランキング参加他 - はてなブログで はじめる簡単アフィリエイト
ここまで慣れてくると、他に出てくるパターンといえば、広告のHTMLぐらいです。それらは、このHTMLを貼れというだけなので、どこに何のHTMLがあるのか理解できれば問題ありません
③自作テンプレートを作って、たくさん保存しよう。
人にもよるのですが、私はブログで書くパターンが決まっていますので、そのテンプレートのHTMLを作って、
テンプレートのHTMLをコピー(Ctrl+c)→記事を書くをクリック→HTML編集をクリック→貼り付け（Ctrl+v)→左下（公開をする→下書きを保存する）に変える→それをクリックする。
以下２回め
→記事を書くをクリック→・・・・
をクリックをすると大量の下書きがたまっていくので、下の方から下書きから記事を書いています。
以上、記事を効率的に書いていくためのHTMLの書き方でした
④目次を美しくする
話は変わって、現在のブログの状況ですが、目次があまり美しない。
これを、こんな感じになおしました。
参考にしたのは下のサイトのデザインCSSを少し改良しました。
はてなブログの目次をシンプル＆おしゃれにカスタマイズ / サンプルCSS付き！ - THE LITTLE ESCAPE
入れたソース
/*--------------------------------------
もくじ
--------------------------------------*/
ul.table-of-contents {
font-size: 12px !important;/*文字サイズ*/
border: 1px solid #eee !important;
padding: 1em 1.5em 1em 2.25em !important;
color: #999 !important;
display: inline-block;
}
ul.table-of-contents:before {
content: "[ INDEX ]"; /* お好きな文言に変更してください */
display: inline-block;
margin: 0.2em 0em 1em;
padding: 0.2em 1em;
font-weight: bold;
background-color: #f5f5f5;
}
ul.table-of-contents a:after {
display: none !important;
}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
color: #999 !important; /* リンク文字の色 */
text-decoration: none; /* リンクの下線あり・なし */
}
ul.table-of-contents li a:hover {
color: #bac !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
margin: 5px 0 10px 10px !important;
line-height: 1.5;
padding: 0;
list-style-type: none !important;
}
VIEW RESOURCES
⑤まとめ
HTMLに関して最低限度のお話しをしましたが、ほとんどのブロガーは、このレベルで十分だと思います。
記事をどんどんアップしましょうね。
※私の趣味サイト
は１日500PV以上はコンスタントに出していますが、下のホビリエイトマスターズを受講したお陰で、達成できました。オススメです。
※よかったらポチお願いします。
