このblogを作ってから10日ほど経った。今までデフォルトのデザインのままにしていたが、少しは個性を出そうとデザインをいじってみた。
before & after
before:
after:
やったこと
テーマの適用
blogの全体的なデザインを変えられる。はてな公式のテーマもあるが、テーマストアというところで色んな人がテーマを公開しており、そこから選ぶほうが選択肢があってよいようだ。
自分の好きなデザインを選んで「プレビューしてインストール」から適用する。このblogではDUDEというテンプレートにした。
トップに画像を置く
DUDEはblogのトップが文字だけのデザインだが、何となく寂しかったので、紙幣でできた犬の画像を置いた。
流れは以下の通り。タイトルなどの文字を載せたトップ画像を作って、それだけを配置するほうがたぶん一般的だが、面倒だったのでこれで。
- 管理画面の「デザイン ⇒ カスタマイズ ⇒ ヘッダ」から画像をアップロード
- 表示設定を「画像だけ表示」に変更
- 元々あったタイトルのHTMLを「タイトル下」に入れる
サイドバーのプロフィードを更新
「デザイン ⇒ カスタマイズ ⇒ サイドバー ⇒ プロフィール」から設定できる。
サイドバーにTwitterのガジェットを追加
TwitterのWebサイトから、埋め込み用のHTMLを取得できる。色やサイズなども設定可能。
https://twitter.com/settings/widgets/new/user
はてなブログでは「デザイン ⇒ カスタマイズ ⇒ サイドバー ⇒ モジュールを追加」から「HTML」を選択し、埋め込みのHTMLを設定する
サイドバーに資産の推移を追加
通常のblogには不要なものだけど、株ブログのサイドバーにはだいたいこれがあるのだ。
「デザイン ⇒ カスタマイズ ⇒ サイドバー ⇒ モジュールを追加」から「HTML」を選択し、自分で書いた簡単なHTMLを設定。
ナビゲーションバーを追加
ページ上部にある、横長でボタンが並んだやつのこと。はてなブログの標準機能では提供されておらず、自前で何かしら設定する必要がある。
以下のページのように、『CSS MenuMaker』というサイトを使う方法が紹介されていることが多いが、どうも2017/03現在の『CSS MenuMaker』はお金を払わないと使えないようだ。ナビゲーションバーのソースコードを取得しようとすると「19ドル払ってね！」みたいなダイアログが出てくる。
19ドルはちとお高いかなと思って他の方法を探して、W3.CSSを使ってやってみた。シンプルなデザインのナビゲーションバーを簡単に作れる（他にもいろいろできる）ライブラリで、以下のページにサンプルがある。
https://www.w3schools.com/w3css/w3css_navigation.asp
流れは以下の通り。
- 管理画面の「設定 ⇒ 詳細設定 ⇒ headに要素を追加」に以下を記述。
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/codemirror.css">
- 管理画面の「デザイン ⇒ カスタマイズ ⇒ ヘッダ ⇒ タイトル下」に以下を記述。
<div class="w3-bar w3-black">
<a class="w3-bar-item w3-border w3-hover-blue-gray w3-button" href="/">トップページ</a>
<a class="w3-bar-item w3-border w3-hover-blue-gray w3-button" href="/archive/category/今日のトレード">今日のトレード</a>
<a class="w3-bar-item w3-border w3-hover-blue-gray w3-button" href="#">これまでの成績</a>
</div>
- 使っているテーマ(DUDE)ではスタイル指定がバッティングして表示が崩れたので、管理画面の「デザイン ⇒ カスタマイズ ⇒ デザインCSS」に以下を追加して調整。（これが必要かどうかはテーマによると思う）
#container {
box-sizing: initial !important;
}#title {
margin-top: 20px;
}#blog-title-content {
margin-bottom: 20px;
}h1, h2, h3, h4, h5, h6 {
font-weight: 700 !important;
}#container .w3-black {
background-color: #1D3557 !important;
}
スタイルのバッティングが面倒だったので、他の方法のほうがよかったのかも。
