SWELLカスタマイズ事例 – あおこん家のブログ

やさしい印象を与えるアナログ風デザイン

タイトルのデザインフォントを見出しにも使用。

背景にはざらっとした画用紙のテクスチャに水彩のグラフィックを配置し、ブログ全体にアナログなやさしい印象を与えています。（スクリーンショットの都合で水彩グラフィックが見切れていますが、本来は固定表示）

ちなみに、プロフィール部分に配置した水彩イラスト「あじさい」の花言葉は「家族」。

手描き風の罫線

既存のアイキャッチ画像と背景との境界がぼやけないよう、手書き風の罫線をアイキャッチに被せアナログ感を出しています。ほかにもボタンや記事リストの区切り線、ブロック要素の囲みボーダーも手描き風の罫線で統一しています。

フルスクリーンメニュー

画面右上にハンバーガーメニューを固定配置。クリックすると「開閉メニュー」に登録したブログパーツをフルスクリーンでオーバーレイ表示します。

手描き風の罫線

記事ページでもアイキャッチ枠以外に、日付、目次、ブログカードやポチップ、そしてサイドバーのウジェット枠などで、手描き風罫線を使用しています。

これらは「border-image-source」プロパティで実装しています。また、サイドバーでは枠AとBをCSSで交互に設定しています。

SWELLの見出し（デフォルト）も手描き風罫線でカスタマイズしています。

更新マニュアルのオンライン化

今回は更新に影響するようなカスタマイズ部分はほとんどありませんでしたが、今後の運用で更新するであろう箇所について、更新方法をオンラインマニュアルとしてまとめています。（ログイン時のみ閲覧可能）
いままではイラレでPDF化して…と、なにかと大変でした。