旧ほわらぼ

https://howalab.com/ へ移行します

【備忘録】はてなブログのカスタマイズまとめ ~手順・実際のコード・参考サイトとかを随時更新~

最終更新 -2020/08/22-

 

どうも!はくです!

今回はこのサイトを作るにあたって、自分用にメモや参考にしたサイトを書き溜めていこうと思います。

ほとんど自分用にはなるかと思いますが、皆様の参考になれば幸いですm(__)m

 

はてなブログProでwwwなしの独自ドメインが使える

2020/04/23からはてなブログProでサブドメインなしの独自ドメインが設定できるようになりました。

www.〇〇〇.comではなく、〇〇〇.comというように、そのまま使えてうれしいです!

1番うれしいのは、Googleアドセンスの申請をする際に面倒な転送設定などをしなくて済むことですね!

設定の仕方はまず、ドメイン取得先で

  • ホスト名を空
  • TYPEをA
  • VALUEを2パターン(13.230.115.161及び13.115.18.61)

と設定します。

f:id:pad89_haku:20200516054704p:plain

あとは、はてなブログ側で〇〇〇.com独自ドメインを設定すればOKです。

詳しくは公式サイトさんがアナウンスしていますので、ご覧ください。

staff.hatenablog.com

 

当サイトのテーマ

当サイトは、テンプレートとしてひつじさん制作の<Minimalism>を使用させていただいております。

hitsuzi.hatenablog.com

このテーマを基本にしてHTMLやCSSをいじって作成しています。

ブログのカスタマイズ

全体のカスタマイズ

ひつじさんが書かれたMinimalismのカスタマイズを参考にしたり、下記のカスタマイズも参考にしています。

blog.minimal-green.com

www.yukihy.com

僕自身C言語からpythonなどは扱ったことはありますが、HTMLやCSSjQuery等は初めてなのでいろいろ勉強しながらサイトをカスタマイズしていってます。

こういった発想があるのか!とかこういう仕組みが作れるのか!と日々勉強中です。

あとはハンバーガーメニューとかあこがれますか、僕のサイトのテーマと干渉しているせいか、うまく表示できませんでした。

僕の自己満ではなくて、ユーザビリティ優先でカスタマイズしていきたいですね。。。

いつか、こんな実装を考えられるようになるのかな。。。??

www.rectus.co.jp

蛍光ペンでアンダーラインを引く

こんな感じ蛍光ペンを簡単に使う方法です。

私は普段から斜体を使いません。

なので、斜体を指定したら蛍光ペンになるようにCSSを記述しました。

RGB値をいじったり、太線の幅を変えたりしてみてください。

デザインのCSS部分に追加すると機能します。

/***italic to marker***/
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
article i{
font-style:oblique !important;
}

この方法だと、斜体ボタン1つで蛍光ペンを引けます。

ただし、設定が1なので複数の色の使い分けとはできません。

もしやりたい場合は、太字に別の色を充てるなどの対策があるかと思われます。

あとは自分で実装するか。。。になるかと思われます。

ちなみに文字の選択は<shift+方向キー>で行えます。
そしてctrlボタンが便利で<shift+ctrl+方向キー>とすると1回の矢印押下で1かたまり分飛べます。<shift+home>とかも便利なのでぜひ使ってみては?
そしてちなみに文字が選択された状態で<ctrl+i>で斜体に変更できます。

マウスに右手を移動させなくてすみますね!!

 

ソースコードを見やすくする

上の蛍光ペンでアンダーラインを引く方法で記述したような、ソースコードをきれいに表示する方法をご紹介します。

<code>article i{
font-style:oblique !important;
}</code>

通常、このようにHTMLを書くと

article i{ font-style:oblique !important; }

このように表示されます。

そこでhighlight.jsというJavaScriptを使用しました。

1.デザインのフッタ以下を記載

<link rel="stylesheet"
     href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

2.コードを書く際に、HTMLタグを追加する

<pre style="background-color: rgb(40, 44, 52) !important;"><code class="css">
【ソースコード】 
</code></pre>

簡単でした。

このコードは定型文一覧に登録して、いつでも使えるようにしています。

ちなみに行数を表示しようとhighlightjs-line-numbers.jsを導入してみましたが、table要素を消す方法が分からず、表形式になってしまい、、、あきらめました。。

f:id:pad89_haku:20200516180543p:plain

 HTML特殊文字変換ツール

上記みたいにコードを書いたりするときに、便利な変換ツールです。

一発で変換してくれます。

tech-unlimited.com

検索box周りのカスタマイズ

別のほうのブログですが、以下を参考に変更しました。

www.tatsublo.net

関連記事の出し方

www.bokukoko.info

関連記事を2列にする

blog.minimal-green.com

SNSのシェアボタン(line/twitterなど)

schizoid-personality.hatenablog.com

 

schizoid-personality.hatenablog.com

 記事が気に入ったらいいね!ボタンをブログに設置

ichitaso.com

 

 

色コード

色コード指定には2つのサイトを使用させていただいております。

RGB値と16進数カラーコードを相互変換するツール

www.peko-step.com

ex)私の使い方

  1. ibisPrintで画像を作成する
  2. PCに移り、ペイントで画像を読み込む
  3. 色コードが欲しい色をスポイトで読み取り、RGB値を読み取る
  4. このサイトに移り、16進数カラーコードを得る

色見本とカラーコード・カラーネームを目視確認させてくれるサイト

www.colordic.org

主にパステルカラーを使いたいときに参考にさせていただいています。

Webアイコンフォント

アイコンには主にFont Awesomを使用しています。

fontawesome.com

メールアドレスを登録するとメールが送られてくるので、そこにあるコードを<設定/詳細設定>タブにある<headに要素を追加>に書き入れることで使うことができます。

<i class="fa fa-thumbs-o-up"></i>

のように書くと表示させることができます。

また、

<i class="fa fa-thumbs-o-up fa-rotate-90"></i>

のように書くことで回転や反転させることができます。

他に指定できる角度は 

クラス 回転の角度
fa-flip-horizontal 水平方向に反転
fa-flip-vertical 垂直方向に反転
fa-rotate-90 90°
fa-rotate-180 180°
fa-rotate-270 270°

となっています。

そして、<fa-spin>や<fa-pulse>と加えることで、アニメーション付きで回転させることもできるので、ぜひ使ってみてください。