あの日天才が降臨した。

主にPC・アプリ、本やアニメとかとか

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

f:id:PyontaX:20170214103406p:image

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

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

 

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

 

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

 

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

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

 

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

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

 

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

 

 

 

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

 

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

 

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

 

f:id:PyontaX:20170213005942p:plain

 

なかなかいい感じ。

 

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; }

 

 

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

 

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

 

 

サイドを横にもってくる 

 

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

f:id:PyontaX:20170213005741p:plain

 

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

サイドちゃうやんwww

 

僕も思いました。

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

 

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

f:id:PyontaX:20170213005755p:plain

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

 

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; } }

 

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

 

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

 

f:id:PyontaX:20170214111014p:plain

 

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

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

 

 

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

 

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

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

 

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

 

広告ブロッカー(ウェブ画面上の広告をブロックする最強アプリ)
広告ブロッカー(ウェブ画面上の広告をブロックする最強アプリ)
 
開発元:Mayo Donburi
 ¥120
 ★★★★★

 

  CSS

参考サイトでコード転載が不可だったため下の参考ブログの方でご覧ください。
本当は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に適当なカラーコードを打つとカラーコードを手動で選べます

 

f:id:PyontaX:20170214114112p:plain

 

 色を選択すると…

 

f:id:PyontaX:20170214114602p:plain

 

 僕のテーマではちょっと大きくすぎました

サイドに設置して、widthの値を300→255にすると…

 

 

f:id:PyontaX:20170214114130p:plain

 

完成! ちょうどいい幅になりましたー

もちろん僕が作ったわけではありません (笑)

 

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

 

 

まとめ

 

初回で、数は少ないですが使えるものばっかです!

ほとんどコピペですが、それなりにカスタマイズできました。SNSシェアボタンは上手くカスタマイズできませんでした(T_T)

無料バージョンだからかな…

そういえばスマホの人は見にくいよなー

ホントにすいません

 

スマホCSSも編集したいんだけど、Pro行きだからな〜

まあそれは人気次第かな…