東京より愛を込めて。

知識・経験の棚卸

【随時更新】はてなブログにしたカスタマイズ忘備録

はてなブログに施したカスタマイズを忘備録として残しておきます。
カスタマイズする際は、「デザイン」>「カスタマイズ」のページから可能です。
*レスポンシブデザインなので、「デザイン」>「スマートフォン」>「詳細設定」の「レスポンシブデザイン」にチェックを入れています。

ちなみに適用しているテーマは「Minimalism」、適用時点で人気No.1だからです。

blog.hatena.ne.jp

Font Awesomeについて

このブログでは、Font Awesomeを使っています。
こちらを参考にさせていただきました saruwakakun.com

ヘッダ

タイトル下

ナビゲーションメニューの設置(一部コメントアウト中)

こちらを参考にさせていただきました hitsuzi.hatenablog.com h2ham.net

<!-- 一部コメントアウト中 -->
<nav id="gnav">
  <div class="gnav-inner" id="menu-scroll">
      <div class="menu"><a href="https://www.kaido-hajime.com/"><i class="fas fa-home aria-hidden="true"></i> HOME</a></div>
      <div class="menu"><a href="https://www.kaido-hajime.com/about"><i class="fas fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
      <div class="menu"><a href="https://www.kaido-hajime.com/archive/category/%E4%BB%95%E4%BA%8B%E8%A1%93"><i class="fas fa-briefcase" aria-hidden="true"></i> 仕事</a></div>
      <div class="menu"><a href="https://www.kaido-hajime.com/archive/category/%E8%AA%AD%E6%9B%B8%E3%83%A1%E3%83%A2"><i class="fas fa-book-open aria-hidden="true"></i> 書評</a></div>
      <div class="menu"><a href="https://www.kaido-hajime.com/archive/category/%E5%8B%89%E5%BC%B7"><i class="fas fa-graduation-cap" aria-hidden="true"></i> 勉強</a></div>
<!-- 
      <div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> 一人暮らし</a></div>
      <div class="menu"><a href="URL"><i class="far fa-envelope" aria-hidden="true"></i> CONTACT</a></div>
 -->
    </div>
</nav>

記事

記事上・下

シェアボタンの設置

こちらを参考にさせていただきました hitsuzi.hatenablog.com

<div class="shrbtn">
  <!-- HatenaBookmark -->
  <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="share_btn">
    <span class="htvcenter" style="line-height: 1.6;">
      <i class="blogicon-bookmark" style="font-size:22px"></i>
    </span>
  </a>
  <!-- twitter -->
  <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="share_btn">
    <i class="fab fa-twitter"></i>
  </a>
  <!-- facebook -->
  <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="share_btn">
    <i class="fab fa-facebook-f"></i>
  </a>
  <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="share_btn">
    <i class="fab fa-get-pocket"></i>
  </a>
  <!-- feedly -->
  <a href="http://feedly.com/i/subscription/feed/http://www.kaido-hajime.com/feed" target="_blank" class="share_btn">
    <i class="fas fa-rss"></i>
  </a>
</div>  

デザインCSS

ブログ名のフォントサイズ調整(小さいタブレットやスマホ)

こちらを参考にさせていただきました hitsuzi.hatenablog.com

@media screen and (max-width: 640px){
  #blog-title #title {
      font-size: 21px !important;
  }
}

文字の大きさ

.entry-content {
  font-size: 16px;
}

目次のカスタマイズ

こちらを参考にさせていただきました www.yukihy.com

.table-of-contents li,
.table-of-contents ul{
    list-style-type: decimal;

見出しのデザイン

こちらを参考にさせていただきました saruwakakun.com

.entry-content h2 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
background: transparent;/*背景透明に*/
border-left: solid 5px #3f3f3f;/*左線*/
}
h3 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}
h3:before { font-family: "Font Awesome 5 Free";
content: "\f0da";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 1em;/*サイズ*/
left: 0;/*アイコンの位置*/
top: 0;/*アイコンの位置*/
}
h4 {
position: relative;
padding-left: 1.2em;/*アイコン分のスペース*/
line-height: 1.4;
}
h4:before { font-family: "Font Awesome 5 Free";
content: "\f0c8";/*アイコンのユニコード*/
position: absolute;/*絶対位置*/
font-size: 0.5em;/*サイズ*/
left: 8px;/*アイコンの位置*/
top: 8px;/*アイコンの位置*/
}

強調文字のデザインを蛍光ペン風に

こちらを参考にさせていただきました www.north-geek.com

.entry-content b{
    background: -webkit-linear-gradient(transparent 60%, #ffff00 60%)!important;
    background: -o-linear-gradient(transparent 60%, #ffff00 60%)!important;
    background: linear-gradient(transparent 60%, #ffff00 60%)!important;
}

出典を右寄せする

こちらを参考にさせていただきました CSSで作る!魅力的な引用デザインのサンプル30(blockquote)

.entry-content blockquote {
    position: relative;
    padding: 30px 15px 8px 15px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

.entry-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    vertical-align: middle;
    content: "f10d";
    font-family: "Font Awesome 5 Free";
    color: #cfcfcf;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

.entry-content blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

.entry-content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

出典を右寄せする

こちらを参考にさせていただきました viriditas.hatenablog.com

.entry-content blockquote cite { 
    display: block; 
    text-align: right; 
}

便利なコメントアウトについて

今は使わないけど、いつか使うかもっていうデザインについては、コメントアウトしています。半角スペースで囲みつつ、コメントアウトの部分にコメントを記載します。

HTMLのコメントアウト

<!-- コメントアウト -->

CSSのコメントアウト

/* コメントアウト */