Shallow And Wide

Gadget, Camera, Airplane, etc.===Written By Koishi

Shallow And Wide

またまたテーマ変更とカスタマイズ


さてさて、記事の投稿が非常に前後しまっくています。
完全にめちゃくちゃだ笑

つい数ヶ月前の記事
という記事を書いたのですが、またやってしまいました・・・リニューアル・・・
今回は簡潔にまとめたいと思います。

テーマ変更

これまでのテーマから変えてみました。

undershirtに変更

これまではminimalismを使っていました。
私が悪いんです。非常にいいテーマだったのですが、薄い影を入れたり記事一覧の間隔を弄って自分好みにしたいーーー、ど素人がcssを滅茶苦茶にしてしまった結果、途中から思うようにカスタマイズできなくなりました。
(私の勉強不足で、作者さんもテーマも何も悪くありません。)
で、収集付かなくなった結果と、カード型デザインをしてみたい、けど、ここでテーマ変更したら、これまでのcssが全て無駄になる・・・ぐぬぬ・・・という思いと格闘しながら、テーマ変更に踏み切りました。

変更したテーマはこちら

レスポンシブ対応で、カード型デザインのシンプルなテーマです。

カスタマイズ内容

サイドバー関連

こちらのサイトを参考に まず、サイドバーの色を変更しました。
また、それに合わせて、見出しも同様なデザインに変更しました(後述)

グローバルメニューの変更とドロップダウンメニューの追加

いつもお世話になっておりますこちらのサイトを参考に モバイル環境では、ドロップダウンメニューになるグローバルメニューに変更しました。
また、ドロップダウンメニューは、開いた時に2列構成になるようにしました。

ブログタイトルヘッダー画像の調整

minimalismを使っている時も、苦労したのですが、ヘッダー画像を変更したことと、テーマ変更をしたことにより、これまでの方法では、上手くいかなくなってしまいました。
そこで、こちらを参考に
タイトル画像の調整をしました。
また、HiDPI対応をするために、タイトル画像は、自分が設定したいサイズの縦横長さ2倍の4倍の解像度で作りました。

見出しデザインの変更

いつもお世話になっているサルワカさんのサイト を参考に、見出しデザインも変更しました。
特に大見出しは、サイドバーのデザインに似た感じにしました。

記事カードからのはてなスターの削除

こちらを参考に 記事カードからはてなスターを削除しました。
はてなスターがカードに乗っかってる分、カード1枚あたり、1行多くなっていました。
PC・タブレット環境ではそんなに問題にならないんですが、モバイル環境で見た時、カードが野暮ったく見えていました。
あんまり、消したくないんですが、消しました。

目次のデザイン変更

こちらを参考に 目次のデザインを変更しました。
これまで、便利な目次機能を使ってきていなかったので、今後はしっかり使っていきたいと思います。

まとめ

また近いうちに大幅変更する未来が見えなくもない気がしてしまっています笑
今後の課題としては

  • グローバルメニューがもっと納得行く形にできないか研究
  • 目次デザインの細かい調整(目次タイトルが中央でなかったり、テーマ標準で入っている「目次」表記が残っていたり、目次の文字サイズがテーマ標準のままで今のデザインに合ってなかったり)

の2点かなと思います。

次回は、iPadでの記事編集についての投稿になるかなーーーー・・・・