【CSS, HTML】このブログをカスタマイズするために使った全てのコード

f:id:k-nyaka:20180911214504j:plain

どうも、ニートのにゃかです。

今回はこのブログのデザインに使用しているコードをメモの意味も含めて書いていきます。

このブログは、はてなブログのテーマ「Minimalist」を使っています。

基本的には指定した場所へのコードのコピペでカスタマイズできるはずですが、もしかしたらほかのテーマを使っている方はうまく表示されないコードがあるかもしれません。

大量にありますので、目次から興味のあるところに飛んでもらえると探しやすいかと思います。

タイトル下
- タイトル画像のサイズ調整
- グローバルメニュー
サイドバー
- プロフィール
- フォローボタン
デザインCSS
headに要素を追加
- 太字部分を蛍光ペンで強調
参考にさせてもらったサイト
おわりに

タイトル下

タイトル画像のサイズ調整

このコードを使うことで、デフォルトで指定されたサイズ以外の画像をタイトル画にすることができます。

画像のサイズに合わせて【】内の数値を調整してください。

 .header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:【画像サイズに合わせて数字を入力】px;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#FFFFFF;
}
.headernew{
margin:0px!important;
}

グローバルメニュー

カテゴリの名前部分に使用するアイコンは下のリンクから好きなものを選び、アイコンのクラス名の部分にコピペしてください。

shirokai.hatenablog.com

<nav id="gnav">
	<div class="gnav-inner" id="menu-scroll">
		<div class="menu"><a href="【ブログURL】"><i class="blogicon-home" aria-hidden="true"></i> HOME</a></div>
    <div class="menu"><a href="【カテゴリ①URL】"><i class="【アイコンのクラス名①】" aria-hidden="true"></i> 【カテゴリ①名前】</a></div>
    <div class="menu"><a href="【カテゴリ②URL】"><i class="【アイコンのクラス名②】" aria-hidden="true"></i> 【カテゴリ②名前】</a></div>
    <div class="menu"><a href="【カテゴリ③URL】"><i class="【アイコンのクラス名③】" aria-hidden="true"></i> 【カテゴリ③名前】</a></div>
    <div class="menu"><a href="【カテゴリ④URL】"><i class="【アイコンのクラス名④】" aria-hidden="true"></i> 【カテゴリ④名前】</a></div>
    <div class="menu"><a href="【カテゴリ⑤URL】"><i class="【アイコンのクラス名⑤】" aria-hidden="true"></i> 【カテゴリ⑤】</a></div>
    
	</div>
</nav>

サイドバー

モジュールを追加をクリックし、HTMLを選ぶとコードを貼れるのでそこに以下のコードを貼り付けます。

タイトル部分にはプロフィール、フォローボタンとそれぞれ入力してください。

こちらも【】の部分はそれぞれ入力してください。

プロフィール

<center><a href="【アバウトページのURL】" target="blank"><b>【ユーザー名】</b>（id:【ID】）</a></center>
<div class="profile-circle">
<a href="【アバウトページのURL】" target="blank"><div class="outside">about</div></a>
</div>

 

<div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box">
<a href="#" class="hatena-follow-button js-hatena-follow-button">
<span class="subscribing">
<span class="foreground">読者です</span>
<span class="background">読者をやめる</span>
</span>
<span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once>
<span class="foreground">読者になる</span>
<span class="background">読者になる</span>
</span>
</a>
<div class="subscription-count-box js-subscription-count-box">
<i></i>
<u></u>
<span class="subscription-count js-subscription-count">
</span>
</div>
</div>


<div class="profile-description">
<p>【自己紹介文】
</p>
</div>

フォローボタン

<div class="follow-btn" style="text-align:center">
<p style="font-size:80%">フォローする</p>
<div class="buttons">

<!--URLは変更してください-->
<!--はてなボタン-->
<a class="hatena" href="【ブログURL】/subscribe"><i class="blogicon-hatenablog lg"></i></a>
<!--Twitterボタン-->
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=【Twitterユーザー名※@なし】" target="_blank"><i class="blogicon-twitter lg"></i></a>
<!--Feedlyボタン-->
<a class="feedly" href="http://feedly.com/i/subscription/feed/【ブログURL】/feed" target="_blank"><i class="blogicon-rss lg"></i></a>
<!--URLは変更してください-->
</div>
</div>
<style>
/**共通デザイン**/
.buttons a{
display:inline-block;
width:90px;
padding:10px 0 8px 0;
transition: all 0.4s;
text-align:center;
text-decoration:none;
}
.buttons a:hover{
transform: scale(1.1)
}
.buttons i{
color:white;
}
/**はてな読者登録の色**/
.hatena{
background-color:white;
border:1px solid black;
}
.hatena i{
color:black
}
/**twitterの色**/
.twitter{
background-color:#55acee;
}
/**feedlyの色**/
.feedly{
background-color:#6cc655;
}
</style>

デザインCSS

行間

このコードを使うことで、広すぎる行間を調整することが出来ます。

.entry-content p { margin:0}

見出し

.entry-content h1 {
padding: 4px 10px;
color: #111;
border-top: 2px solid #2d70a4;
border-bottom: 2px solid #2d70a4;
}
.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
}

h4 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}

h4:before{ font-family: FontAwesome;
content: "\f00c";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
color: #5ab9ff; /*アイコン色*/
}

カード型レイアウト

.page-index .archive-entries{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.page-index .archive-entry{
background :#f9f9f9;
width: 47%;
padding-top:210px;
padding-left:7px;
padding-right:7px;
padding-bottom:10px;
position: relative;
}
.page-index .entry-title{
padding : 5px 0px 0px 5px;
}
.page-index .entry-description{
display : none;
}
.page-index .entry-thumb{
display: none;
}
.page-index .entry-thumb-link{
display: block;
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
.page-index .date{
padding-top:10px;
padding-left:10px;
}
.page-index .archive-entries .categories {
position :absolute;
top:0;
left:0;
z-index:1;
}
.star-container {
display : none;
}

プロフィール

このコードを入力することで、プロフィール部分の形と動きを変えられます。

.profile-circle {
display: block;
position: relative;
width: 180px;
height: 180px;
border: solid 1px #ccc; /* 枠がいらない人はこの行を消す */
cursor: pointer;
background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/k/k-nyaka/20180829/20180829225937.jpg);
background-size: 101%;
background-position: top left;
border-radius: 100%;
margin: 10px auto;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.profile-circle:hover {
background-size: 115%;
border:1px solid #ccc; /* 枠がいらない人はこの行を消す */
}
.profile-circle:hover .outside {
color: #222222; /* カーソルが重なった時の文字の色 */
-webkit-transform: rotate(-45deg) translate(0px) rotate(-315deg);
transform: rotate(-45deg) translate(0px) rotate(-315deg);
background: rgba(255, 255, 255, 0.5); /* 重なった円の色と透過度 */
width: 180px;
letter-spacing: 10px;
padding-left: 10px;
line-height: 180px;
height: 180px;
margin-top: -70px;
margin-left: -90px;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
}
.profile-circle .outside {
display: block;
position: absolute;
line-height: 100px;
text-align: center;
letter-spacing: 4px;
font-family: serif, "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E";
padding-left: 4px;
box-sizing: border-box;
font-weight: 800;
color: #fff; /* 文字の色 */
border-radius: 100%;
width: 100px;
height: 100px;
background: #000000; /* 外側の円の色 */
left: 50%;
top: 40%;
margin-top: -50px;
margin-left: -50px;
-webkit-transform: rotate(-135deg) translate(-100px) rotate(135deg);
transform: rotate(-135deg) translate(-100px) rotate(135deg);
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

ナビゲーションメニュー文字サイズ

#gnav .menu a {
display: block;
font-size: 15px; /* サイズ */
font-weight: 700; /* 太さ */
text-decoration:none;
padding: 11px 9px 0px;
height: 40px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
letter-spacing:0px; /* 1字の間隔 */
}

ヨメレバ・カエレバのレイアウト

このコードでアマゾン、楽天の商品を紹介する際のレイアウトを変更できます。

.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkkindle img{display:none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}

フォローボタンに動きを付ける

このコードを入力することでフォローボタンに動きが付くだけでなく、ちょうどいいサイズで表示してくれるようになります。

a.twt-follow-btn {
display: inline-block;
text-decoration: none;
color: #1da1f3;
font-size: 14px;
vertical-align: middle;
margin: 4px;
}
a.twt-follow-btn span.twt-icon {
border-radius: 4px;
position: relative;
top: -2px;
display: inline-block;

width: 18px;
height: 18px;
padding: 2px;
color: #FFF;
background: #1da1f3;

line-height: 16px;
font-size: 20px;
vertical-align: middle;
}

headに要素を追加

設定→詳細設定とページを開き、画面下の「headに要素を追加」部分に下のコードを貼る。

太字部分を蛍光ペンで強調

<style type="text/css">
/* 強調表示を蛍光ペン風に */
article strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}
/* bタグは太字 */
article b{
font-weight:bold !important;
}
</style>

参考にさせてもらったサイト

いままでブログを作ったことのない初心者の僕ですが、コードを紹介してくれているブロガーさんのおかげでなんとか納得のいくデザインにすることができました。

僕が使わせてもらっているコード以外にもたくさんのコードがありますので、ぜひ下のリンクからいろいろと見てみてください。

raku-book.hatenablog.com

mshitech.hatenablog.com

www.colmin.xyz

saruwakakun.com

おわりに

不具合などでうまく表示されなかったり、調べることも多くブログのカスタマイズにはかなり時間がかかりました。

大変な作業でしたが、いまは出来上がったこのサイトに愛着がわきやってよかったなと思えます。

シンプルで読みやすい記事にするためにおすすめのコードなどがあれば教えてください。

また、もし今回貼ったコードが間違っていた場合もお手数ですがご連絡いただけると助かります。

癌×ニート

舌がんが見つかりニートになった僕が、同じくがんに悩んだり苦しんでいるかたに向けて情報を発信しています。

【CSS, HTML】このブログをカスタマイズするために使った全てのコード

タイトル下

タイトル画像のサイズ調整

グローバルメニュー

サイドバー

プロフィール

フォローボタン

デザインCSS

行間

見出し

目次

カード型レイアウト

プロフィール

ナビゲーションメニュー文字サイズ

ヨメレバ・カエレバのレイアウト

フォローボタンに動きを付ける

headに要素を追加

太字部分を蛍光ペンで強調

参考にさせてもらったサイト

おわりに