ブログ運営

ベーコンブログのカスタマイズ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="https://www.baconjapan.com/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">デザイン/フォント</a></li>
<li>
<a href="https://www.baconjapan.com/archive/category/%E3%82%AE%E3%82%BF%E3%83%BC">音楽/ギター</a>
</li>
<li>
<a href="https://www.baconjapan.com/archive/category/%E4%BB%95%E4%BA%8B">経営/フリーランス/確定申告</a>
</li>              <li>
<a href="https://www.baconjapan.com/archive/category/apple">Apple/Mac</a>
</li>
</li>              <li><a href="https://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="https://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="https://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";
ABOUT ME
アバター
ベーコン
フリーデザイナー・ブロガーです。 /発想力系デザイナーなのでグラノーラ屋も始めました(4年目)/フリーランスで生き抜く方法を発信中。フリーランサー、ブロガー、「デザインを始めたい人」に向けてブログを書いています。/10万PV/2019年2月SBクリエイティブよりデザイン解説本出すよ ▼自己紹介記事はこちら ベーコンってどんな人? ▼最初に読んでほしい厳選記事! 初めてベーコンブログと言えばこの記事【ジャンル別の人気記事】 >>広告・レビュー依頼はこちら
人気記事

▼上質なもので生活が豊かになりました
>>3年間で本当に買ってよかったもの55選

▼強みを知ると少し仕事が楽になりました
>>無料で自分の強みを診断する方法

▼デザインがうまくなる本を厳選しました
>>おすすめデザイン本17選

▼妻がリコマースの感想を書いてくれました
ネットで本とDVDを売ったらブックオフより楽で金額もよかった