読者です 読者をやめる 読者になる 読者になる

駄犬の株ログ

日本株やってます。主にスイングトレード、少しだけデイトレード。だいたい毎日その日のトレード&ポートフォリオについて書いています。

駄犬の株ログ

日本株やってます。主にスイングトレード、少しだけデイトレード。だいたい毎日その日のトレード&ポートフォリオについて書いています。

[blog] blogのデザインをいろいろ変えてみた

このblogを作ってから10日ほど経った。今までデフォルトのデザインのままにしていたが、少しは個性を出そうとデザインをいじってみた。

before & after

before:

f:id:bone-eater:20170302145551p:plain

after:

f:id:bone-eater:20170302145617p:plain

やったこと

テーマの適用

blogの全体的なデザインを変えられる。はてな公式のテーマもあるが、テーマストアというところで色んな人がテーマを公開しており、そこから選ぶほうが選択肢があってよいようだ。

テーマ ストア - はてなブログ

自分の好きなデザインを選んで「プレビューしてインストール」から適用する。このblogではDUDEというテンプレートにした。

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ドル払ってね!」みたいなダイアログが出てくる。

ground-sesame.hatenablog.jp

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;
}

 スタイルのバッティングが面倒だったので、他の方法のほうがよかったのかも。