CSSコピペで1分!最低限のブログデザインカスタマイズ

簡単ブログデザインカスタマイズ WEBのこと

ブログ初心者はカスタマイズするより先に記事を書け!とはよく言われますが、デザインがダサいとモチベーション下がりませんか?
私はどーーーーしても我慢できなくて、記事もそこそこにカスタマイズしちゃいました。

ブログデザインのカスタマイズは難しいとか、こだわると時間がかかってしまいそう・・・と思いますよね。
実はデザインはCSSをコピペするだけなので、一瞬で変更できます。

ワードプレステーマのカスタマイズなんて難しいことをする必要はありません。
ブログ全体のフォントと見出しデザイン、カラーを変えるだけでかなり印象が変わるので、ここだけカスタマイズすれば十分です。
無料テーマを使っていても、スッキリ洗練された雰囲気に変えられるので超おすすめ!

というわけで、ブログを始めて間もない私がおこがましくもやってしまったカスタマイズ3つをご紹介します。笑

CSSも置いておくので、よかったらコピペして使ってくださいな!
ブログのフォントと見出しタイトルのデザインは、ワードプレス以外のブログにも適用できるのではてなブログを使っている人もぜひ取り入れてみてください。

スポンサーリンク

前提:CSSのカスタマイズ方法|記述する場所

まず前提としてCSSのカスタマイズのやり方を簡単に説明します。
CSSカスタマイズのやり方は色々ありますが、ここでは超初心者でもできる一番簡単な方法のみご紹介します。

ワードプレスのCSSカスタマイズ

ワードプレスのCSS記述場所は、管理画面の「外観」→「カスタマイズ」→「追加CSS」です。
ここにCSSを記述していきましょう。簡単だね!

はてなブログのCSSカスタマイズ

はてなブログのCSS記述場所は「ダッシュボード」→ 「デザイン」 → 「カスタマイズ」 → 「デザインCSS」にあります。
やっぱり簡単だね!

超初心者でも簡単!私がやったブログデザインカスタマイズ3つ

CSSをペーストする場所がわかったら、いよいよカスタマイズに移ります。
私が行ったカスタマイズを3つご紹介しますので、気に入ったらどうぞCSSをコピーしていってください。どうぞどうぞ。

ブログ全体のフォントを綺麗なフォントに変更する

ブログの雰囲気はフォントで決まると言っても過言ではありません。

だってほら、MacとWindowsのおしゃれさの違いってほとんどフォントのせい(偏見

なのでさっさとフォントの設定をしちゃいましょう。

CSSに以下をコピペして御覧なさい。

body{
    font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, 
"ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 
'メイリオ' , Meiryo , Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

ワードプレスならコピペした瞬間にプレビューされるはずですが、いかがでしょうか?

かっこよくなりましたか?

見出しのデザインを変更する

次は見出しデザインです。

私は実は見出しデザインは行き当たりばったり適当にしてしまったので、まだ定まっていません。バラバラ。

時間ができたらちゃんと設定し直します。

見出しデザイン

今の私の見出しデザインはこんな感じ。

これでよければCSS置いておきますね。どうぞどうぞ。

これも追加CSSにコピペするだけです。

/*見出し*/
.article h2{
position: relative;
background: #FFBDBD;
box-shadow: 0px 0px 0px 5px #FFBDBD;
border: dashed 2px white;
padding: 0.25em 0.5em;
color: #454545;
margin: 40px -20px 20px
}

.article h2:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #FF9999;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.article h3{
border-bottom: solid 3px #ff0066;
}
.article h4{
border-bottom-color: #FCD4D4;
}
.article h5 {
position: relative;
padding-left: 25px;
font-size:18px;
}

.article h5:before {
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px rgb(119, 195, 223);
}
.article h5:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 100%;
border-bottom: solid 3px rgb(119, 195, 223);
}

色だけ変えるだけでも雰囲気変わるよ。

目次を設定する

えっへへやっと目次設定したんですよ。

これで長文記事も読みやすくなった・・・かなあ。

定期的に確認したい乳幼児の救命処置(心肺蘇生法)
救急車と心肺蘇生はどちらを優先する?人工呼吸と心臓マッサージは?子供に万が一のことがあった時、きちんとした救命処置を行う自信はありますか? JRC蘇生ガイドライン2015(2016年最終版)を参考に、小児に対する心肺蘇生法をまとめました。

この記事とか超読みづらかったもんね。

 

目次のデザインはこんな感じ。
目次デザイン

実は大変気に入っている。笑

これのために記事書いたようなもんでござる。

 

これは、ワードプレスのプラグイン「Table of Contents Plus」を導入して、CSSでデザインをカスタマイズしました。

 

なのでまずはプラグインをインストールしてね。

「プラグイン」→「新規追加」で検索してもいいし

https://ja.wordpress.org/plugins/table-of-contents-plus/からダウンロードしてもいいよ。

プラグインを有効化したら「設定」→「TOC+」でざっくり設定します。

●「以下のコンテンツタイプを自動挿入」→「post」にチェック
●「上級者向け」設定の「CSS ファイルを除外」にチェック
●「上級者向け」設定の「見出しレベル」を「h2」「h3」にチェック

これだけ!

そしたらCSSに以下をコピペしてみてね。

/*TOC+*/
#toc_container {
display: block !important;
width: 80% !important;
box-sizing: border-box; /* スマホの横揺れ防止 */
margin: 36px auto; /* 外側の余白 */
padding: 1em 2em; /* 内側の余白 */
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
background: #FFFFF8;
border-top: solid 10px #f99abd;
border-radius: 10px;
color: #666; }

#toc_container .toc_title {
text-align: center;
margin-bottom: 35px;
margin-top: 0;
padding-top: 0;
padding-bottom: 5px;
font-size: 1em;
font-weight:bold;
border-bottom: 2px dashed #f99abd; }

#toc_container .toc_list {
list-style-type: none !important;
counter-reset: li; }

#toc_container .toc_list > li {
position: relative;
margin-bottom: 15px;
margin-left: 6px;
line-height: 1.3em;
font-size: 0.9em; }

#toc_container .toc_list > li a {
font-weight:bold;
text-decoration: none !important; }

#toc_container .toc_list > li a:hover {
text-decoration: underline !important; }

#toc_container .toc_list > li ul {
list-style-type: disc;
margin-top: 15px;
padding-left: 20px;
color: #f99abd; }

.toc_list ul li a {
font-size:14px;
font-weight:normal;
color:#888;
text-decoration:none;
}

#toc_container .toc_list > li > ul li {
font-size: 0.9em;
margin-bottom: 8px; }

@media only screen and (min-width: 641px) {
#toc_container {
padding: 25px 40px; }

#toc_container .toc_title {
font-size: 1em; }

#toc_container .toc_list > li {
margin-bottom: 18px;
margin-left: 12px;
font-size: 1em; }

#toc_container .toc_list > li:after {
left: -48px;
top: 0px;
font-size: 26px; } }

これでどうかしら!

うまくいったらおめでとうございます。

はてなブログでの目次のカスタマイズも後から追記したいなあ。

CSSコピペで1分!簡単ブログデザインカスタマイズまとめ

私がとりあえず我慢できずにやってしまった最低限のカスタマイズ3つお送りしました。

もしもチャレンジしてみてうまくいかなかったり、わからないことがあったらツイッターかコメントで聞いてくださいな!

 

コメント