別に小粋空間のテーマに不満はなかったんだけどね
なんかデザインが気に入ったので色々弄ってしかも乃木坂仕様にｗ
Techismというテーマでデフォルトは青系を意識した仕様なんだけど
弄っていくうちになんか引っ越す前のJUGEMのブログっぽくなってしまった
あとなんとなく紫基調の見た目で一気に乃木坂風になった
もうこの際だから思いっきりそっちに寄せてみた
取り敢えず細かい点は気になるけど完成したんでこっちで行こうかなと
かなり弄ったんで原型ない気がするがまあ忘れないうちにコードを書いとく
/*--------------------------以下追記-------------------------------*/
/* 横960px以上の解像度でウィンドウ最大化のサイト幅を制限(940px) */
/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body .site {
margin-top:0 ;
}
.site {
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
width: 936px;
}
}
/* 横768px以上のウィンドウ解像度でのサイト設定 */
/* Minimum width of 768 pixels. */
@media screen and (min-width: 768px) {
#page{
padding:0 10px;
}
.site {
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
width:936px;
}
/*サイドバーの幅を調整*/
#left-sidebar {
margin: 1.3% 0 0 -99.5%;
padding: 0 10px;
float: left;
width: 200px;
}
#right-sidebar {
margin: 1.3% 0 0 -99.5%;
padding: 0 10px;
float: right;
width: 200px;
}
/*記事の幅を調整*/
#content{
margin: 0 23% 15px;
background-color: #fff;
padding: 0;
float: left;
width: 500px;
}
}
/* ↑ここまで横760px以上の解像度での設定 */
/*記事ごとに囲み線を付加、余白を調整*/
.site-content article{
padding: 10px;
margin: 1.37em 0 2.0em 0;
border: solid 1px;
}
/*記事タイトル名のフォントサイズを調整*/
.entry-header .entry-title {
font-size: 17px;
padding: 15px 20px;
margin: -10px;
background-image:url("http://wastedays.cloudfree.jp/wp-content/uploads/2016/02/20160226_18-02-02.png");
}
.archive-header,.page-header {
margin-top: 1.37em;
}
/*記事タイトル名のフォントカラーを変更*/
.entry-title a {
display: inline-block;
color: white !important;
font-weight: bolder;
}
.entry-title a:visited {
color: white !important;
}
.entry-title a:hover {
color: #FF15DC !important;
text-decoration: underline;
}
/*記事ヘッダー＆フッター(投稿日、タグなど)のフォントサイズの調整*/
.entry-meta, footer.entry-meta {
margin-top: 14px;
font-size: 0.75em;
}
/*記事のフォントサイズと行間隔を調整*/
.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
margin: 0 5px ;
font-size: 13px;
line-height: 1.6;
color: black;
}
/*検索結果、アーカイブタイトル見出しのフォント、余白の位置調整*/
.archive-title, .page-title{
font-size: 14px;
padding-bottom: 3px;
text-align: center;
border-top-color: #9932cc;
}
/*---余白調整---*/
.archive-header,
.page-header {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 1px solid #ededed;
}
/* リンクテキストおよびマウスホバー時の色を統一 */
#content p a,.more-link {
color: #7e1083 !important;
text-decoration: underline;
}
#content p a:hover,.widget-area a:hover,.widget-area a:visited,
.more-link:hover,.more-link:visited {
color: #9932cc !important;
text-decoration: underline;
}
/*続きを読むボタンの目玉アイコンを消す*/
a.more-link:before{
content: unset;
}
/* サイドバーのタイトル名部分の調整 */
.widget-title,
.entry-content th,
.comment-content th {
font-size: 14px;
text-align: center;
line-height: 0.8em;
color: #636363;
letter-spacing: 1px;
margin: 0;
margin-bottom: 12px;
/*! padding: 3px; */
padding-bottom: 3px;
border: 1px solid #e6e6e6;
border-radius: 3px;
border-top-color: #9932cc;
border-top-width: 2px;
background: #fafafa;
}
/*カレンダーの文字を中央揃えにする*/
#wp-calendar th, #wp-calendar td, #wp-calendar caption {
text-align: center;
}
/*カレンダーの投稿のある日に下線を入れる*/
#wp-calendar td a {
text-decoration: underline;
}
/*ブログタイトルの背景画像を設定する(タイトル名と重ねる)*/
.site-header {
padding: 0;
margin: 0 -10px 0;
background: url("http://wastedays.cloudfree.jp/wp-content/uploads/2016/01/20120224_1247437.jpg");
height: 400px;
}
/*ブログタイトルのフォントサイズ*/
.site-title a {
padding-left: 30px;
background: transparent;
font-family:Comic Sans MS;
font-size: 60px;
font-weight:bolder;
color:#7e1083 !important; /* 文字色の変更 */
text-shadow: 3px 3px 10px #fff;
text-decoration: none;
font-style: oblique;
text-decoration:none;
}
/* ブログのサブタイトル(説明部)の変更 */
.site-description {
padding-left: 110px;
color: #ffffff !important;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background: transparent;
font-size: 12px;
}
/*記事フッターのナビゲーション(戻る進む)に装飾用の線を付加*/
.site-content nav {
padding: 0 5px;
border-left: solid #7e1083 10px;
border-right: solid #7e1083 10px;
}
/*記事フッターのナビゲーション(戻る進む)のフォントサイズ、余白設定*/
.nav-previous, .nav-next {
padding: 0 10px;
font-size: 13px;
}
かなり!importantとかで強引に適用してあるので環境によっては崩れるかも
一応ChromeとSafariは確認とったら縦方向にほんの1～2pxズレてる程度
ただしEdgeなどのIE系はサイドバーの縦方向がズレてる
直し方はわからんが致命的ではないしIE系使わないんで放置
ちなみに表示は「browsling」というサイトで簡単に確認できる(激重だけどね)
Techismテーマはレスポンシブ対応でブラウザとかの解像度によって
適切な表示方法を自動的に選んで表示してくれる
ありがたい機能のようでお節介な部分もあるので自分の場合は
960pxの解像度に合わせて横幅を設定し
それ以上の解像度にしても960px時の表示を保つように横幅を限定している
こうすればタイトル部分に画像を指定しても無駄に拡大表示されたりしない
かつレスポンシブでもデザインをできるだけ保つようにもなっている
他のレスポンシブ対応のテーマは結構弄る箇所が多くて面倒なのだけど
このTachismテーマが意外とシンプルな作りになっているおかげもあって
俺みたいに初心者でもなんとかなった
つーわけでしばらくはこの仕様でブログ運用してみようと思う
コメントを残す