【記事内編】当ブログで行ったカスタマイズ - ドイツ人ストリートミュージシャンと結婚しました。

f:id:akane1033:20171219065540j:plain

ブログのデザインを大幅にリニューアルしたので、備忘録として当ブログで行ったカスタマイズについて書いています。

第3回目の今回は【記事内編】です。

目次
- PC
- スマホ
大見出し
- 中見出し
  - 小見出し
引用
- PC
- スマホ
囲み枠
マーカーペン
YouTubeを埋め込んでも重くならないようにするやつ
- 【スマホ】画面から動画がはみ出てガタガタする問題
吹き出しで会話形式にするやつ
カエレバ・ヨメレバ・トマレバのカスタマイズ
リンクを別ウィンドウで表示させる
まとめ

当ブログで行ったカスタマイズ【トップページ編】はこちらから↓

【PCサイドバー・スマホフッター編】はこちらから↓

【記事上・記事下編】はこちらから↓

※当ブログでは「Foodey」というテーマを元にカスタマイズを行っています。

使用テーマ

foodey - テーマストア

枠の周りや枠内の幅を整える
枠をつける（二重線）＆枠に色をつける
「目次」というタイトルをつける＆「目次」前にブログアイコン
背景色をつける
文字の大きさを変更（「目次」＞大見出し＞中見出し＞小見出し）
大見出しの前に数字をつける＆数字の色を変える

<style>
/*目次*/
.table-of-contents{
margin:0 !important;
font-size:13px;
border:double #ffa07a;
padding:10px 10px 10px 40px !important;
background-color:#fffcf9;
}
.table-of-contents:before{
content:"\f039   目 次";
font-family:blogicon;
display:inline-block;
font-weight:bold;
font-size:14px;
padding:0px 0px 5px 0px;
}
.table-of-contents ul{font-size:12px;}
.table-of-contents ul ul{font-size:11px;}
.entry-content .table-of-contents{
list-style-type:decimal;
color:#993300;
}
</style>

コード場所（スマホ）：記事下

大見出し

↑新しい大見出し

ちなみに、変更前の大見出し↓

f:id:akane1033:20171213184351j:plain

中見出し

↑新しい中見出し

変更前の中見出し↓

f:id:akane1033:20171213184414j:plain

小見出し

↑新しい小見出し

変更前の小見出し↓

f:id:akane1033:20171213184434j:plain

小見出しは、色変えただけです。

PC、スマホとも同じデザインを採用していますが

スマホだと色の出方が違ったり（私のiPodTouchだけか？）やスペースの制限があるので、色や角の丸みなどを若干変えてあります。

以前も見出しはカスタマイズしていましたが、今回新しく導入したのが「大見出しの最初の文字だけ大きくする」やつ。

.entry-content h3:first-letter {
font-size:150%;
}

このコードを入れると、大見出しの先頭の1文字だけが大きくなります。

コード場所（PC）：デザインCSS

コード場所（スマホ）：記事下

引用

PC

引用に関しても、テーマの方でデザインが既にされていました。

f:id:akane1033:20171213184600j:plain

これはこれでかわいいんですが

引用かどうかが少し分かりずらいので引用っぽいマークを加えました。

f:id:akane1033:20171213184851j:plain

アイコンを入れることで、一気に引用っぽくなりました！

/*引用のデザイン*/
.entry-content blockquote{
position:relative;
padding:10px 15px 10px 50px;
box-sizing:border-box;
border:solid 1px #464646;
color:#464646;
}
.entry-content blockquote:before{
display:inline-block;
position:absolute;
top:20px;
left:15px;
vertical-align:middle;
content:"\f704";
font-family:blogicon;
color:#ff9933;
font-size:25px;
line-height:1;
}
.entry-content blockquote p{
padding:0;
margin:10px 0;
line-height:1.7;
}

参考記事

CSSで作る！魅力的な引用デザインのサンプル30（blockquote）

参考記事ではアイコンを出すのにFontAwesomeを使っていますが、コードははてなブログのアイコンフォントに変えてあります。

jQueryを使わず、サイト高速化！

コード場所（PC）：デザインCSS

スマホ

f:id:akane1033:20171213184809j:plain

スマホ版は、角が丸くないバージョン。

<style>
/*引用のデザイン*/
.entry-content blockquote{
position:relative;
padding:10px 15px 10px 50px;
box-sizing:border-box;
border:solid 1px #464646;
color:#464646;
}
.entry-content blockquote:before{
display:inline-block;
position:absolute;
top:20px;
left:15px;
vertical-align:middle;
content:"\f704";
font-family:blogicon;
color:#ffa07a;
font-size:25px;
line-height:1;
}
.entry-content blockquote p{
padding:0;
margin:10px 0;
line-height:1.7;
}
</style>

コード場所（スマホ）：記事下