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

理系院生の一人暮らし備忘録

誰かには役立ちそうな、理系大学院生の身の回りのいろいろ雑記

【はてなブログ】デザイン大幅変更!参考にしたページまとめ

f:id:sakunosuke28:20170422180139p:plain
こんにちは、先日はてなブログProに課金を始めたさくのすけです。

Proの

  • 広告非表示
  • スマホ版のhtml編集

機能を活かすべく、大幅なレイアウトリニューアルを行いました。


リニューアルにあたって

  • 考慮したこと
  • 発生した問題
  • 今回参考にしたページ

を紹介していきます。

まずはテーマを一新

「まあデザイン変えるならまずはテーマからでしょ」と安直によさげなデザインテーマを探しました。
テーマ ストア - はてなブログ
公式で探すもよし、「はてな テーマ おすすめ」などとググってみるもよし。

シンプルでカッコいい
Innocent - テーマ ストア
こちらを使わせていただくことにしました。

カスタマイズ箇所と参考にさせていただいたサイト

ベースとなるテーマをを決めて、諸々のカスタマイズを行いました。

グローバルメニューの設置

今回の目玉リニューアルのひとつ。
タイトル下のメニューバー、これがあるとそれっぽさが数段増しますよね。
2か月前くらいからめっちゃやりたかった。

今回使わせてもらうことにしたテーマ「Innocent」の作者さん(id:waitingmoon)のブログを参考にさせていただきました。
moonnote.hateblo.jp
よほど難しいのかと思いきや、結構さっくりできました。

SNSフォローボタンの設置

カッコいいフォローボタンを

  • サイドバー
  • 記事下(PC版)
  • 記事下(スマホ版)

の3か所に設置しました。

参考にさせていただいたのはこちら。
www.yukihy.com

気を付けるべき点としては、htmlのはてな読者ボタンの部分のURLを編集する際、独自ドメインにする前の旧URLを入れる必要があります。

シェアボタンの設置

はてなデフォルトのシェアボタンはダサいし、ごちゃごちゃしててその下を見る気にならない感じがしますよね。
ということで、スタイリッシュなシェアボタンの設置です。
こちらも、PC版とスマホ版の両方を分けて設置しました。

参考にさせていただいたのはこちら。
www.ituore.com
これはほんとにコピペするだけでできるので超簡単でした。

「あわせて読みたい」導入

ああ、こんな便利なものが存在してたのか…
ということで、ありがたく設置させていただきました。
bulldra.hatenablog.com

カエレバ・ヨメレバのデザイン変更

Amazonや楽天の商品紹介を見やすく表示するのに超ありがたいツール
商品紹介ブログパーツ カエレバ
書籍紹介ブログパーツ ヨメレバ
ですが、CSSをいじってこれをさらにかっこよく表示する知恵もたくさんの方が提供してくれています。
www.yukihy.com
ん~、ありがたい。

最後に、タイトル画像変更

今までブログ開設時に撮った研究室のマイデスクの写真を使っていましたが、ブログ名入りの画像に作り直し。
いつもアイキャッチを作っているMediBang Paintで作成。

はてなのタイトル画像の設定画面では

  • 画像とテキストを表示
  • 画像だけ表示

を選ぶことができますが、「画像だけ表示」にしてタイトルのテキストを消してしまうと、見出しh1で表記するタイトルがなくなってSEO的によくないそう。
ということで、「画像とテキストを表示」にしてソースにはタイトルを残して、表示だけ消す知恵をこちらから頂戴しました。
www.turetiru.com

今日の備忘録

ブログ界はこうしたありがたい情報を互いに発信しあって、良質なコンテンツがたくさん提供されていて、
利用する人もありがたい、提供する人はアクセスが集まり、またそれを改良して発信する人もいる。
んー、いろいろありがたいなあと思いつつ、自分のブログに取り込んだのでした。