他のセオリー改造サイトを見てもわからなかった人のために超やさしく解説
このサイトはセオリー(Xeory base）を利用して作成しています。このテーマはあっさりしていていいのですが、少し殺風景です。また、人気テーマ故に同じようなサイトが乱立することが予想されます。
そこで、備忘録をかねてheader周りの改造点を記載します。同じように悩んでいる方は参考になさってください。改造は自己責任で、ローカル環境で行ってください。(特にPHP部分を)直接サーバー上のファイルを変更すると誤った場合は、あなたのデータが飛ぶだけで無く、サーバー共有している方々に迷惑をかける場合があります。
HEADERまわりのCSSを見てみよう
/* —————————————-
* header
—————————————- */
#header {
background: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef;
}
#header #logo {
float: left;
font-size: 24px;
}
#header #logo a {
color: #383838;
}
#header #header-sns {
float: right;
}
#header #header-sns ul {
padding: 0 0 10px;
}
#header #header-sns li {
display: inline-block;
margin-left: 30px;
font-size: 21px;
}
#header #header-sns li a {
color: #ccc;
}
#header #header-sns li a:hover {
color: #57585a;
}
こちらがheader部分のCSSです。
背景色を変える
#header {
background: #fff;(この部分を変更します。）
#fffは白ですね。RGB表記では(２５５，２５５，２５５)となります。
色は色見本のサイトを見て決めればいいと思います。
私は他のサイトの色を抽出出来るソフトを使って、色番号を調べています。
ただ、微妙にグラデーションがかかっているサイトが多いです。
「プロとして作成するにはグラデーションぐらいかけないと」と言うことでしょうか？
色見本のサイトは「色見本」と入れて検索すればいくつか出てきます。
ちなみに
border-bottom: 1px solid #efefef;
この部分で薄いグレーのアンダーラインが入っています。目立たないので目立つように変更してもおもしろいかもしれません。
headerに表示されるlogoの変更
#header #logo {
float: left;
font-size: 24px;
}
#header #logo a {
color: #383838;
}
この部分でlogoの様々な設定をしています。
大きくしたい方はfont-size: 24px;
色を変えたい方はcolor: #383838;
を変更してください。
logoそのものは「初期設定－トップページのロゴ設定」で変更してください。画像選択もできます。
headerに表示されるSNSボタンの設定
残りの部分が右側に表示されるSNSボタンの設定になります。SNS設定をしない場合は「feedly」しか表示されません。
ここは色を変更するぐらいですかね。
デフォルト
#header #header-sns li a {
color: #ccc;
}
マウスポインタを置いたとき
#header #header-sns li a:hover {
color: #57585a;
}
位置や大きさ関係はいじらない方がいいと思いますけど、この辺をいじれば変わります。
headerに画像をはめ込みたいとき
背景に画像を使いたいときは
#header {
background: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef;
}
のbackground: #fff;
padding: 36px 0 32px;
border-bottom: 1px solid #efefef;
の代わりに次のように追記します
background-image:url(“画像のＵＲＬ”);
background-size: cover ;
height: ＊＊＊px ;
画像の高さやsizeの設定によってはスマホでうまく表示されないときがあります。
記述ミスにより画像が表示されないことも多いです。
絶対パスとか相対パスがわからない人にはおすすめしません。
サイトの上部に線を入れる
次のように#headerに追記載します。
border-top: 10px solid #1450aa;
＊＊ｐｘが太さ。＃＊＊＊＊が色です。
ご注意。
このサイトはxeoryとmicataを交互に表示しています。
上のように改造するとxeoryでは下の画像のようになります
