【はてなブログ】ホームカードデザインCSS

記事執筆者

ぶっちゃけ、はてなブログで収益化はできます。

はてなブログのメリット3選

• 気軽に始められる
• はてなブログはアフィリエイトOK！
• 記事が書きやすい

上記のメリットは、かなりありがたいです。ぽて（執筆者）も「はてなブログ」を使っています。

今回は、はてなブログのデザインについて、解説していきます。

記事の流れ

はてなブログ設定

はてなブログのデザインをカスタマイズするには、CSSファイルをいじる必要があります。※デフォルトテンプレートを選択してください。

すること3ステップ

• デザインをクリック
  ↓
• デフォルトテンプレートであることを確認
  ↓
• デザインCSSを編集

デザインCSSを編集していきます。コピペでOKです。

ホームカードのデザインCSS

#main p{
font-weight:300!important;
font-family:sans-serif!important;
}
.entry-title{
font-weight:300!important;
font-family:sans-serif!important;
}
.pager{
background-color:#ddc29b!important;
border-radius:10px;
}
.pager a{
background-color:#ddc29b!important;
}
.id a{
text-decoration:none!important;
}
.report-abuse-link{
display:none!important;
}
.table-of-contents ul{
background-color:transparent!important;
padding:0.5em!important;
}
.table-of-contents li{
background-color:transparent!important;
padding:0!important;
margin:0!important;
}
#main ul{
padding:1em;
background-color:#efca471a;
}
#main li{
list-style:none;
padding:1em 1em 0 1em;
}
.table-of-contents ul{
list-style:none;
}
.table-of-contents > li a {
font-weight: bold;
color:#545550!important;
list-style:none;
display:block;
margin-top:10px;
margin-left: 10px;
}
.page-entry .hentry{
background-color:#f7f3ed!important;
}
.page-index .blog-controlls-subscribe{
display:block;
}
#blog-title a{
font-size:30px;
}
.page-index p{
display:none;
color:#333333;
font-weight:400;
font-family:sans-serif;
}
.page-index a{
color:#333333;
font-weight:400;
font-family:sans-serif;
}
.page-index .entry-title a{
padding:40px 40px 60px 40px;
margin:0;
display:block;
text-decoration:none;
font-weight:bold;
}
.page-index .date{
margin:10px 0 0 70px;
height:30px;
}
.page-index h1{
font-size:16px;
}
.page-index h2{
display:none;
}
.page-index #main .hatena-module-links{
display:none;
}
#box2 .hatena-module-links{
display:none;
}
#box2 .hatena-module-title{
color:#333333;
font-weight:400!important;
font-family:sans-serif!important;
}

.page-index h3{
display:none;
}
.page-index .entry-header{
margin:0;
}
.page-index .hentry:hover{
box-shadow:2px 2px 2px 1px #ddc29b;
}
.page-index .hentry{
border-radius:50px;
padding:0;
height:200px;
margin:0.2em;
box-shadow: 5px 5px 2px 1px #ddc29b;
}
.page-index .hentry:nth-child(1){
width:48%;
float:left;
overflow:hidden;
}
.page-index .hentry:nth-child(2){
width:48%;
float:right;
overflow:hidden;
}
.page-index .hentry:nth-child(3){
width:48%;
float:left;
overflow:hidden;
}
.page-index .hentry:nth-child(4){
width:48%;
float:right;
overflow:hidden;
}
.page-index .hentry:nth-child(5){
width:48%;
float:left;
overflow:hidden;
}
.page-index .hentry:nth-child(6){
width:48%;
float:right;
overflow:hidden;
}
.page-index .hentry:nth-child(7){
width:48%;
float:left;
overflow:hidden;
}
.page-index .hentry:nth-child(8){
width:48%;
float:right;
overflow:hidden;
}
.page-index .hentry:nth-child(9){
width:48%;
float:left;
overflow:hidden;
}
.page-index .hentry:nth-child(10){
width:48%;
float:right;
overflow:hidden;
}
.page-index h4{
display:none;
}
.page-index .entry-content ul{
display:none;
}
.page-index .entry-inner{
max-height:200px;
overflow:hidden;
}
.page-index .comment-box{
display:none;
}
.page-index .entry{
margin-top:1.5ex!important;
}
.autopagerize_insert_before{
max-height:0px;
}
.pager-next a{
margin-top:20px;
}
.table-of-contents{
padding-bottom:0!important;
padding-top:25px!important;
}

ホームカードのデザインのまとめ

ブログのデザインを見やすくすることで、アクセスアップにつながります。

スマホ表示のデザインを整えたい方は、下記記事をお読みください。

はてなブログ｜よくある質問 Q＆A

はてなブログ｜会社情報・運営情報

はてなブログ会社情報・運営情報

• サービス名：はてなブログ
• 運営会社：株式会社はてな
• 所在地：〒107-0062 東京都港区南青山6-5-55 青山サンライトビル3F
• 事業内容：インターネット関連事業
• 代表：栗栖義臣

2001年から運営されており、大手で安心できるサービスです。

無料ブログ稼ぎ方｜効率重視

はてなブログ｜完全効率重視

• 手順1　はてなブログ開設
• 手順2　ASPで宣伝する商品選択
• 手順3　サイト構成を意識して記事を執筆
• 手順4　内部リンクを徹底に整える

はてなブログで稼ぐロードマップです。

このページで解説した内容

この記事は以上です。