天宮です。
Bloggerカスタマイズについては
一段落としますので、
最後に、これまで編集してきたCSSを
まとめて紹介しておきます。
編集ポイントにはコメント記載してるから
「Vaster2」テンプレートと比べてみたら
どのあたりを変更したらよいのか分かると思います。
「Vaster2」デモ用CSSまとめ
body{
font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
background-color: #fff; /* 全体の背景色 */
margin: 0;
font-size: 16px; /* 全体のデフォルト文字サイズ */
line-height: 1.6em; /* 全体のデフォルト行間サイズ */
}
img, video, object{
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
}
a{
text-decoration: none;
}
.section{
margin: initial;
}
.widget{
margin: initial;
}
/* 記事部分とサイドバー */
.content-wrapper{
width: 1040px; /* 記事部分 サイドバーの横幅 */
margin-right: auto;
margin-left: auto;
padding-top: 20px;
}
iframe{
max-width: 100%;
}
/*SNSボタンのカスタマイズ*/
.sns{
margin: 10px auto;
text-align: center;
width: 100%;
}
.sns ul{
list-style: none !important;
padding: initial !important;
}
.sns li{
float: left;
width:13%;
height:42px;
margin: 20px 3px;
list-style: none !important;
}
.sns li span,.sns .fa{
font-size: 20px !important;
}
.sns li a{
font-size: 13px;
position: relative;
display: block;
padding: 8px;
transition: 0.3s;
font-weight: 700;
border-radius: 6px;
text-align: center;
text-decoration: none;
}
/* ツイッター */
.twitter a{
color: #00acee;
background-color: #fff;
border: 2px solid #00acee;
}
.twitter a:hover{
background-color: #00acee;
color: #fff;
}
/* Facebook */
.facebook a{
background-color: #fff;
color: #3b5998;
border: 2px solid #3b5998;
}
.facebook a:hover{
background-color: #3b5998;
color:#fff;
}
/* グーグル */
.google1 a{
background-color: #fff;
color: #db4a39;
border: 2px solid #db4a39;
}
.google1 a:hover{
background-color: #db4a39;
color: #fff;
}
/* はてぶ */
.hatebu a{
background-color: #fff;
color: #5d8ac1;
border: 2px solid #5d8ac1;
}
.hatebu a:hover{
background-color: #5d8ac1;
color: #fff;
}
.fa-hatena:before{
content: "B!";
font-family: Verdana;
font-weight: bold;
}
/* feedly */
.feedly a{
background-color: #fff;
color: #87c040;
border: 2px solid #87c040;
}
.feedly a:hover{
background-color: #87c040;
color: #fff;
}
/* Pocket */
.pocket a{
background-color: #fff;
color: #f03e51;
border: 2px solid #f03e51;
}
.pocket a:hover{
background-color: #f03e51;
color: #fff;
}
/* LINE */
.line a{
background:#fff;
color:#00c300;
border:2px solid #00c300;
}
.line a:hover{
background:#00c300;
color:#fff;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
/* シェアボタン見出し */
.share-title{
padding: .5em .75em;
margin-bottom: 30px;
background-color: #D01857;
border-left: none;
color: #fff;
}
@media only screen and (max-width: 780px) {
.sns li{
width:30%; /* シェアボタンスマホ表示の幅調整 */
}
}
/* 記事ページ内のテキストリンク
------------------------------------- */
.post a{
text-decoration: none;
color: #3366cc;
}
.post a:hover{
text-decoration: underline;
color: #3366cc;
}
.post a:visited{
color: #3366cc;
}
/* 引用
------------------------------------- */
blockquote{
padding: 10px 30px;
margin: 10px 0 20px 0;
border: 1px solid #c8c8c8;
overflow-wrap: break-word;
}
/* 記事のフォント
------------------------------------- */
/* 記事タイトル */
.main-outer h1{
font-size: 24px;
line-height: 1.6em;
margin-bottom: 30px;
}
/* 記事見出し */
.entry-content h2{
padding: .5em .75em;
margin-bottom: 30px;
background-color: #D01857;
color: #fff;
}
/* 記事小見出し */
.entry-content h3{
font-size: 20px;
padding: 15px 0 15px 10px;
border-top: 1px solid #D01857;
border-bottom: 1px solid #D01857;
border-left: none;
color: #333;
}
/* 記事準見出し */
.entry-content h4{
font-size: 20px;
padding: 12px 0 12px 10px;
background-color: #f4f4f4;
border-left: solid 5px #D01857;
border-bottom: solid 3px #d7d7d7;
color: #333;
}
/* 記事本文 */
.main-outer p{
font-size: 16px;
line-height: 1.6em;
padding-bottom: 24px;
}
/* ヘッダー
------------------------------------- */
.Header{
width: 100%;
background-color: #fff;
}
/* ヘッダー画像が入る枠 */
#header-inner{
width: 100% !important;
background-size: cover !important;
background-position: center !important;
margin: 0 auto;
}
.Header p{
margin: 0;
}
.PageList{
width: 100%;
background-color: #D01857; /* ヘッダーナビベース部の色変更 */
}
.grobal-navi{
width: 1040px;
margin: 0 auto;
}
/* ブログタイトル
------------------------------------- */
.titlewrapper{
padding: 25px 10% 0 10%; /* ブログタイトル文字位置変更 */
}
.header h1{
margin-top: 0;
margin-bottom: 0;
}
.header-title a{
font-size: 40px !important;
font-weight: 700;
text-decoration: none;
color: #000;
}
.header-title a:hover{
text-decoration: none;
}
.header-title a:visited{
color:#000;
}
/* ヘッダー画像を挿入した場合のタイトル文字 */
#header .title a{
font-size: 36px !important;
font-weight: 700;
text-decoration: none;
color: #000;
}
#header .title a:hover{
text-decoration: none;
}
#header .title a:visited{
color: #000;
}
/* ブログタイトル下の説明文 */
.header-description p{
font-size: 13px;
margin-top: 5px;
padding: 0 10%;
}
/* ヘッダーナビゲーション
------------------------------------- */
.header-nav{
padding: 0 !important;
}
.header-nav li{
float: left;
list-style: none;
font-size: 14px;
padding: 0;
}
.header-nav a{
padding: 10px 20px;
font-size: 14px;
color: #fff;
background-color: #D01857; /* ヘッダーナビの背景色 */
text-decoration: none;
display: block;
transition: 0.3s;
}
.header-nav a:hover{
background-color: #A61345; /* ヘッダーナビのオンマウス背景色 */
color: #fff;
text-decoration: none;
}
div#Navbar1{
display: none;
}
/* 記事ページ
------------------------------------- */
.main-outer{
float: left;
width: 710px;
background-color: #fff;
box-sizing: border-box;
}
.date-outer{
border-right: 1px solid #e4e4e4;
padding-right: 40px;
}
#main{
margin: 0;
}
.post-outer img{
max-width: 100%; /* 記事内の画像をはみ出させない */
height: auto;
}
/* 記事ページ内のリスト表示タグのデザイン */
.post-outer ul{
list-style-type: disc;
padding: 20px;
margin-bottom: 30px !important;
}
.post-outer ol{
list-style-type: decimal;
padding: 20px;
margin-bottom: 30px !important;
}
/* 記事ページの公開日 カテゴリ名 */
p.kousin{
font-size: 14px;
display: inline-block;
color: #696969;
padding-bottom: 3px !important;
}
p.kousin a{
color: #696969;
}
/* トップページ、カテゴリ、アーカイブの記事一覧
------------------------------------- */
.article-list-link{
text-decoration: none !important;
}
.article-list-link:hover{
text-decoration: none !important;
}
.article-list{
padding-bottom: 30px;
padding-top: 10px;
border-bottom: 1px dashed #666;
float: none;
transition: 0.3s;
}
.article-list:hover{
background-color: #f9f9f9; /* トップページの記事アーカイブ背景色オンマウス */
}
.article-list img{
float: left;
width: 300px;
height: 185px;
padding-right: 20px;
object-fit: cover;
}
/* 記事一覧のタイトル */
.article-list-title{
overflow: hidden;
}
.article-list-title h2{
color: #666;
font-size: 21px; /* トップページの記事アーカイブタイトル文字サイズ */
}
article-list-link{
color: #000;
}
.article-list-link:hover{
text-decoration: none;
}
/*記事一覧の公開日、カテゴリ名 */
.snippet{
font-size: 14px;
padding: 0 !important;
color: #888;
margin-top: 15px !important;
margin-bottom: 5px;
line-height: 1.4em !important;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.post-timestamp{
font-size: 14px !important;
margin-left: initial;
opacity: 0.7;
color: #888;
padding-bottom: 2px !important;
margin-right: 15px !important;
display: inline-block;
margin-top: 0;
}
.post-tag{
font-size: 14px !important;
background-color: #FBC92D; /* カテゴリーリストタグの色 */
padding: 1px 4px !important;
color: #fff;
margin-top: 0;
display: inline-block;
}
/* パンくずリスト
------------------------------------- */
.breadcrumb-wrapper{
margin: 30px 0 15px;
}
.breadcrumb{
padding:0 !important;
}
.breadcrumb a{
color: #666;
font-size: 13px;
text-decoration: none;
}
.breadcrumb li{
display: inline;
list-style-type: none;
}
.breadcrumb li:after{
content: " > ";
}
/* 関連記事
------------------------------------- */
#related-posts{
width: auto;
}
#related-posts a{
color: #666;
transition: 0.3s;
}
#related-posts a:hover{
color: #fff;
background-color: #D01857; /* 関連記事オンマウスの背景色 */
}
#related-posts h2{
padding: .5em .75em;
margin-bottom: 30px;
background-color: #D01857; /* 関連記事の見出しの色 */
color: #fff;
}
#related-posts .related_img{
margin: 5px;
width: 150px;
height: 100px;
transition: all 300ms ease-in-out;
object-fit: cover;
}
#related-title{
font-size: 12px;
width: 140px;
height: 70px;
font-weight: 700;
margin-right: 5px;
margin-left: 5px;
box-sizing: border-box;
}
#related-posts .related_img:hover{
filter: alpha(opacity=70);
}
p.st-post-footer-buttons{
display: none;
}
/* ページナビゲーション
------------------------------------- */
#blog-pager a{
font-size: 14px;
padding: 16px 8px;
width: 130px;
box-sizing: border-box;
color: #666;
background-color: #fff;
border: 1px solid #dedede;
margin: 3px 6px;
display: inline-block;
transition: 0.3s;
}
#blog-pager a:hover{
text-decoration: none;
color: #fff;
background-color: #D01857; /* 次（前）ページボタン背景色 */
}
#blog-pager .pages{
border: none;
}
/* サイドバー
------------------------------------- */
.sidebar{
width: 330px;
max-width: 100%;
float: left;
padding-left: 40px;
box-sizing: border-box;
}
/* サイドバー見出し */
.sidebar h2,h3,h4{
padding: 5px 0 5px 10px;
font-size: 18px;
font-weight: 700;
border-left: 5px solid #D01857;
border-bottom: 1px solid #bcbcbc;
margin-bottom: 20px;
margin-top: 30px;
}
/* プロフィール */
.profile-datablock a{
color: #666; /* 名前の文字色 */
}
.profile-datablock a:hover{
color: #ccc; /* 名前の文字色オンマウス */
}
.profile-link{
color: #666; /* 自己紹介文の色 */
font-size: 14px;
}
/* 人気記事
------------------------------------- */
.popular-post ul li a{
font-size: 15px;
color: #666;
font-weight: 700;
}
.popular-post ul li a:hover{
color: #cdcdcd;
}
.popular-post ul li{
margin: 5px 0;
list-style-type: none;
}
.popular-post ul{
padding: 0;
}
.item-thumbnail{
float: left;
margin: 0 10px 10px 0;
}
.item-thumbnail a:hover{
opacity: 0.7;
}
.item-snippet p{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 13px;
line-height: 1.4em;
margin: 0;
}
.item-content{
margin: 5px;
}
/* 月別アーカイブ
------------------------------------- */
.archive-list ul{
padding: 0 0 20px 10px;
list-style-type: none;
line-height: 1.5em;
}
.archive-list ul a{
color: #D01857; /* サイドバーアーカイブ文字色 */
}
.archive-list ul li{
padding-bottom: 7px;
}
/* サイドバーカテゴリーラベル
------------------------------------- */
.list-label-widget-content ul li a{
font-size: 13px;
color: #666;
transition: 0.4s; /* 徐々に変化させる */
padding: 6px 10px;
border: 1px solid #e4e4e4;
border-radius: 2px;
}
.list-label-widget-content ul li a:hover{
color: #fff;
background-color: #FBC92D; /* ラベルタグのオンマウス背景色 */
text-decoration: none;
}
.list-label-widget-content ul{
list-style-type: none;
padding: 0;
line-height: initial;
}
.list-label-widget-content ul li{
margin: 5px 2px;
display: inline-block;
}
/* フッター
------------------------------------- */
.footer-outer{
color: #999;
width: 100%;
clear: both;
font-size: 14px;
padding: 40px 0 30px;
}
.footer-outer a{
color: #999;
}
.footer-outer a:hover{
text-decoration: none;
}
/* TOPスクロール */
.pagetop{
display: none;
position: fixed;
bottom: 35px;
right: 18px;
}
.pagetop a{
display: block;
text-align: center;
color: #666;
font-size: 40px;
text-decoration: none;
padding: 0;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/* メニューを開くボタン */
.button-toggle{
display: none;
}
@media screen and (max-width: 768px){ /* メニューボタンレスポンシブ */
.button-toggle{
display: block !important;
width: 90%;
box-sizing: border-box;
color: #fff;
padding: 8px 10px;
margin: 10px auto;
background-color: #D01857; /* メニューを開くボタン背景色 */
border:2px solid #fff;
}
}
/* ----------------- レスポンシブデザイン ------------------------------------- */
@media screen and (max-width: 768px){
#header .title a{
font-size: 20px !important; /* ブログタイトル文字サイズ */
}
.titlewrapper{
padding: 0 10px;
text-align: center; /* ブログタイトル文字を中央寄せ */
}
.header-description p{
padding:0 10px;
text-align: center; /* ブログ説明の文字を中央寄せ */
}
.content-wrapper{
width: auto;
margin: 0 auto;
padding-top: 5px;
}
.post-timestamp{
margin: 0 !important;
font-size: 12px !important;
line-height: initial !important;
opacity:1;
}
.post-tag{
font-size: 12px !important;
padding: 1px 4px !important;
line-height: initial !important;
}
#header-inner{ /* ブログヘッダーに画像挿入時に編集 */
width: 95%;
margin: 0 auto;
padding: 20px 0 50px 0;
min-height: 100% !important;
}
nav{
max-width: auto !important;
height: auto;
margin: 0 auto;
display: block;
}
.header-nav{
width: auto;
height: auto;
margin: 0 auto;
background-color: #f9f9f9;
}
.header-nav li{
float: none;
}
.PageList{
background-color: transparent;
}
.header-nav a{
padding: 20px 20px;
font-size: 16px;
}
.main-outer{
width: 100%;
padding: 0 !important;
float: none;
margin-left: auto;
margin-right: auto;
}
.post-body{
padding: 0 15px;
width: 100%;
box-sizing: border-box;
}
.date-outer{
border-right: none !important;
padding-right: 0 !important;
}
.grobal-navi{
width: auto;
}
.article-list-link{
text-decoration: none !important;
}
.article-list-link:hover{
text-decoration: none !important;
}
.article-list{
padding: 15px 5px 10px 10px !important;
}
.article-thumbnail img{
width: 100px !important;
height: 70px !important;
}
.article-thumbnail{
text-align: center;
}
.post-box{
text-align: center;
}
.article-list{
width: auto;
float: none;
}
.article-list-title h2{
font-size: 16px;
line-height: 1.4em;
}
.snippet{
display: none;
}
#related-posts{
width: 98%;
margin-left: auto;
margin-right: auto;
}
#related-posts .related_img{
width: 140px;
box-sizing: border-box;
height: 100px;
}
img{
max-width: 95%;
height: auto;
}
.sidebar{
width: 90%;
float: none;
padding-left: initial;
margin-left: auto;
margin-right: auto;
}
.item-snippet{
display: none;
}
.archive-list ul li{
padding-bottom: 10px;
}
.footer-outer{
width: auto;
margin: 0;
bottom: 0;
}
}
ここまで2週間にわたり
Bloggerのカスタマイズを紹介してきました。
はたして、実際にカスタマイズして
Bloggerでブログ書く人いるのか…
おそらく、ほとんどいません（笑）
コピペでカスタマイズできるように
丁寧に解説したとしても…です。
ほとんどの人が行動しないからこそ
行動することの価値が高まる。
これはブログに関わらず、
何に対しても共通ですね。
Bloggerを使うことが良いというより
この程度のHTML/CSSが理解できると
なにかと便利になりますよ、ってこと。
ワードプレスのデザインだって
簡単にいじれるようになりますよね。
ブログの情報発信を収益化したくないなら
わざわざこんなの学ぶ必要ないけど、
今からブログはじめたいんですけど～
と尋ねられたら、
ワードプレスが良いと思うよ、
それがムズカシイならBloggerで
こう答えると思います。
私は、WEBに残す価値のないモノは
書きたくないと思っていて、
その価値をはかる指標の一つが
収益化だと考えています。
もちろん、感謝の声なども
大切な価値であるのは当然のことですよ。
アナタも、せっかく情報発信するなら、
少しでもいいから収益化を狙って欲しいな
そう願っています。
いつまでたっても
承認欲求を満たすためだけの情報発信じゃ
オモシロクないと思うし（笑）
アナタがやってる情報発信は楽しいですか？
自信をもってYESと言えるなら良いことですね（笑）
承認欲求を満たすためだけの情報発信じゃ
オモシロクないと思うし（笑）
アナタがやってる情報発信は楽しいですか？
自信をもってYESと言えるなら良いことですね（笑）
