コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

ちょっとだけアメブロの話でもします

CSS
はてなブログの規約には他ブログの宣伝をしちゃいけないなんてルールはなかったので宣伝するぜぇ

僕がしれっとはてなブログと並行してアメブロを始めていることは皆さんご存知ですよね？え、知らないですって？知ってよー（悲痛な叫び）。まあ、これ見て。ペ○ソナの影響受けまくったカスタマイズしているような気がするのは気のせいです。

ameblo.jp

ここでですね、人知れずアメブロカスタマイズなどをしこしこやっているんですよ。けども、元の編集用CSSがちょっと扱いずらいなって思ってたんですよ


編集用CSS
Amebaブログデザインテンプレート · GitHub

f:id:andron:20190625223116p:plain
僕はこんなテンプレートでいろいろいじってます。良い感じにまとめられたらGitHubの方にカスタムCSS載せようと思う。今は試験運用中……。

/*
 【CSS編集 目次】
　(1) 文字のスタイル
　(2) ボタンのスタイル
　(3) エリアのスタイル
　(4) その他、拡張
  ※CSS編集で広告を修正しないでください
  （規約違反に該当する可能性があります）
*/

大まかな編集可能要素はこんな感じです……。これでも編集箇所が分かりやすいですが……。これからCSSを拡張していくってなった時に、ちょっとどこに何があるかわからんってなりつつあるんですよね。なので、FLOCSSのCSS設計方針にのっとってちょっとカスタマイズしたいと思ったのでした。

参考：FLOCSS
github.com

FLOCSSは次の3つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。

  1. Foundation - reset/normalize/base...
  2. Layout - header/main/sidebar/footer...
  3. Object
    1. Component - grid/button/form/media...
    2. Project - articles/ranking/promo...
    3. Utility - clearfix/display/margin...

他のOOCSSに基づくフレームワークおよびスタイルガイドと同様に、 再利用性や拡張性を持たせるために、これらのルールで分類をします。

こんなん。とはいったものののですね元のHTMLをいじれないのでクラス名を変更することはできないのですよ。なので、そこをコメントを使って全力で区切っていくとかやっていきたいなーとか思ったりらじばんだりしてるわけです。まあ要するにエリアごとの要素をブロック単位で管理できるように分ける設計にしたいって話です。

本当は「カスタマイズ用CSS -> sass化して分割管理 -> カスタマイズ用CSS」みたいにいじれればいいんだけど今のとこそういうのが実現できそうなツール思いつかないのでコメントで何とかする方法で運用を考えることにします。自動デプロイまでできないSASSめんどいだけやもんな……。


そんなわけで、以下のように分けていきたい。

/* Foundation */
*{
 // 主にカラーテーマとフォント
}

/* Layout */
// 多分そこまでいじることにならないと思う
header{
}

main{
}

sidebar{
}

footer{
}

/* Object */
// ボタンとか細かい装飾とかアニメーションとか…
// 記事用の独自装飾とか

まあ、願望です。うまくいくかは知らないけどもとりあえずこんな方針でやりたいなーって思ったのとFLOCSSっていう設計手法を知ったのでメモとして残しておきます。

[トップへ]