はてなブログ向け ターミナル風のデザインの作り方
プログラミング関連のブログでよく見るターミナル風のデザイン
WordPress向けはたくさんあったが，はてなブログ向けはなかったので書いておく
完成形はこんな感じ
$ test
1. はてなブログのデザイン設定をいじる
はてなブログの右上にある「ユーザー名」をクリックして「デザイン」を選択します
次にスパナアイコンをクリックするとデザイン設定をいろいろいじることができます
今回は一番下にある「スタイルシート」を選択します
スタイルシートをいじったことのない人は画像のような状態になっていると思います
以下の設定をコピーして画像のようにスタイルシートに書き込みます
.terminal-box{
color:white;
background:#24292e;
font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
padding:0 1.5em;
}
最後に「デザインをアップデート」をクリックして設定を保存して終了です
2. さっきのデザイン設定を適用する
はてなブログ記事編集画面を開いてHTMLモードをクリックするとこのようになっていると思います
この中の適用したい文章に対して
<p class="terminal-box">適用したい文章</p>
となるように「class="terminal-box"」を書き加えると
適用したい文章
と表示されます
やってみた感想
意外と簡単にできたけどはてなブログ向けなんて需要少なそう、個人的には満足
やってみて思ったのがはてなブログってCSSとかWeb作成の初学者にも使えそう
Web作成のやり方は近年簡単に学べるようになったけど
自分でWebページを作ろうと思ってもサーバーとかめんどくさい
はてなブログのデザイン設定の自由度がどれくらいか知らないけど
無料で手軽にやれて公開もできるっていう点では初学者のとっかかりとしては悪くないと思う
