ロケLOG

大学生のロケットマンによるブログ

はてなブログテーマ「510」にしてやったカスタマイズと感想

こんにちはロケットマンです!!
テーマを「510」に変更しましたので、そこでやったカスタマイズを書いていきます。
510 - テーマ ストア


カスタマイズ系

グローバルナビ設置

「グローバルナビ」はデザイン→カスタマイズ→ヘッダー→タイトル下
に書き込みます。

<nav id="global-navigation">
  <div class="global-navigation-inner">
    <div class="menu">
      <a href="ここにURLをはる">ホーム</a>
    </div>
    <div class="menu">
      <a href="ここにURLをはる">僕の意見</a>
    </div>
    <div class="menu">
      <a href="ここにURLをはる">グラスマ攻略日記</a>
    </div>
    <div class="menu">
      <a href="ここにURLをはる">新オヤジリウム</a>
    </div>
   
  </div>
</nav>

「僕の意見」などのところには表示したい文字、
「ここにURLをはる」というところにはカテゴリー先のURLをはります。ご自分のブログの飛ばしたい先のカテゴリーを選んで、そこのURLを貼るだけです。


完成するとこんな感じになります。
f:id:rocketman5th:20171207104222p:plain

投稿日・執筆者の消去

記事の終わりに、このように結構前の日数だと思うと、読んでいて「古!!」と萎えてしまうので消しました。
f:id:rocketman5th:20171207105624p:plain


カスタマイズ→デザインCSS
に書き込みます。

/*投稿日、執筆者消去*/
span.author.vcard{ display:none; } 
span.entry-footer-time {display: none;}

行間を狭くする

改行の際の行間が狭くなります。
はてなブログは基本的に行間が広いです。


改行を少しするだけで「どこまでいくんきみ~~」ってくらい言ってしまうので、それの防止です。


カスタマイズ→デザインCSSに
書き込みます。

/*行間を狭くする*/
.entry-content p { margin:0}

レスポンシブデザインはON!


レスポンシブデザインとはスマートフォンで見た際に良い感じに表示される設定です。
何もしていないと、あの小さい画面ではデザインが崩れたり、小さくて読みにくかったりします。


「510」にテーマを変えたのなら絶対にやったほうがよいです。
てか、レスポンシブデザインに対応しているテーマの人は全員やるべきです。


カスタマイズ→スマートフォン→詳細設定→レスポンシブデザインにチェック!
f:id:rocketman5th:20171207110719p:plain

510の俺的に魅力だと思うこと

1年ほど、はてなブログをやっていてデザインを変えまくっていたのですが、そんな自分が思う「510」の魅力。

見出しが良い感じ

見出しはこんな感じです。
f:id:rocketman5th:20171207211724p:plain

個人的に見出しは好みです。この前に使っていたほかのテーマのデザインの時も、このテーマの見出しをパクってました。笑

文字が濃い

最近ブログ界全体に思うのですが、字が薄いブログが流行っています。僕も初めて見たときは、落ち着いていて良いなーと思っていました。はてなブログに多い傾向な気もします。


ただ、最近「うっすぅいいいいい!!!」と思うことが個人的に多いので、濃い文字のテーマを探してこれにしたのも変えた理由の一つです。
文字の濃さはCSSで変えられるのですが、挫折しました。

色合いがよい

デザインすばらすぃぃぃ。
と個人的に思います。


紺色に白っていうのは、合う色っていうのをどこかで見たことがあります。
基本的に背景は白いのでテーマカラー紺は良いのかもしれません。

逆に少し微妙だった点

記事一覧ページの記事ひとつあたりの範囲が少し広いと思いました。
f:id:rocketman5th:20171207215121p:plain


これはカスタマイズで変えられます。僕は知識的にも検索力的にもできませんでした。
せっかく記事一覧を見るなら、たくさんのページを1画面で写せるようにしたいです。