【CSS】はてなブログ始めて7日のCSS初心者カスタマイズまとめ

未分類

2017.02.142019.02.20

ブログを初めてから今日で7日経ちました！

少しCSSでカスタマイズしてみました。

デフォルトでも別いいんだけど、せっかくはてなブログなんだしあれこれいじってみました。

ブログのパイセン様の記事を参考にしました。そちらの方が分かりやすいです。

参考というよりほぼパクリです笑

(幅や色などは変えた部分はありますが)

許して下さいm(_ _)m

将来的には自分でCSSやHTMLを書けるようにできるようにしますから。

僕がした順番通りに書いていきます

記事タイトルをカスタマイズ

はじめは簡単そうなやつから。

このブログの方がいくつか紹介してくれていたので、リボン風を選んでやってみました。

なかなかいい感じ。

CSS

.entry-title {
font-weight: bold;
font-size: 20px;
position: relative;
padding: .75em 1em;
background-color: #f0f0f0;
}

.entry-title::before,
.entry-title::after {
content: '';
position: absolute;
top: 100%;
border-style: solid;
border-color: transparent;
}

.entry-title::before {
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #ccc;
}
.entry-title::after {
right: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-top-color: #ccc;
}

↓参考にさせてもらったブログ

http://www.north-geek.com/entry/css-title

記事タイトルのデザインはたくさん載せてくれているので、自分のテーマに合いそうなものを選びましょう

サイドを横にもってくる

↓初めに僕が選んだテーマはサイドこんなんでした。

テーマによってはサイドが横にこないものがあります。

サイドちゃうやんwww

僕も思いました。

サイドはPC画面のみにでてくるので記事横にした方が絶対いい！

僕ははてなProではないのでスマホはどうせ味気ないやつになっちゃうからね

横にしてみてだいぶ見やすくなった

CSS

#main {
width: 600px;
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) {
#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;
}
}

↓参考にさせてもらったブログ

http://webgaku.hateblo.jp/entry/material-theme-2column

これいいっちゃいいんですけど、検索マークが消えちゃうんですよー

CSSで幅調整できるんだろうが、もうテーマごと変えちゃいました

ちょうどいい感じのテーマがあったんで

アプリーチのカスタマイズ

僕はアプリ紹介のときに画像を使いたいのでアプリーチを利用しています。

そのままだとちょっと雑なのでそのカスタマイズです。

アプリーチの通常だと適当にリンク貼ったみたいになるので枠をつけてみました

広告ブロッカー（ウェブ画面上の広告をブロックする最強アプリ)

開発元:Mayo Donburi

¥120

★★★★★

CSS

参考サイトでコード転載が不可だったため下の参考ブログの方でご覧ください。

↓参考にさせていただいたブログ

読者になるボタンの設置

お前いらねぇだろと言われればそれまでですが、一応ね(^_^;)

読者になるボタンは

設定→詳細設定からHTMLをコピペで使えるので便利なんですが…

ちっこい

そこで、

読者になる

で〜ん！

めっちゃええ感じのキター o(≧▽≦)o

①まずはHTMLです。これを設置したい箇所に貼ります。

<div class=”reader-button”>
<div class=”reader-button-inner”>
<a href=”http://blog.hatena.ne.jp/あなたのID/ブログのURL/subscribe”>読者になる</a>
</div>
</div>

青色のところは自分のやつを入力して下さい。

HTMLだけでは最低限の記述でほとんどデザインはありません。

②次はCSSです。

/* reader button */
.reader-button {
width: 300px;
height: 46px;
margin-top: 0;
margin-bottom: 20px;
}
.reader-button-inner a {
position: relative;
display: table-cell;
width: 300px;
height: 46px;
border-radius: 4px;
background-color: #ca5b5c;
font-size: 20px;
font-weight: bold;
color: #fff;
text-align: center;
vertical-align: middle;
box-shadow: 0 2px 4px rgba(0,0,0,.4);
text-decoration: none;
transition: all .6s;
}
.reader-button-inner a:hover {
top: 3px;
box-shadow: none;
transition: all .6s;
}

取り敢えずbackground-colorを変更

直接Googleに適当なカラーコードを打つとカラーコードを手動で選べます