読者です 読者をやめる 読者になる 読者になる

ベーコンさんの世界ブログ

デザイナー&お菓子作ったり企画したりしています。北海道でふざけたブログ書いてます。

ベーコンブログのカスタマイズcssをおいておきます。

リクエストが有ったので、2017年4月17日の今の段階でカスタマイズしているHTMLとCSSを公開しておきます。
もともとコーディングをやっていたくせに、コードが整理されていない…
そうだ昔から細かいコーディングが苦手だったんだ…

細かいことは忘れてしまったので解読をお願いします。
だいたい、どこかのブログから頂いたコードです。

ちなみに使っているテーマはCONTENTです。
リンクはこちら
CONTENTS - テーマ ストア

レスポンシブでやっています。
※タイトル画像はヘッダの背景に入れています。

タイトル下

<div class="navi">
<div class="toggle"><a href="#">MENU</a>
  </div>
    <ul class="menu">
    <li><a href="http://www.baconjapan.com/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン/フォント</a></li>
    <li>
      <a href="http://www.baconjapan.com/archive/category/%E3%82%AE%E3%82%BF%E3%83%BC">音楽/ギター</a>
    </li>
    <li>
      <a href="http://www.baconjapan.com/archive/category/%E4%BB%95%E4%BA%8B">経営/フリーランス/確定申告</a>
    </li>              <li>
    <a href="http://www.baconjapan.com/archive/category/apple">Apple/Mac</a>
    </li>
    </li>              <li><a href="http://www.baconjapan.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6">ブログ</a>
    </li>
    <li>
    <a href="http://www.baconjapan.com/search?q=%E3%82%B0%E3%83%A9%E3%83%8E%E3%83%BC%E3%83%A9">自社グラノーラ屋</a>
    </li>
  <li class="close">
    <a href="#">close</a>
  </li>
  </ul>
</div>

<div id="recommend_box2">
<div class="recommend_title2">
HELLO!</div>
<p><a href="http://www.baconjapan.com/entry/2016/11/11/205313">初めてベーコンブログに来てくれた人に読んでほしい10記事です</a></p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".toggle").click(function(){
        $(this).next().slideToggle();
    });   
    $(".close").click(function(){
        $(this).parent().slideToggle();
            return false;
    });
 $(window).resize (function(){
    var win = $(window).width();
    var resp = 767;
    if(win > resp){
      $(".menu").show();
    } else {
      $(".menu").hide();
    }
  });
})(jQuery);
</script>

デザインCSS

/* <system section="theme" selected="6653812171397613909"> */
@import url("http://hatenablog.com/theme/6653812171397613909.css");
/* </system> */

.kaerebalink-link1 img, .booklink-link2 img{display:none;}


       
.navi {
       background-color:#000;
       }
.navi li :hover {
       background-color:#F4D823;    /*背景色を黄色に*/
       color:#000000;         /*文字色をネイビーに*/
}
.navi li{
  width:16%;
}
/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 767px) {
.navi li{
  width:100%;
}
}

#title a{ /*記事タイトル*/
   background: linear-gradient(transparent 100%, #000 100%); 
   /*マーカー*/
   color:#F4D823;   
}

.entry-content h3 {
background-color:#F4D823;
color:#000;
 }
.entry-content h2 {
background-color:#F4D823;
color:#000;
 }


.entry-content h3,
.entry-content h1,
.pager-next a:after,
.pager-prev a:after,
#footer,
#footer-inner,
#footer-inner,
#copyr,
.leave-comment-title{
  background: #F4D823;
  color:#000000;  
}
.entry-content h4 {
border-left:none; /*左にある線を消すよ*/
padding-left:40px; /*画像と文字の間隔を広げるよ*/
border-bottom:solid 5px #000;  
color:#000;
 }


#title a,
.point:before,
.column:before,
.attention:before,
#title a{
  color: #F4D823;
}

.entry-header .entry-title a,
.entry-header .entry-title a:visited{
    color: #000;
}

.kaerebalink-box,
.booklink-box,
.entry-content .hatena-asin-detail{
  border: 1px solid #F4D823;
}

.hatena-module-title{
  border-left:4px solid #000;
}

.point,
.column,
.attention,
.entry-content blockquote{
  border: 1px dashed #000; 
}

.entry-header .entry-title,
.page-archive .archive-entry-header .entry-title
{
  border-top: #000 1px solid;
  border-bottom: #000 1px solid;
}





/*カエレバカラー*/
.booklink-box .shoplinkkindle a {
    background: #365899;
}
.booklink-box .shoplinkamazon a {
    background: #DB6809;

}
.kaerebalink-link1 .shoplinkamazon a{
    background: #DB6809;
}


@media (max-width: 767px) {
.navi,
.toggle a
{
  background: #F4D823;
}

.close{
  background: #F4D823;
}
}

 */ここから*/

.toggle,.close{
  display: none;
}

@media only screen and (max-width: 767px) {
  .menu{
    display: none;
    width: 100%;
  }

  .menu a:hover{
    background: #ccc;
  }

  .toggle{
    display: block;
    position: relative;
    width: 100%;
  }
  
  .close{
  display: block;
  position: relative;
  width: 100%;
  background: #457B9D;
  }
  
  .toggle a{
    display: block;
    padding: 12px 0 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background:#1D3557;
  }
  
  .toggle:before{
    position: absolute;
    font-family: "blogicon";
    content: "\f003";
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color:#fff;
  }
}

/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
	position: relative;
	width: 80%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 20px;
	border-radius: 6px;
	border: 2px solid #999;
	box-shadow: 1px 1px 5px #aaa;
	background-color: #fff;
	z-index: 1;
}
.entry-content .l-fuki {
	margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
	margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
	position: absolute;
	content: "";
	top: 16px;
	width: 10px;
	height: 10px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	background-color: #fff;
	z-index: 2;
}
.entry-content .l-fuki::before {
	right: -7px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
	left: -7px;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
	position: absolute;
	content: "";
	width: 80px;
	height: 80px;
	top: -10px;
	border-radius: 40px;
	border: 3px solid #fff;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
	right: -110px;
}
.entry-content .r-fuki::after {
	left: -110px;
}
@media screen and (max-width: 620px) {
	.entry-content .l-fuki,
	.entry-content .r-fuki {
		width: 70%
	}
	.entry-content .l-fuki {
		margin-right: 30%;
	}
	.entry-content .r-fuki {
		margin-left: 30%;
	}
}
@media screen and (max-width: 478px) {
	.entry-content .l-fuki::after,
	.entry-content .r-fuki::after {
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}
	.entry-content .l-fuki::after {
		right: -84px;
	}
	.entry-content .r-fuki::after {
		left: -84px;
	}
}
.fuki_bbb01::after {background-image:url(https://cdn1.www.st-hatena.com/users/ro/rororororo/profile.gif?1452072111);}
.クラス名::after {background-image:url(画像のURL);}


/* マーカー */

strong {
  background: linear-gradient(transparent 100%, #FF847C 100%);
  background: -moz-linear-gradient(transparent 100%, #FF847C 100%); 
  background: -webkit-linear-gradient(transparent 100%, #FF847C 100%);
  background: -ms-linear-gradient(transparent 100%, #FF847C 100%); 
  background: -o-linear-gradient(transparent 100%, #FF847C 100%); 
  font-weight: bold;
}

.markb {
  background: linear-gradient(transparent 30%, #efe387 30%);
  background: -moz-linear-gradient(transparent 30%, #efe387 30%);      /* Firefox用 */
  background: -webkit-linear-gradient(transparent 30%, #efe387 30%);   /* Safari用 */
  background: -ms-linear-gradient(transparent 30%, #efe387 30%);       /* IE用 */
  background: -o-linear-gradient(transparent 30%, #efe387 30%);        /* Opera用 */
  text-decoration: none;
}


/* 赤アイコン */

.cat {
    background-color: #D12633;
    color: #FFFFFF;
    font-size: 12px;
    margin-right: 5px;
    padding: 2px;
    border: 0px solid;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
/* 囲み */


.point,.column,.attention{
  position: relative;
  background-color: #FFF; 
}

.entry-content blockquote {
  border-style: none;
  margin: 16px;
  padding: 20px;
  background: #F4F4F4;
}

#recommend_box {
    position: relative;
    border: 1px solid #CCCCCC;
    padding: 25px 30px 20px 30px;
}

.recommend_title {
    position: absolute;
    top: -15px;
    left: 20px;
    font-weight: bold;
    font-size: 1.2em;
    background: #FFFFFF;
    padding: 0 8px;
}
.recommend_title:before {
    display: inline-block;
    margin-right: 7px;
}


#recommend_box2 {
    position: relative;
    border: 1px solid #CCCCCC;
    padding: 25px 30px 10px 30px;
    margin-top: 40px;
}
.recommend_title2 {
    position: absolute;
    top: -15px;
    left: 20px;
    font-weight: bold;
    font-size: 1em;
    background: #FFFFFF;
    padding: 0 8px;
}
.recommend_title2:before {
    display: inline-block;
    margin-right: 7px;
}


#recommend_box_sita {
    position: relative;
    border: 2px solid #000;
    padding: 20px 20px 10px 20px;
    margin-top: 20px;
}
#recommend_box_sita li {
	list-style-type: none;
}
#recommend_box_sita li a {
	color: #024EB4;
	font-weight: bold;
}


.recommend_title_sita {
    position: absolute;
    top: -15px;
    left: 20px;
    font-weight: bold;
    font-size: 1em;
    background: #FFFFFF;
    padding: 0 8px;
}
.recommend_title_sita:before {
    display: inline-block;
    margin-right: 7px;
}


.breadcrumb {
    font-size: 70%;
}
#top-box {
    margin: 10px auto 0px;
}
#top-box .breadcrumb {
    border: none;
    padding: 0px;
}

/* メニュー閉じる */


.toggle,.close{
  display: none;
}

@media only screen and (max-width: 767px) {
  .menu{
    display: none;
    width: 100%;
  }

  .menu a:hover{
    background: #ccc;
  }

  .toggle{
    display: block;
    position: relative;
    width: 100%;
  }
  
  .close{
  display: block;
  position: relative;
  width: 100%;
  background: #457B9D;
  }
  
  .toggle a{
    display: block;
    padding: 12px 0 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background:#1D3557;
  }
  
  .toggle:before{
    position: absolute;
    font-family: "blogicon";
    content: "\f003";
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color:#fff;
  }
}

.atodeyomu {
  position:absolute;
  right: 5px;
  bottom: 5px;
  font-weight: bold;
  text-decoration: none;
}


.entry-content img.hatena-fotolife {
  border: 0px;
}

.entry-content .emphasize-link {
  position: relative;
  margin: 36px 0 16px;
  padding: 16px 10px;
  border: 2px solid #ee7917;
  background-color: #fffbf5;
}
.entry-content .emphasize-link p:last-child {
  margin-bottom: 0;
}
.entry-content .emphasize-link::before {
  position: absolute;
  bottom: 100%;
  left: -2px;
  padding: 2px 6px;
  content: "Check!!";
  background-color: #ee7917;
  color: #fff;
  font-weight: bold;
}


#appreach-box {
    border-radius: 5px;
    border: double #ececec;
    margin-bottom: 20px;
}
#appreach-box br{
display: none;
 } 
 #appreach-box {
    border-radius: 4px;
    border: solid 1px #e4e4e4;
    margin-bottom: 10px;
    padding-top:10px;
}
#appreach-image{
    width:110px !important;
}
#appreach-appname{
    font-weight:bold;
}
.appreach-links{
    margin-top: 15px;
}

フッター


<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com -->
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
<style>
div #breadcrumb div {
    display: inline;
    font-size: 13px;
}
</style>
<div id="breadcrumb" class='notHierarchy'></div>
String peace = "azatoi";