読者です 読者をやめる 読者になる 読者になる

まださなぎ

誰かさんの蝋の翼。気負わず気楽に書いてくよ。

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

テクノロジー テクノロジー-Web関連

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

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

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

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

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

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

他所様のCSS解析

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

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


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

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


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;
}

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

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

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

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


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

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


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


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様のものを使ってる。


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

SVG形式を使った理由

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

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

  • (単純なアイコンなら)抜群に軽い
  • テキストでいじれる

の二点だ。


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

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

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

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

SVGの色変更

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

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


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

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

SVGの初歩的な要素削除

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

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


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

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


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

SVGファイルの変換

ここまで来たら、SVGBASE64に変換するだけだ。

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


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

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


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

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

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


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

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

:hover要素を使った。


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


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

背景周り

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

ギンギラな白は目に痛いので、微妙に色をつけている。具体的には#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が適用されない」仕様っぽいのよね。

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


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


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

備忘録、おっわりー。

広告を非表示にする