おしゃれなSANGOカスタマイズができたから一挙紹介【随時更新中】

前回までのサイトデザイン

今回のサイトデザイン

より洗練されたおしゃれな感じにしました。女性向けサイトのMERYとisutaを足してSANGO風味を薄めたようなデザイン

CSSやカスタマイズ設定をまとめたので、是非参考にしてみてください。

ちなみに前回までのカスタマイズは納得のいくSANGOカスタマイズができたから一挙紹介【随時更新中】でまとめています。

MEMO
すでに書いてあるCSSの相性によっては上手くいかない場合もあります。!importantをつけてみたり、サルワカさんの講座を参考にしてみてください。

ヘッダー

ヘッダー下の影を消す

わたしは見た目をフラットにしたかったので影を消しました。ホバーで影が出てくるのが好きなんです。(謎のこだわり)

 

コード
.header {
box-shadow: 0 0px 0px rgba(0, 0, 0, .18);
}

 


ロゴの字詰め・デバイスごとに大きさ変更

レタースペーシングで文字のスキマを狭くしました。隙間を狭くすると賢そうに見える。らしい。

コード
/*ロゴ*/
#logo a {
font-size: 140%;
font-family: 'Noto Sans Japanese';
font-weight: 200 !important;
color: #aaa!important;
letter-spacing: -0.5px;
}

 

 


トップページ

 

記事一覧形式変更・区切り線入れる

カスタマイズ>デザイン・レイアウト設定>横長を選択します。本当はこの横長リスト形式でアイキャッチも横長にしたかったのですが、PHPファイルをいじらないといけないみたいなので止めました。(できるけど戻すとき面倒くさい)

ついでにヘッダー下と記事アイキャッチ下、ヴィジェット左に#eeeで区切り線を入れてみました。わたしは背景を白にしているので、要素の境界線がわかりにくくなっています。だだっ広い間延びした感じに見えてしまうので、区切ってすっきりさせました。

 
コード
.sidelong h2 {
font-weight: 300;
}/*トップページホバー*/
article.sidelong__article:hover {
box-shadow: 0 0 0 0;
}
.sidelong__link:hover {
color: #999;
}
/*トップページ点線*/
article.sidelong__article {
border-bottom: 1px solid #eee;
}
/*区分け*/
div#sidebar1 {
padding-left: 20px;
}
header.header {
border-bottom: 2px solid #eee;
}
header.article-header.entry-header {
padding-bottom: 20px;
border-bottom: 2px solid #eee;
}
h1.entry-title.single-title {
font-size: 120%;
color: #555;
}
.profile-background img {
width: 40%;
margin: 0px 30%;
}
@media (min-width: 1030px){
main#main {
border-right: 2px solid #eee;
padding-right: 50px;
}}
header.header {
border-bottom: 2px solid #eee;
padding-bottom: 10px;
padding-top: 10px;
}

2カラムにしてないと変になるかも。境界線を#eeeの色で区切っています。#eee大好き。パステル灰色って感じです。


目次


デザイン

ワードプレスのプラグイン「toc」を使って目次を表示しています。

コード
#toc_container .toc_title {
display: none!important;}
#toc_container .toc_list li:before {
font-family: FontAwesome;
content: "\f138";
left: 1em;
color: skyblue;
}
#toc_container .toc_list li {
font-weight: unset;
line-height: 1.5;
padding:0em;
list-style-type: none!important;
}
ul.toc_list {
border: solid 2px skyblue;
border-radius: 5px;
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
margin: 0!important;
}
div#toc_container {
border: solid 2px #eee;
padding: 2em;
position: relative;
background-color:#fff;
}
#toc_container .toc_list:before {
content: "INDEX";
background-color: #e1cfeb;
padding: 2px;
margin: 1px 10px;
left: 10px;
}
#toc_container {
position: relative;
width: 100%!important;
margin: 2.5em 0;
padding: 20px 15px;
border-top: solid 5px;
font-size: 0.95em;
}
@media only screen and (min-width: 500px){/*ブレイクポイント500px*/
#toc_container {
padding: 10px 25px;/*余白(内側) 上下 左右*/
}}

chromeの検証機能を使って目次デザインを考えました。土台はSANGOカスタマイズ界に突如現れた神「Bear face」さんの記事です。リストデザインはサルワカ様を参考にしました。汚いコードです。すみません!

随時更新予定

また気が向いたら更新します。

 

コメントを残す

メールアドレスが公開されることはありません。