【基本から】使ったことのあるはてなブログ技術一覧【応用まで】

はじめに

本記事は、最低限整ったはてなブログの作り方をはてなブログ初心者に習得してもらえるように書いている記事です。適宜必要な情報を拾ってください。
2021年8月25日～31日に行われたポケモンサークルの交流企画「ポサリンピック2021」で僕が実際にブログを執筆した経験を元に書いているので、一応大規模なオンライン企画の企画告知を想定していますが、細かいところに目をつぶってもらえれば個人のブログも習得してもらえるはずです。
具体的には、↓このブログでやっていることが全部出来るようになります(絵や画像は除く)。
posalympic2021.hatenablog.com
ポサリンピック2021について気になる人はこちらのブログを参照にしてください↓

画像作りや、その他大会運営に必要な技術は↓こちらを参考までに。配信とか。
kurobasana.hatenadiary.jp

はじめに
記法
同じページの別の場所にジャンプ
色について
四角の枠で内容を囲う方法
隠すボタン
この黒い四角
デザインCSS
おわりに
- 追記について

記法

前提として、「はてな記法」の習得をおすすめします。
見たまま記法だと出来ないことがめちゃめちゃおおいです。
Markdown方式は正直使っていないのでもしかしたらこっちの方が便利なこともあるかもしれませんが、とりあえずこの記事では「はてな記法」を前提にします。
がんばって慣れていきましょう。

追記
解説未満の記事を出しておきました。
最低限これを覚えていればはてなブログがはてな記法で書けるようになるはずです。
kurobasana.hatenadiary.jp

↓はてな記法一覧。
help.hatenablog.com

とはいえ、覚えておきたいのは
見出し→「*」を文頭に１～３個つける
番号リストアップ→「+」を文頭につける
箇条書き→「-」を文頭につける
これだけ覚えていれば、あとは上の方にあるこのアイコンたちをクリックすればなんとかしてくれます。

あと、編集はパソコンでやった方がいいです。iPhoneなどのアプリ版だとリンクを埋め込むのに書き換えをしないといけなかったりします。

同じページの別の場所にジャンプ

この内容は後述。って書いてあって、その後述をクリックすると

あなたは今同じページ内をジャンプしました。その証拠に上にスクロールしてみてください。

こうなるやつ。

このジャンプ機能は、↓これを記事の文章内にコピペすれば出来ます。

<a href="#kurosana">後述</a>。
<p id="kurosana">あなたは今同じページ内をジャンプしました。</p>

証拠

’kurosana'の文字列はこの２つが一致してればなんでもいいです。
むしろ、この２つが一致しているところにワープしますみたいな設定がされているので、同じ記事内で何回かジャンプ機能を使いたい場合は、それぞれ別の文字列にする必要があります。注意。
なんかジャンプ機能が上手くいかないな～～と思ってたら、コピペして使い回してたのでこの文字列まで一緒なのが原因だったりすることがよくあります。

色について

これからのコピペ用怪文書には、ところどころに「#ffffff」こんなやつがたくさん書いてあります。
#のあとに１～９、a～fのどれかが６文字並んでいるこれは、「カラーコード」ってやつです。
この６文字が色を決めてます。
この色コードをちょちょいっと書き変えることで、このブログに出てくるものを自分の好きな色に変えられるわけです。
じゃあ自分の好きな色のカラーコードはなんじゃいという話ですが、↓のサイトなどを参考にしてください
www.colordic.org
ここで説明したのでこれから先はカラーコードの説明全部はしょります。ごめんなさい。

四角の枠で内容を囲う方法

こういうのとか、

見出しがあって

こういうのとか。

↓これを記事の文章にコピペすればできます。
上の枠

<div style="border: #00ffff solid 1px; border-left: #00ffff solid 13px; padding: 10px; background: #fffff9; ">こういうのとか、</div>

下の枠

<div style="background: #008000; border: 2px solid #008000; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">見出しがあって
</span></div><div style="border: 2px solid #008000; padding: 10px;"><span style="font-size: 120%"> こういうのとか
</div>

他にもいっぱい枠はあるらしいんですが、とりあえず僕が使っているのはこの二つ。
この二つ以外にもほしくなったら↓のサイトを参考にしてください（僕が参考にしたサイト）。

隠すボタン

表示する

いないいないデデンネ
>O'ω'O<

↑こういうやつ。
これを使うにはちと面倒なステップが要ります。
ちなみに仕組みについては全くわからないままやり方だけ伝えているので、仕組みをわかりたいなぁという人は↓の参考記事をご覧ください。

参考記事表示

www.yakuzari.work
wakalog.hatenadiary.jp

STEP1

はてなブログの「設定」→「詳細設定」に移動します。

で、下にスクロールしていくと

「要素にメタデータを追加」ってのがあります。
ここに↓をコピペします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

STEP2

続いて「デザイン」→スパナマーク(カスタマイズ)→「ヘッダ」をクリック。

「タイトル下」の項目に↓をコピペします。

    <script>
    //クリックすると表示されるボタン
    $(function(){
        $(".show-button").click(function(){
            var $this = $(this);
            var $target = $this.next();
            if($target.css('display') == 'none'){
                $target.slideDown(400);
                $this.text("隠す");
            }else{
                $target.slideUp(400);
                $this.text("表示する")
            };
        });
    });
    </script>

STEP3

「デザイン」→スパナマーク(カスタマイズ)→「デザインCSS」をクリック。

<style>
/*隠すボタン*/
.show-button-block{
    text-align:center;          /*ボタンを中央揃えに*/
}
.show-button{
    display: inline-block;
    border: 2px solid black;    /*ボタンの枠の太さ・色*/
    border-radius: 5px;         /*ボタンに丸み*/
    padding: 10px 15px;         /*サイズ*/
    background: black;          /*背景色*/
    color: white;               /*文字色*/
    cursor: pointer;            /*カーソルポインターに*/
}
.show-button:hover{
    background: white;          /*背景色*/
    color: black;               /*文字色*/
    transition: .3s;            /*ぼんやりと変化*/
}
.hide-area{
    display: none;              /*隠しエリアの表示*/
}
</style>

STEP4

文章中で以下のコードをコピペして使う。
※はてな記法の場合です。

<div class="show-button-block"><span class="show-button">表示する</span><div class="hide-area">表示内容</div></div>

これでできます。

隠すボタンを導入できることによっていらなくなったやつ↓
場合によっては使い分けできるかも？
クリックで展開（内容をたたむ）

表示する

クリックで展開

↑こういうやつ。

↓これを記事の文章内にコピペするとできます。

<div onclick="obj=document.getElementById('96372525_folding_text').style; obj.display=(obj.display=='none')?'block':'none';"><a style="cursor:pointer;"><span style="color: #00cccc"><strong><span style="font-size: 150%">クリックで展開</span></strong></span></a></div><div id="96372525_folding_text" style="display:none;clear:both;">
たたまれてる内容
</div>

これもジャンプ機能と同じで
この黒い四角の中にある「96372525」の文字列がたたむ場所のID的な役割を果たしてます。
なので、同じ記事内で何回かたたむ機能を使いたい場合は、それぞれ別の文字列にする必要があります。注意。
なんかジャンプ機能が上手くいかないな～～と思ってたら、コピペして使い回してたのでこの文字列まで一緒なのが原因だったりすることがよくあります（２回目）。
~~ちなみに96372525はクロサナにこにこですね（わたしクロサナと申します）~~

この黒い四角

この黒い四角なんなんすか

この黒い四角の中は、この文字列が持つ役割が失われて、文字列のまま表示されます。
文章の中に文字列をそのままコピペすれば機能が使えるのは便利なことなんですけど、僕みたいにコピペしてほしい文章の元を伝えたい場合に困ってしまいます。
それを解決しているのがこの黒い四角です。

これは、https://help.hatenablog.com/entry/text-hatena-list:title＝はてな記法の一つ、スーパーpre記法を使っています。

↓ブログの文面はこんな感じ。

デザインCSS

なんやそれ、いきなり知らん言葉出てきたぞ、という方がほとんどだと思います。
これははてなブログの設定に含まれているやつでして。
右上の自分のアイコンにカーソルをクリックすると出るメニューから、「デザイン」を選びます。

左上にみっつあるアイコンのうち、真ん中のスパナマークを押しましょう。

この一番下にあるやつ、それが「デザインCSS」です。
このデザインCSSはブログ全体のデザインを操る中枢部。
通常だと何行か書いてあると思いますが、これにさらに設定文字列をコピペして追加していくことで、ブログのデザインを大きく変えられます。

注意

この初期から書いてあるこれ。絶対に消さないでください。
消すとブログが崩壊します。
消したことないのでどうなるかは知りませんが、とにかく消さない方がいいです。
コピペするならこの下のところにどんどん追加していきましょう。

それでは、具体的になにをコピペすればどんな効果が得られるのかという話をたくさんします。

目次のデザイン変更

目次のデザインをたくさん変えられます。

目次の大まかなデザイン

僕はこのサイトからパクってきました（白状）。
www.fuji-blo.com

僕がポサリンピック2021公式ブログに使ったのは↓これです。

クリックで展開

/*シンプルな目次*/
.entry-content .table-of-contents {
    margin: 0;
    padding: .7em 1.2em 1.2em;
    background: #f6f6f7;
    font-size: 100%;
    border: solid 1px #000000;
}
.entry-content .table-of-contents::before {
    content: "目次";
    position: static;
    display: block;
    text-align: center;
    margin: 0 0 .8rem;
    padding: 0 0 .4rem;
    border-bottom: 1px dashed #9aa0c1;
    font-size: 120%;
}
.table-of-contents ul {
    padding-left: 10px;
}
.entry-content .table-of-contents li {
    margin: .2em 0 1em 1em;
    list-style-type: decimal;
    line-height: 1.6em;
}
.entry-content .table-of-contents li ul li {
    margin: .2em 0 0 1em;
}
.table-of-contents li a {
    text-decoration: underline;
    line-height: 1.6em;
    color: #3f3f3f;
}

目次から小見出しを消す

.table-of-contents ul ul {
    display: none;
}

ちなみに、ulを一個消したものをコピペすると中見出しが消えます。

目次のテキストの色

.entry-content .table-of-contents li a{
    color:#49f; /* 目次リスト部分のテキスト色 */
}

記事のタイトルのデザイン変更

こんな感じにできます。

h1 {
  color: #ffd700;
  text-shadow: 0 0 5px white;
  padding: 0.3em 0.5em;
  background: -webkit-repeating-linear-gradient(-45deg, #ffd700, #ffd700 3px,#ffd700 3px, #ffd700 7px);
  background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 3px,#ffd700 3px, #ffd700 7px);  background: repeating-linear-gradient(-45deg, #fffafa, #fffafa 3px,#ffd700 3px, #ffd700 7px);
}

これ以外のデザインは↓このページなんかから持ってくるといいと思います（僕が参考にしたサイト定期）。
saruwakakun.com

見出しのデザイン変更

見出しを色々変更できます。
ポサリンピックで使っていた見出しの設定は↓これ。

クリックで展開

大見出し

.entry-content h3 {
padding: 4px 10px; color: #111; background-color: #f0f8ff; border-left: 8px solid #ff4500;
}

中見出し

.entry-content h4 {
padding: 4px 10px; color: #111; background-color: #f0f8ff; border-left: 8px solid #0000ff;
}

小見出し

h5 {
  background: linear-gradient(transparent 90%,#ffff00 90%);
}

これ以外のデザインについては、先ほども紹介した↓このサイトを参考に。
saruwakakun.com

この記事では全部「h1」と書いてありますが、この「h1」を下のように変えれば大丈夫です。

大見出し→h3
中見出し→h4
小見出し→h5

h2がないのは仕様らしいです。よくわからんけど。

アンダーラインを蛍光ペン風にする

こんな感じのアンダーラインも設定できます。

article u{

    text-decoration: none;

    background: linear-gradient(transparent 50%, #ffff00 50%);

}

リンクの色を変更する

https://www.pokemoncenter-online.com/
このリンクの色も変更できます。

/*リンクカラー*/
.entry-content a {
  color: #00bfff;
}

サイドバーの色を変更する

サイドバーの色やらを変えられます。

/*サイドバー*/
#box2-inner {
    background-color:rgba(119,255,204,0.7);
}

ここではカラーコードではなくRGBA表記というやつを使っています。
前３つがそれぞれの色をどのくらいで混ぜるかを表しています（０～２５５）。
最後の数字が透明度を表しています（０～１）。１に近づくほど不透明になります。
「rgba(119,255,204,0.7)」の代わりにカラーコードを入れても一応動きますが、サイドバーは透明にしたかったのでこちらを使ってます。