CSSカスタマイズ [for ムラゴン]

ヘッダー・フッター・サイドバー・トップへ戻るなどのカスタマイズをちょっとだけやってみました。

記事一覧ページ

タグ・カテゴリー一覧、月別アーカイブページなどの一覧形式の各エントリーの余白を追加

トップページ

記事のスニペットの文字数が多いため一定数以上を超えた場合に…で省略するjavascriptを記述しました

トップへ戻る

幅を調整、border-radiusで形を丸に。通常時の背景色とフォントカラー、マウスホバー時のフォントカラーを変更しました

ヘッダーエリア

画像を作ってアップロードしただけ。サイズは950×77で描画されるのでそのままのサイズを用意。今回透過せずに背景色と同色で描画しています

フッターエリア

特にカスタマイズしていない状態ではこのような感じだと思います

SNS の欄がガタついていたり それぞれの要素が別なので不揃いで位置がずれているのが気になったためCSSで調整してみました

バナーはムラゴンの外部連携で表示されるバナーではなくブログ村のバナーを利用しています

それぞれサイズが不揃いだったのでできる限り合わせてみました

SNSのシェアボタンの要素はFlexのセンター揃えになっているので右寄せにするかどうか悩みましたがとりあえずセンターのままで。PCで見たときにはこれで揃って見えてるはずです。ただ、ブラウザによって見え方が違うので多少ガタツキは残っているかもしれません。

また、スマホでの見え方は確認していないためレイアウトが崩れている可能性もあります。

サイドバー

デフォルトのプロフィールを「読者になる」のみ残して他はdisplay:none;で非表示に。外部ツールで作成したプロフィールをフリースペースで表示するように変更しました

ブログ村でフォローのバナーをセンターに揃えました

Twitter (X) とYouTube のSNSフォローボタンの追加しました

タグとカテゴリーをデフォルトから変更しました

フジブロっ! さんのジェネレーターでおおよそのレイアウトを整えました。ムラゴンではFont Awesomeを利用できないのでgithubにsvgファイルをアップロードして＜img＞タグで呼び出しています。

そのままではsvgの位置やホバー時の挙動がデフォルトのデザインと合わないためCSSで微調整しました。