サイト改装で行ったこと記録-2016年12月分

いつもPCのHDD吹き飛ばしちゃうタイプだから、忘れないうちに記事にしておく。

ほぼ自分用のやっつけ記事。

目次兼今回行った変更リストを挟んで、次。

はてなブログテーマ「Innocent」導入

ワンクリック、ワンインストール。楽ちん。

http://blog.hatena.ne.jp/-/store/theme/6653586347149180725

他所様のCSS解析

ぶっちゃけた話、CSSは人真似が一番手っ取り早いのよねー。

完全丸パクリはいろいろ危険だけど、
「解析して参考にする」程度ならダイジョブダイジョブ。

まずは良いサイトを見つけて、ブラウザのデベロッパーツールから要素を解析する。

「デベロッパーツール」が聞き慣れない人は、以下のリンクを参照のこと。

• firefox　http://nelog.jp/firefox-developer-tool
• chrome　http://ascii.jp/elem/000/000/997/997889/

CSSファイルそのものをぶっこ抜くのもいい。
いくつか方法はあるけど、オーソドックスな方法を外部リンク。

テキストエディタでCSSを見ながら、そのサイトを解析するのが一番楽。

グローバルメニュー作成

一番苦労した部分にして、理解してみると一番単純だった部分。

横グローバルメニューの作り方はわりと見かけたが、
縦グローバルメニュー（サイドバー）の作り方はあまり見当たらなかった。

未来で自分が困ったときのために書き残しておく。

サイドバーを左端に表示

結論としてはleft: 0;``position: fixed;で左端に固定して、サイドバーの幅だけ、他をmargin-left:で右にずらす方法を取った。

……我ながらイミフな文章になってるな。

具体的に言えばこういう記述。（実際のサイトCSSからコピペ）

#gm-navi {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 155px;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.1);
  background :rgb(60, 60, 60);
  }

 #blog-title{
  margin-left: 155px;
}

 #content.hfeed{
  margin-left: 155px;
}

 #footer{
  margin-left: 155px;
}

• position http://www.htmq.com/style/position.shtml
• left http://www.htmq.com/style/left.shtml
• margin http://www.htmq.com/style/margin.shtml

三つ全て HTMLクイックリファレンス さんへのリンクだよ。

CSSへのアイコン埋め込み（BASE64）

アイコン画像をCSSに埋め込むのは、主に二つの利点がある。

• サイト高速化に効く
• メンテナンスが楽

そういうことで、このサイトではCSSにアイコンを埋め込んでるよ。

具体的には（PC版のみ表示の）「左側サイドバーのアイコン」部分。

これは「BASE64形式でのCSS埋め込み」……詳しくは外部リンク参照。

• http://qiita.com/cognitom/items/3134467210e0022f4a02
• https://allabout.co.jp/gm/gc/457432/2/

CSSにはこう記述した。（BASE64の中身は「hogehoge」と表記）

.navi-religion{
  height: 60px;
  background-image: url(data:image/svg+xml;utf8;base64,hogehoge);
  background-size : 25%;
  background-repeat: no-repeat;
  background-position: 7% 50%;
}

アイコン画像周り

アイコン画像はFlaticon様のものを使ってる。

• http://www.flaticon.com/

PNG/SVG/BASE64……と多くの形式がダウンロードできるけど、僕はSVG形式を使ってる。理由は今から説明。

SVG形式を使った理由

SVGファイルは、ベクター形式とも言われるもの。

アイコンに使う利点はいくつもあるけど、僕にとっての大きな利点は

• 「（単純なアイコンなら）抜群に軽い」
• 「テキストでいじれる」

の二点だ。

詳しくは外部リンク参照。

• https://app.codegrid.net/entry/svg-basic

テキスト形式でいじれる利点

人には大別して「絵を描ける人」と「絵を描けない人」の二種類がいる。僕は残念ながら後者だ。

なので、ペイントツールを使って操作するよりも、テキストを直でいじるほうが理解しやすいの。

SVGの色変更

テキストエディタで開くと、<path style="fill:#F1F2F2;">といった部分が見つかるはず。

fill:の後に続く色コードが、その要素の色を決めている。

変更箇所を探すためにも、カラーピッカーツールを用立てておいて、どの部分かを判別したら……あとはわかるよね。

テキストをいじるだけで好きな色に変えられる。ああ、なんと素晴らしいことか。

SVGの初歩的な要素削除

個人的な好みとして、フラットデザインはシンプルな方が好き。長い影は好きじゃない。

なので、これもまたいじる。

先ほどのように当該箇所の色を調べてから、その部分の記述をテキストエディタで削除。

<path></path>のように、きちんと要素の始めと終わりを見極めることが重要。

絵が描けなくてもいじれるSVGファイル、ほんと好き。

SVGファイルの変換

ここまで来たら、SVGをBASE64に変換するだけだ。

が、ここで軽量化のためのひと工夫。

SVGファイルに記述されているムダな要素を削除して、少しでも軽量化しておこう。

どういうことかは外部リンク。

• http://d.hatena.ne.jp/rikuo/20131203

上記のサイトにもあるように、実用上は最適化ツールだけでOKだ。

• SVG-Optimiser

• Base64 Decode and Encode

前者のサイトで必要のない箇所を削ってから、
後者のサイトでbase64に変換。

実にらくちんでよろしい。

SVG最適化の際ごくまれに表示がバグることがあるので、プレビュー画面をチェックするのは忘れないように。

マウスポインタを乗せるとちまっと変更

:hover要素を使った。

• http://www.htmq.com/selector/hover.shtml
• http://wp-p.info/tpl_rep.php?cat=css-intermediate&fl=r4

また、aタグにCSSを追加することで、マウスポインタを認識する範囲を広げてる。

• http://junk-blog.com/div_a_link/
• http://kumacrow.blog111.fc2.com/blog-entry-475.html

あと、マウスポインタを乗せた時のアニメーションはtranstionで。

• http://11neko.com/css3-transition/

背景周り

よーく見てもらえるとわかると思うんだけど、本文の背景、これ白じゃない。

ギンギラな白は目に痛いので、微妙に色をつけている。具体的には#main{background-color: rgb(255, 252, 253);}。

このアイデアはシンプルな手だけれど、テキストが多いサイトだと手堅く有用。

僕も気に入っているサイトからパクった形になる。

backgroundの画像

https://subtlepatterns.com/さんのものを使ってるよ。

ほかの画像と同じく、BASE64形式に変換してCSSに埋め込んでる。実際のCSSがコレ。（BASE64部分は"hogehoge"で置換）

#content.hfeed{
  padding-top: 80px;
  background-image:url(data:image/png;base64,hogehoge);
  background-repeat: repeat;
}

導入できなかった技術

CSSをCDN配信したかったんだけど、それはできなかった。 そこはどうにも、はてなの仕様っぽいんだけど。

「デザイン設定画面では適用されて表示されるけど、それ以外だとCSSが適用されない」仕様っぽいのよね。

なので、ローテク貼り付けで実現させてます。

「新しい技術が使われた、古い作りのサイト」を目指してるので、これからも頑張りたい。うん。

……といった辺りが、今回の記事で行った改装の内容。

備忘録、おっわりー。