【Cocoon】サイト基本レイアウトデザインcss

記事執筆者

ぽてサポートのメリット

• CSSを知らなくてOK！
• SEO対策済みです
• サイトスピードまでサポート
• ブログイラスト入手方法付き
• SEO対策完全ロードマップ付き
• Lineで一人一人サポートしていきます

無料版デザインに含まれていないもの

• 文字サイズ・文字色・文字間
• 一部css
• 配色ごとの心理効果マニュアル
• ブログ相談、Lineサポート

今回は、サイトレイアウトをCSSでデザインします。

この記事の流れ

Cocoon設定｜サイト基本レイアウト

1：wordpressから　Cocoon設定　→　スキン　をクリックします。

2：スキン　「なし」をクリックします。

サイトレイアウトCSS

すること

• テーマファイルをクリック
• CSSをコピペ

1：外観　→テーマファイルエディター　をクリック

2：テーマファイルエディターにCSSをコピペします。

注意

• できればバックアップすること
• CocoonChildのstyle.cssにコピペすること

/**************
サイトレイアウト******
****************************/
@media screen and (max-width : 767px){
html,
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
@media screen and (max-width : 1023px){
	.logo{
		display:none;
	}
	.pagination-next-link{
		width:85%;
		margin:0 auto;
	}
}
@media screen and (min-width : 1023px){
	.entry-content{
padding:20px;
}
	#main{
		padding:0 20px 20px 20px;
	}
}
.hentry .toc{
      width:80%;
	}
p{
   color:#333333;
	font-weight:400;
}
.pote-pr{
	text-align:right;
	font-size:10px;
	margin:0px;
	padding:0px;
}
.eye-catch-wrap{
	justify-content:center;
}
#navi-menu-content{
	background: rgba(253,253,253,0.93);
}
.article li a{
	font-weight:bold;
	text-decoration:none;
}
.article p a{
	font-weight:bold;
	text-decoration:none;
}
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

.site-name-text {
  font-family: 'Caveat', cursive;
font-family:HanziPen SC;
}
/*  基礎作成*/
hentry
#breadcrumb{
	max-width:780px;
}
.fa-angle-down::before{
	color:#d1d1d1;
}
.hentry .author-box{
	border-radius:20px;
}
.hentry .author-content{
margin:0;
}
.hentry .author-thumb{
	width:100%;
}
.hentry .author-thumb img{
	border-radius:70px;
}
.hentry .author-name{
	text-align:center;
}
.hentry{
	padding:20px;
	background-color:#ffffff;
	max-width:780px;
}
img{
	box-shadow:0 2px 5px 0 rgba(75,75,75);
}
/* サイトレイアウト */
#content-in{
	max-width:1205px;
	margin:0 auto;
}
#main{
	max-width:820px;
	margin:0 auto;
	background-color:transparent;
}
#list{
	max-width:778px;
}
.entry-content{
	max-width:740px;
}
#custom_html-12{
	margin-bottom:0px;
}
/* サイトレイアウト */
.toc li{
	list-style:none;
}
.home .main{
	background-color:transparent;
}
.sidebar{
	background-color:transparent;
	padding:0px 19px 19px 19px;
}
#categories-3 h3{
	background-color:#ffffff;
}
#categories-3 a{
	color:#7b7b7b;
}
#categories-3{
	padding:15px;
	background-color:#ffffff;
}
#tag_cloud-2 h3{
	background-color:#ffffff;
}
#tag_cloud-2 a{
	color:#7b7b7b;
}
#tag_cloud-2{
	padding:15px;
	background-color:#ffffff;
}
#toc-4 h3{
	background-color:#ffffff;
}
#toc a{
	color:#7b7b7b;
}
#toc-4{
	padding:15px;
	background-color:#ffffff;
}
.footer-right #categories-4{
	margin-bottom:50px;
}
.footer-right #tag_cloud-3{
	margin-bottom:50px;
}

以上でサイトレイアウトのデザインは完了です。

サイトレイアウト｜まとめ

テーマファイルエディターをいじるので、重要なコードを消さないように気をつけてください。

cocoonのスキンは、なしにしてください。

この記事は以上です。

他の場所のCSSも下記記事にまとめています。

アフィリエイト作成〜収益化｜よくある質問 Q＆A

おすすめサーバーロリポップ｜会社情報・運営情報

ロリポップ会社情報・運営情報

• サービス名：ロリポップ（LOLIPOP)
• 運営会社：GMOペパボ株式会社
• 所在地：〒150-8512   東京都渋谷区桜丘町26番1号セルリアンタワー
• サービス内容：フリーランス向け金融支援サービス
• 代表：佐藤 健太郎

2003年から運営されており、大手で安心できますし、サーバーのスピードもトップクラスです。

アフィリエイト稼ぎ方｜効率重視

アフィリエイトサイト｜完全効率重視

• 手順1　wordpressを導入
• 手順2　ASPにて自分が宣伝しやすい商品を選択
• 手順3　商品が決まったら、サイトの構成を考える
• 手順4　記事内容を充実させて検索順位をあげる

ブログのロードマップを作成しました。ぜひ参考にしてください。

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

この記事は以上です。