このブログの開始にあたり、はてなブログテーマを「UnderShirt」に変更しました。?
「UnderShirt」はレスポンシブデザインに対応した、カード型レイアウトのシンプルなテーマです。
記事を書き始める前に行ったコピペオンリーのカスタマイズを記録しておきます。
(イメージ画像は掲載していませんが、本ブログの対象部分で確認して下さい。)
フォントと文字サイズの変更
① 「デザインCSS」に以下のコードを貼り付けます。
/*文字サイズの変更*/
.entry-content {
font-size:19px;
}
/*フォントの設定 */
body {
font-family: “メイリオ”, Meiryo, “游ゴシック”, “Yu Gothic”, YuGothic, “Hiragino Kaku Gothic ProN”, “Hiragino Kaku Gothic Pro”, “MS ゴシック”, sans-serif;
※ 赤字の font-family はご自身で使いたいフォントに変更することができます。
ヘッダーに好みの画像を挿入
① ヘッダに挿入したい画像を予め準備します。
② 準備した画像を「はてなフォトライフ」にアップロードします。
③ 以下のコードを「デザイン」→「ヘッダ」→「タイトル下」へ貼り付けます。
<style type=”text/css”>
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:100%;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#fde6ff;
}
.headernew{
margin:0px!important;
}
</style>
<h1 class=”headernew”>
<a href=”https://maximal-life-test.hateblo.jp/
投稿数
0
読者数
0
“>
<img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/s/ss17935/20190610/20190610095731.jpg” width=”100%”>
</a>
</h1>
※ Link の部分は独自の環境に変更する必要があります。
フッターを作成してお問合せ、プライバシーポリシーのリンクを挿入
① 以下のコードを「デザイン」→「フッタ」へ貼り付けます。
<!–コピーライト–>
<footer id=”footer”>
<div id=”footer-menu”>
<div id=”blog-title-content”>
<a href=”https://www.maximal-life.work/“>Maximal Life</a>
</div>
<nav>
<div class=”footer-links”>
<ul>
<li>
<a href=”https://www.maximal-life.work/otoiawase“>お問い合わせ</a>
</li>
<li>
<a href=”https://www.maximal-life.work/privacy-policy“>プライバシーポリシー</a>
</li>
</ul>
</div>
</nav>
<p class=”copyright”>Copyright(C) 2019 Maximal Life All rights reserved.</p>
</div>
</footer>
※ Link、赤字の部分は独自の環境に変更する必要があります。
② 以下のコードを「デザインCSS」へ貼り付けます。
/* フッター部分のカスタマイズ */
/* コピーライト */
#bottom-editarea {
width: 100%;
margin: 0 auto;
background: #444444;
padding: 0;
color: #fff;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
#footer {
text-align: center;
color: #fff;
background: #696969;
width: 100%;
margin: 0;
padding: 2em 40px 1em 40px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.1);
text-align: center;
font-size: 80%;
}
#blog-title-content a {
font-size: 25px;
font-weight: 100;
color: #fff;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links ul li {
display: inline-block;
padding: 0 6px;
font-size: 14.5px;
box-sizing: border-box;
}
.footer-links ul li a{
color: #ffffff;
}
.copyright {
font-size: 10px;
}
/*自分で設定したフッターとページ下の余白を消す*/
#container {
margin-bottom: 0;
}
トップページの記事一覧を角丸へ変更
① 「デザインCSS」に以下のコードを貼り付けます。
/* 記事一覧角丸にする */
.page-index .archive-entry { border-radius: 10px;}
.page-index .entry-thumb { border-radius:10px 10px 0 0;} /* 画像を角丸に */
記事一覧ページのみはてなスターを非表示化
① 「デザインCSS」に以下のコードを貼り付けます。
/*カードの本文とスター消す*/
.page-archive .entry-description,
.archive-entry-body .social-buttons{
display: none;
}
サイドバーのプロフィールを変更
① 「サイドバー」→「プロフィール」を選択し、プロフィール画像、はてなIDの表示のチェックをはずす
② 以下のコードを「ブログの説明」に貼り付ける
<a href=”http://f.hatena.ne.jp/ss17935/20190512193354“><img src=”https://cdn-ak.f.st-hatena.com/images/fotolife/s/ss17935/20190512/20190512193354.jpg” alt=”20190512193354″></a>
<p>書いている人:<strong><a href=”https://www.maximal-life.work/about“><span style=”border-bottom: double 3px #ff0000;”>愛志論(id:ss17935)</span></a></strong></p>
<p>一攫千金を夢見るアラフィフのおじさん</p>
<p><div class=”subscribe-button”>
<a href=”https://blog.hatena.ne.jp/ss17935/ss17935.hatenablog.com/subscribe“>読者になる</a></p>
<p></div><a href=”https://feedly.com/i/subscription/feed/https%3A%2F%2Fwww.maximal-life.work%2Ffeed” target=”blank”><img id=”theButton” src=”https://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png” alt=”follow” width=”131″ height=”56″ style=”margin-top:14px;” exifid=”-1877203022″ oldsrc=”http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png” class=”aligncenter“></a></p>
<p><div class=”hatena-follow-button-box btn-twitter”><a href=”https://twitter.com/toynocologne” class=”twitter-follow-button” data-show-count=”false” data-lang=”ja”> @toynocologneをフォロー</a></div></p>
※ Link、赤字の部分は独自の内容に書き換える必要があります。
③ 以下のコードを「デザインCSS」に貼り付ける。
/* 読者になるボタンを大きくする */
.subscribe-button {
margin: 1em 0;
}
.subscribe-button a {
display: inline-block;
margin: 0 auto;
width: 100%;
max-width: 131px;
line-height: 56px;
text-decoration: none;
text-align: center;
color: #fff;
background-color: #eb4c5e; /* ここでボタンの色 */
box-shadow: 0 4px #da253a; /* ここでボタンの影の部分の色 */
border-radius: 4px;
transition: all .3s;
}
.subscribe-button a:hover {
transform: translateY(4px);
box-shadow: 0 0 #999;
}
SNSシェアボタンの変更
① 「デザイン」→「記事」→「記事下」に以下のコードを貼り付けます。
<style type=text/css>/*シェアボタン*/
.share-flat .share-flat-inner .twitter-search{ background: #55acee; width: 76%; height: auto; font-size: 12px; padding:4px; line-height: 0px;}.share-flat .share-flat-inner .twitter-search .share-text{ font-size: 12px;}.share-flat{ margin-bottom: 10px; text-align: center;}.share-flat-inner a { position: relative; padding:2px 0px; display: inline-block; width: 15%; height: 40px; line-height: 20px; border-radius: 4px; font-size: 16px; text-align: center; color: #ffffff; text-decoration: none;}.share-flat .small-text{ font-size: 10px;}.share-flat .hatena-bookmark-button{ background: #00A4DE;}.share-flat .twitter-button{ background: #55ACEE;}.share-flat .facebook-button{ background: #405BA7;}.share-flat .pocket-button{ background: #EE4256;}.share-flat .line-button{ background: #00C300;}.share-flat a:active{ opacity: 0.6;}
</style>
<!–シェアボタン–>
<div class=”share-flat”><span style=”font-size: 8px”>この記事をシェアする</span><div class=”share-flat-inner”>
<!–はてブ–>
<a href=”https://b.hatena.ne.jp/entry/{URLEncodedPermalink}” class=”hatena-bookmark-button” target=”_blank” data-hatena-bookmark-title=”{Title}” data-hatena-bookmark-layout=”simple” title=”このエントリーをはてなブックマークに追加”><i class=”blogicon-bookmark lg”></i><br> <span class=”hatebu-count small-text”><i class=”fa fa-spinner fa-spin”></i></span></a>
<!–Facebook–>
<a href=”https://www.facebook.com/sharer.php?u={URLEncodedPermalink}” onclick=”window.open(this.href, ‘FBwindow’, ‘width=650, height=450, menubar=no, toolbar=no, scrollbars=yes’); return false;” class=”facebook-button”><i class=”blogicon-facebook lg”></i><br><span class=”small-text”>Facebook</span></a>
<!–Twitter–>
<a href=”https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}” target=”_blank” class=”twitter-button”><i class=”blogicon-twitter lg”></i><br><span class=”small-text”>Twitter</span></a>
<!–Pocket–>
<a href=”https://getpocket.com/edit?url={URLEncodedPermalink}” class=”pocket-button” target=”_blank”><i class=”fa fa-get-pocket”></i><br><span class=”small-text”>Pocket</span></a>
<!–LINE–>
<a href=”https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}” class=”line-button” target=”_blank”><i class=”fa fa-comment”></i><br><span class=”small-text”>LINE</span></a>
</div></div>
② 「CSSデザイン」に以下のコードを貼り付けます。
/*SNSシェアボタン*/
.share-flat{
margin-bottom: 10px;
text-align: center;
}
.share-flat-inner a {
position: relative;
display: inline-block;
width: 18%;
height: 40px;
line-height: 20px;
border-radius: 5px;
font-size: 16px;
text-align: center;
color: #ffffff;
text-decoration: none;
}
.share-flat .small-text{
font-size: 10px;
}
.share-flat .hatena-bookmark-button{
background: #00A4DE;
}
.share-flat .twitter-button{
background: #55ACEE;
}
.share-flat .googleplus-button{
background: #C53727;
}
.share-flat .facebook-button{
background: #405BA7;
}
.share-flat .pocket-button{
background: #EE4256;
}
.share-flat a:hover{
opacity: 0.6;
}
/* ディスプレイサイズが920pxを超える場合、つまりPCのみLINEボタン非表示 */
@media screen and (min-width:920px) {
.share-flat .line-button {
display: none;
}
}
グローバルナビの設置
① 以下のコードを「デザイン」→「ヘッダ」→「タイトル下」へ貼り付けます。
<ul class=”global-nav”>
<li><a href=”https://www.maximal-life.work/”>ホーム</a></li>
<li><a href=”#“>ネットビジネス</a></li>
<li><a href=”https://www.maximal-life.work/archive/category/“>ブログ</a></li>
<li><a href=”#“>まとめサイト</a></li>
<li><a href=”https://twitter.com/toynocologne“>Twitter</a></li>
<li><a href=”https://www.maximal-life.work/otoiawase“>お問合せ</a></li>
</ul>
※ Link、赤字の部分は独自の内容に書き換える必要があります。
②?以下のコードを「デザイン」→「デザインCSS」へ貼り付けます。
/* グローバルナビ */
.global-nav {
margin: 0 0 30px;
padding: 0;
border-top: 1px solid #aaa;
font-size: 13px;
list-style-type: none;
}
/*clearfix*/
.global-nav:after {
content: “”;
clear: both;
display: block;
}
.global-nav li {
float: left;
width: 50%;
text-align: center;
border-bottom: 1px solid #aaa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*奇数のli要素に適応*/
.global-nav li:nth-child(odd) {
border-right: 1px solid #aaa;
}
.global-nav a {
display: block;
line-height: 44px;
color: #000;
text-decoration: none;
}
.global-nav a:hover {
color: #000;
background: #e6e6e6;
}
/*横幅1280px以上に適応*/
@media screen and (min-width: 1280px) {
.global-nav li:nth-child(odd) {
border-right: none;
}
.global-nav {
display: table;
table-layout: fixed;
width: 100%;
border-top: none;
border-collapse: collapse;
}
.global-nav li {
float: none;
display: table-cell;
width: 100%;
border-bottom: none;
border: 1px solid #aaa;
}
}
強調文字を蛍光ペンのアンダーラインに変更
① 「設定」→「詳細設定」→「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;
}
</style>
カード内のカテゴリー表示の変更
① 以下のコードを「デザイン」→「デザインCSS」へ貼り付けます。
/*カテゴリの位置変更*/
.page-archive .archive-entry .categories {
position: absolute;
top:0px;
left:10px;
}
/*左端につける*/
.page-archive .archive-entry .categories {
position: absolute;
top:-8px;
left:0px;
}
/*背景とテキストの色変更する場合*/
.categories a {
background: #696969;
color:#fff;
}
見出しの変更
① 以下のコードを「デザイン」→「デザインCSS」へ貼り付けます。
/*見出しの設定 */
.entry-content h2 {
position: relative;
padding: 12px;
color: #fff;
background-color: #696969;
}
.entry-content h2::before {
content: ”;
position: absolute;
top: 100%;
left: 20px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #555;
}
h2 {
/*線の種類(実線) 太さ 色*/
border-bottom: solid 3px #696969;
}
目次を変更(2019年10月15日に追加)
このブログを立ち上げた時に「目次」を変更しようとしたのですが、うまくいきませんでしたが、今回は簡単にうまくできました。
基本的に以下のコードを「デザインCSS」にコピペするだけです。
目次の先頭の数字を記号に変更
デフォルトでは数字になっているものを記号に変更します。
/* 目次の先頭マーク */
.entry-content .table-of-contents li{
list-style-type:disc; /* 大見出し:黒丸 */
}
.entry-content .table-of-contents li ul li{
list-style-type:circle; /* 中見出し:白丸 */
}
.entry-content .table-of-contents li ul li ul li{
list-style-type:square; /* 小見出し:黒四角 */
}
目次の背景色・枠色・太さの変更
.entry-content .table-of-contents {
background:#eeeeee; /* 目次ボックス内背景色 */
border-top:4px solid #c0c0c0; /* 目次枠線太さと色 */
border-left:4px solid #c0c0c0;
border-right:4px solid #c0c0c0;
border-bottom:4px solid #c0c0c0;
}
.entry-content .table-of-contents::before {
border-bottom: 2px solid #555555; /* 目次内境界線の太さと色 */
}
※ 赤字の部分は、好みの文字の大きさ、色に変更して下さい。
こちらはくうかさんのブログを参考にさせて頂きました。
囲み枠のカスタマイズ(2019年10月15日に追加)
囲み枠、タブ付き、タブなしの二種類を採用しました。
① 以下のコードを「デザインCSS」へコピペ。
/*囲み枠 */
.box11{ padding: 0.5em 1em; margin: 2em 0; color: #5d627b; background: white; border-top: solid 5px #5d627b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); } .box11 p { margin: 0; padding: 0; }
/*タブ有り囲み枠 */
.box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box27 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27 p { margin: 0; padding: 0; }
こちらはサルワカさんのブログを参考にさせて頂きました。
終わりに
ほとんどが、ブログテーマ「Minimalism」でカスタマイズしている別ブログからの流用です。
ブログテーマ 「UnderShirt」向けのカスタマイズは新たにネットで見つけましたが、ソースがどこかわからなくなってしまいました。
流用させて頂いた方々、ありがとうございます。
ブログテーマ「UnderShirt」も割と利用者が多いので情報はたくさんあります。
その他のカスタマイズで良いネタが見つかったら教えて下さい。
なお、カスタマイズ前には必ずバックアップを忘れずに!