リベルさんの戯言室

ゲームの攻略とか映画のネタバレとか。そのほかヌルヌル書いてます。リンクフリーです。※当ブログはPC版表示に最適化されています。

HTTPS化にともないテーマ変更+簡単なカスタマイズ


HTTPS化にともない、デザインを数日かけて変更しました ざっくりまとめです。

適用したデザイン

DUDE - テーマ ストア

かっこいい!フォントも変わる!

HTTPS化に伴う弊害

HTTPSに変更したらそもそも大量のエラーが発生し始めました。

原因は単純。

HTTP前提で作ってたから。

HTTPSにすると、HTTPが混ざると混在コンテンツ扱いになってしまうのでスクリプトが読み込まれなくなったりします。

とりあえずやったこと


…はい。超めんどくさくて全消ししました(逃げ


カスタマイズ

上述より、カスタマイズは全滅したので、必要なスクリプトを入れなおしました。
継ぎ足し継ぎ足しでやってきたのでぐちゃぐちゃなソースでしたが、今回総入れ替えしたおかげでかなり見やすくなりました。

DUDE関連設定

作者さんのサイトにあるカスタマイズは一通り採用しました
tsukuruiroiro.hatenablog.com

ただし、以下についてはちょっと変更。

  • ライター名のフォントを他と統一
/* ABOUT部の調整 */
.authorname a {text-decoration: none;
  font-family:  'Montserrat', sans-serif; font-size:20px; color:#4E4E4E; padding-left: 4px;}

追加カスタマイズ

DUDE以外のはてなブログ全般的に使えるカスタマイズ。

  • メインの幅は728に変更。理由は察してください
/* 全体の幅 */
#container #content {
    width: 1068px;
    }
    
/* メイン部の幅 */
#main {
  width: 728px;
  }
/* メニュー部の幅 */
#box2 {
  width: 300px;
  }
  • 各記事のカテゴリはサイズを巨大化・背景色をDUDEの中で使用されている青色に変更。
/* 記事内カテゴリボタン */
.categories a {
background-color: #5880AD;
color: #fff;
padding:10px 20px;
}

rascal0403.hatenablog.com

  • 最新記事・過去の記事一覧・月別記事・カテゴリのタブ化

www.yukihy.com

今後の改善点ほか

  • 関連記事周りを昔つかってたやつに戻したいが、ソースを提供してくれていた人はすでに開発停止している模様。元記事ではカスタマイズしたい人はここ見ろってGithubを公開していたので分析してみる?
  • 昔に比べてはてな側が強制的に差し込んでくる広告が増えたような気がする PRO化する?
  • SEO対策としてGoogle+に送り込んでいた仕組みがおそらくまだ残っている。これは問題なのでどうにかしないとダメ
  • SNSボタンは全削除しちゃったけどあれって必要なのかな…?スマートフォンの場合はブラウザの機能で「共有」しちゃうし、PCならURL簡単にコピーできてしまう。デフォルトのボタンは悲惨なので復活させるならさせるで何かしら考える必要あり
  • ボタン押すと上にぬるっと戻るボタン 昔実装してた気がするけれど、そういえば消えてる(全消ししたせい)