寒すぎて温かい飲み物なしでは生きていけないがちゃまにあです。どーもこんにちは。
今は貰い物のコーン茶飲んでます。うまい。
願い事手帖、実はまだ３０個書けていません(笑)
物欲を刺激するべく、amazonを色々見回って欲しいものリストなんかも作ってみたんだけど、ないならないでいいかとか思ってしまう自分がいます。
欲がないと発展も志向しなくなっちゃって良くないけど、逆に欲の塊ってのは論外だしな。中庸って大事ね。
今日はそんな話題とは全く関係のない、はてなブログカスタマイズの話。
きっかけと知識を提供してくれた方々に感謝
ブログのデザインを変更した。
「日報」というブログタイトルを意識して、なんとなく新聞っぽい感じで。
まだやりたいこともあるが、あせらず徐々に完成させようと思う。
きっかけはミィア猫さんのこの記事。
http://meerkat00.hatenadiary.jp/entry/20140110/1389284066
記事自体も良かったのだが、それ以上にミィア猫さんのブログのデザインがすごくかっこよくて刺激された。
久しぶりに色々いじりたい気分になった。
こんな風に書くと私が簡単にブログカスタマイズできる部類の人間であると思われるかもしれないが、まったくそんなことはない。
仕事ではほぼパソコンを触らないし、学校で習ったということもない。
独学で覚えて、まあ何とか触れるよという程度のものである。
そんな私でもある程度のカスタマイズができてしまうのは、ネット上でやり方を解説してくれている方々のおかげだ。
知識を提供するというのは、恩恵を他者にも分け与えることである。
これは本当にありがたいことで、感謝してもしきれない。
中でも私にとってありがたかったのは、コピペでカスタマイズできるようにしてくれてあるサイトである。
私にとって一番難しいのは、セレクタをどう記述するかということだ。
クラスとかIDとかをきちんと理解していない*1私にとって、.か＃かを判断するのは至難の業。
だから「このセレクタをいじるとこの部分が変わる」と、具体例を示して説明してくれてあるサイトにはかなり助けられた。
何とかここまで変更できたのは、コピペさせてくれたサイトのおかげである。
そういう方々に倣い、私が今回どのようにデザインを変更したか、CSSがまったくわからない方もコピペでいじれるように書いていこうと思う。
ここをいじるとカスタマイズできます
まずはこれからの作業を行う場所に移動する。
はてなブログのダッシュボードにある「デザイン」を選択。
まずはデザインの大元となるデザインテーマを「epic」にした。
これはシンプルでいじりやすそうだったからである。
デザインテーマが違うと、コピペしても変更されないかもしれないので注意して欲しい。
「デザイン」の「カスタマイズ」タブを選び、「デザインCSS」を開く。
ここにいろいろ書き込んでいく。
ブログ全体に関わる変更
ブログ背景と文字色
背景だが、「カスタマイズ」タブの上のほうに「背景画像」という欄があるので、そこですきな画像を設定する。
元々あるのを使ってもいいし、自分の手持ちの画像を使ってもいい。
位置は「中央」、繰り返しは「繰り返さない」、スクロールは「固定する」と設定した。
さらに「デザインCSS」にこう書いておく。
body{
background-repeat:no-repeat;
background-position:top center;
background-attachment: fixed;
background-size:cover;/*背景の拡大*/
color:#466;/*文字色の指定*/
}
上の3つはなくてもいいかもしれない。
「background-size:cover;」の「cover」部分を変更することで背景のサイズを変更することができる。
主な変更選択肢はこちら。
「auto」「contain」「cover」「100% auto」「auto 100%」「100% 100%」
背景画像の拡大・縮小 → background-size ! | 0から目指すWebマスター
もちろん実際に全部入れ替えて試してみてもいいが、このページにサンプルが掲載されているので見てみるとよくわかるのではないだろうか。
文字色は「#」以下の数値を変えてもらえば変更できるのだが、この1箇所だけでブログ全体の文字色をすべて変えることは残念ながらできない。
どんな色になるかはこのサイトがわかりやすいかと思う。
箱についての変更
この「epic」というデザインは、ページ全体の中央に箱があり、その中に記事などを表示するデザインである。
この箱の幅を少し広くし、箱の角を丸くした。
箱の背景色も、実は真っ白ではなかったりする。
#container{
background-color:#ffffdc;/*背景色を変える*/
width: 1100px;/*箱の幅を変える*/
border-radius: 2px;/*角を丸くする*/
box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.30);/*箱に影をつける*/
padding: 0px; /*箱の内側に余白を取る*/
margin-top:100px;/*箱の外側上部に余白を取る*/
border:3px double #466;/*箱に外枠を付ける*/
}
「background-color:#ffffdc;」で背景色を変更している。
ここで色の指定が6桁表記で表記されているのは、３桁では表せない数だからである。
例えば「#123」を6桁にすると「#112233」となる。
「#152637」としたかったら、6桁で指定するしかないのだ。
「width: 1100px;」私のブログの箱の横幅を1100pxにした。
あまり広くてスクロールしなければならないのは絶対避けたいが、狭すぎても使い勝手が悪い。好みだと思う。
「border-radius: 2px;」箱の角を丸くするための一文だが、私のブログではわかりにくいかもしれない。
数字を上げれば上げるほど角が丸くなる。
「box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.30);」箱が浮き上がっているように見せることができる。
1番目の数字は水平方向の位置。大きいほど影が右にずれる。負の数なら左だ。
2番目の数字は垂直方向の位置。正なら下、負なら上にずれる。
3番目の数字はぼかし具合。数字は正のみで、大きいほど端がぼやける。
rgbaは色の指定である。
#○○○で指定してもいいのだが、透明度も指定したかったのでこうなった。
rgbaはred,green,blue,alphaの略である。
この表記方法だと、16進法で書かれているものを2進法に直す必要がある。
例えば「#379」をこの表記に変えたければ、以下のようになる。
「#379」＝「#337799」＝rgb(16*3+3,16*7+7,16*9+9)＝rgb(51,119,153) となるはずだ(計算式合ってるだろうか。ちょっと不安。)。
4つ目の数字を変えることで透明度を調整できる。
1が最大で、数値を上げるほど濃くなる。
「padding: 0px;」箱の内側に余白を取るための一文。
ここでは0pxなので余白なしということになる。
「margin-top:100px;」箱の外側上部に余白。
「-top」を付ける事で、上部限定の指定になっている。
「-left」で左、「-right」で右、「-bottom」で下を指定することができる。
これは1つ前の「padding」にも応用可能である。
「border:3px double #466;」箱の外側を囲んでいる線の指定。
数字は線の太さ、「double」は線種である。#以下は色の指定だということは何度も出てきたのでお気付きかと思う。
線種は「solid」「double」「groove」「ridge」「outset」「inset」「dotted」「dashed」「none」である。
どうなるかはこちらを参照。
スタイルシート［CSS］/ボックス/境界線のスタイルを指定する - TAG index Webサイト
タイトル部分のカスタマイズ
次はタイトル部分である。
#blog-title h1,#blog-title h1 a:link,#blog-title h1 a:visited,#blog-title h1 a:hover{
margin-top:35px;/*外側上部の余白*/
font-size:40pt;/*字の大きさ*/
font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;/*書体*/
color:#466;/*文字色*/
}
#で始まるものがたくさん並んでいて複雑に見えるが、これは「,」で区切られたAにもBにも同じ設定を適用するということである。
「h1」は文中の「＜ｈ１＞＜／ｈ１＞」(これは全角表記なのでコピペしないように)で囲まれた部分ということ、「a:link」「a:visited」「a:hover」は「リンクが貼られている箇所」「既に行ったことのあるリンク」「リンクされている文にマウスが乗っている」ということを示す。
「font-size:40pt;」では文字の大きさを指定できる。単位は「pt」を使った*2。
「font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;」
これは書体を指定する一文だが、書体は読み手のパソコンに依存するのでマニアックなものを指定しても反映されない可能性が高いし、下手にいじれば読みにくくなるので気をつけたほうがいいかもしれない。
先頭から順に適用される。
書体のサンプルがページの下部にあるので参考になるかと思う。
ちなみにがちゃまにあ制作部屋ではこのように変更している。
#blog-title h1,#blog-title h1 a:link,#blog-title h1 a:visited,#blog-title h1 a:hover{
font-size:20pt;
font-family:"Gulim";
margin-top:70px;
height:30px;/*高さ指定*/
padding-top:0px;
margin-left:30px;
margin-bottom:60px;
text-align:left;/*タイトルの位置*/
font-weight: bold;
color:rgba(255,68,0,0.8);/*色指定*/
text-shadow: 1px 1px 1px #f80,
-1px 1px 1px #f80,
1px -1px 1px #f80,
-1px -1px 1px #f80;/*文字に影をつける*/
}
「font-weight: bold;」で文字の太さを変えることができる。
数値で指定することもできるが、「bold」だけあればいいような気がしているので省略。
「color:rgba(255,68,0,0.8);」透明度をいじりたかったのでrgbaで表記した。
「text-shadow: 1px 1px 1px #f80,-1px 1px 1px #f80,1px -1px 1px #f80,-1px -1px 1px #f80;」文字に影を付けることができる。
がちゃまにあ制作部屋では文字に縁取りをする目的で使った。
数値の意味は前述の「box-shadow」と同じである。
「,」で区切った数の影ができる。この場合は４つに区切ったので影も４つある。
影の伸びる方向を４方向に設定し、縁取りにしている。
css3のtext-shadowによるテキスト装飾のサンプル集 - かちびと.net
うまく使えばこんなこともできるらしい。なんて便利。
長くなったので続きはまた。
