ブログのテーマ(見た目)を変えた

デフォルトの真っ白のやつを使ってたんだけど、味気ないのに飽きてきたので変えました。
新学期ですしね。

使ったテーマはこちらです。

Material – テーマ ストア

公式の案内に従ってちょっとカスタマイズしています。
webgaku.hateblo.jp

  • もともとサイドバーに色々要素いれてたので、2カラムに
  • PCで余白ありすぎてメインの文章見にくかったので幅広げる
  • レスポンシブに(スマホでもそれっぽく)

できたCSSはこちら

/* <system section="theme" selected="8454420450093337097"> */
@import url("https://blog.hatena.ne.jp/-/theme/8454420450093337097.css");
/* </system> */
/* 2カラムレイアウト */
#container #content {
width: 1160px;
}
#main {
width: 800px;
float: left;
}
#box2 {
width: 300px;
padding: 24px;
float: right;
margin-top: 0;
margin-bottom: 60px;
background-color: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px;
-webkit-animation-duration: 0.4s;
-webkit-animation-duration: 0.4s;
-webkit-animation-fill-mode: both;
-webkit-animation-fill-mode: both;
-webkit-animation-name: slideRight;
-webkit-animation-name: slideRight;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(6.25em);
transform: translateX(6.25em);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideRight {
0% {
-webkit-transform: translateX(6.25em);
transform: translateX(6.25em);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#box2-inner {
width: auto;
}
.hatena-module {
text-align: left;
padding-right: 0;
width: 300px;
float: left;
}
@media (max-width: 1024px) {
#container #content {
width: 95%;
}
#main, #box2, .hatena-module {
width: 100%;
float: none;
}
#box2 {
padding: 0;
background-color: transparent;
box-shadow: none;
border-radius: initial;
-webkit-animation-duration: initial;
-webkit-animation-duration: initial;
-webkit-animation-fill-mode: none;
-webkit-animation-fill-mode: none;
-webkit-animation-name: initial;
-webkit-animation-name: initial;
-webkit-animation-timing-function: initial;
-webkit-animation-timing-function: initial;
}
}
/* Responsive: yes */

コメント

タイトルとURLをコピーしました