ちょっと気分転換も兼ねて、ブログデザインを今までよりもゆるい感じのデザインに改めてみました。
とりあえず何をどうしたか、現時点での作業録的なものを残しておきます。
まあ、誰かの役に立つというよりは単なる備忘録ですけどね(^-^;
採用したテーマ
今回使用させていただいたのはmamegoroさんによる "マテリアルぽっぷ"。
堅い印象を和らげたかったこと、これまで使用していたテーマの文字が見づらかったこと(単に調整を怠っていただけ←)などの目論見におおむね合致したのが選択した理由です。
なお、斜体字風にデザインされていた記事タイトルフォントにちょっと違和感を感じたので、カスタムCSSでこの装飾を下記の要領で解除させていただきました。
h1.entry-title {transform: skewX(0) !important; }
あとはてなスターのボタン(画像)にborder-radiusがかかって丸められていましたが、デザイン的にちょっとアレだったのでこれも解除させていただきました。
span.hatena-star-star-container img {border-radius: 0 !important; }
シェアボタン
今まで使用していたものでもデザイン的に融合していたので良かったんですが、この際なので比較的一般的に使用されている風のデザインに変更しました。
採用させてもらったのはvintonさんによるMaterial Design風のもの。
こちらは公開されているものをそのまま(idなど変更必須の部分を除く)使用しています。
ちなみに今までは記事の下にしか設けていませんでしたが、今回からタイトルの下にも試験的に置いてみました。
今後の予定(は未定)
- 段落と段落の間が詰まりすぎているように感じるのでもう少し広げようかな?
- "続きを読む" の存在感が薄いのでちょっと修正しようかな?
- 記事タイトル下のタグ、丸みが強すぎるのでRを少し小さくしようかな?
他はその都度気が付いた時に手を加えていきます。
またこれと並行してサイドバーなど各所で手直しもしていく予定なので、しばらくの間はページが落ち着かないかもしれませんがご容赦ください♪
ではでは。
その後の修正履歴
- 段落間スペースを調整した
- 続きを読むボタンを装飾した
- 続きを読むボタンと、その下のはてなスターとの間隔を調整した
- 記事タイトル下のタグの背景色、角の丸みを抑えた
- 記事本文下の購読(登録)リンクの見栄えを調整した
- "なかのひと" の背景画像変更と文字色を変更した
- 画像改変の規約に抵触するとまずいのでサイドバーの広告画像に対してborder-radiusが機能しないように改めた
- はてブロ純正のiTunes埋め込みコンテナのデザインをリンクコンテナの同じような見栄えになるよう整えた
- 単語内の改行を許可する仕様になっていたのでこれを解除した:word-break, word-wrap
- 検索結果表示ページに設置されている検索欄のテキストが見切れて表示されていたため、高さを45pxとしてサイドバーの検索欄に合わせた
- "編集" ボタンの出現・消滅に連動して本文領域が上下に動くのが気持ち悪いのでこれを回避させた(同時に編集ボタンを少し装飾)