WEB制作の備忘録｜朧なる足痕

Hatena Blogの設定、カスタマイズ

CSS その他 JavaScript jQuery

Hatena Blogの設定

はてなダイアリーからHatena Blogに変わったため、各種設定をメモします。

編集モード

help.hatenablog.com

Hatena Blogをカスタマイズする

デザインはSmooth（デフォルト）を使用しています。
この設定にカスタマイズを加えていきます。

自ページ以外のリンクを別窓で開くカスタマイズ

ブログの管理画面＞デザイン＞レンチアイコン（カスタマイズ）＞ヘッダ＞タイトル下
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

以下２つの条件を両方満たすリンクに、target="_blank"を自動で設定します。

  • リンクの指定（href）が「http (https含む)」で始まる
  • リンク先URLのホスト（ドメイン）名部分が自分のブログと同じもの以外
    • location.hostnameでホスト名を取得するのでそのまま。

Font Awesome Iconsを使用してボタンをつくる

例

f:id:hak00810:20200522224713p:plain

ブログの管理画面＞デザイン＞レンチアイコン（カスタマイズ）＞ヘッダ＞タイトル下

バージョンは「5」ではなく「4.7.0」を利用します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
ブログの管理画面＞デザイン＞レンチアイコン（カスタマイズ）＞デザインCSS
/* ボタン */
.entry-content a.btn:before {
  color: #FFF;
  font-family: FontAwesome;
  content: '\f054';/* ＞マーク */
  padding: 0 .5rem 0 0;
}
.entry-content a.btn {
  border: .07rem solid #25B7C0;
  color: #FFF;
  background: #25B7C0;
  padding: .5rem 1.25rem .5rem 1rem;
  border-radius: .2rem;
}
.entry-content a.btn:hover {
  text-decoration: none;
  background: #1A8288;
}
  • Font Awesome Iconsで使用したいアイコンをクリックします。
  • content: '\○○○'に、○○○に下記の四角内のコードを入れます。

f:id:hak00810:20200522180117j:plain

ブログ記事（はてな記法）

ブログ記事に下記を記載するとリンクボタンが表示されます。

<a href="#" class="btn">デモページ</a>

カスタマイズの全記述

header

ブログの管理画面＞デザイン＞レンチアイコン（カスタマイズ）＞ヘッダ＞タイトル下
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script language="JavaScript">
$(document).ready( function () {
$("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
})
</script>

CSS

ブログの管理画面＞デザイン＞レンチアイコン（カスタマイズ）＞デザインCSS
  • モバイルで確認したときに気になった箇所をメディアクエリを追加して修正しています。
/* 見出し */
.entry-content h3 {
  font-size: 140%;
  padding: .5rem 0 .5rem .8rem;
  border: .05rem solid #cfd8d8;
  border-left: .5rem solid #cfd8d8;
}
.entry-content h4 {
  font-size: 130%;
  border-bottom: .05rem solid #cfd8d8;
  padding-bottom: .5rem;
}
.entry-content h5 {
  padding: 0 0 0 .8rem;
  border-bottom: none;
  font-size: 110%;
  border-left: .3rem solid #cfd8d8;
}

/* その他 */
.entry-content {
  line-height: 1.6;
}
.entry-content img {
  border: .07rem dotted #cfd8d8;
}
.entry-content a {
  color: #25B7C0;
}
.entry-content a:hover {
  color: #1A8288;
}
.entry-content dd, .entry-content ol, .entry-content ul {
  margin: 0 0 .5rem 1.8rem;
}
.caution {
  color: #AAA;
  font-size: 80%;
}/* 注記や補足 */
.red {
  color: #F00;
}
.marker {
  background: linear-gradient(#FFF 0%, #FF0 20%);
}/* 黄色の蛍光マーカー */
.key {
  font-size: 85%;
  color: #666;
  background: #E9F0F2;
  border: .05rem solid #cfd8d8;
  margin: 0 .25rem .05rem;
  padding: 0 .25rem;
}/* キーボードのキーや用語などに使用 */

/* コード背景色 */
pre.code {
  margin: 0 0 1.5rem 0;
  padding: 1em;
  border: 1px solid #e4e4e4;
  background: #f8f8f8;
  border-radius: .05rem;
  color: #666;
  line-height: 1.5;
}

/* ボタン */
.entry-content a.btn:before {
  color: #FFF;
  font-family: FontAwesome;
  content: '\f054';
  padding: 0 .5rem 0 0;
}
.entry-content a.btn {
  border: .07rem solid #25B7C0;
  color: #FFF;
  background: #25B7C0;
  padding: .5rem 1.25rem .5rem 1rem;
  border-radius: .2rem;
}
.entry-content a.btn:hover {
  text-decoration: none;
  background: #1A8288;
}

@media screen and (max-width:641px){
  html {
    font-size: 62.5%;/* =10px */
  }
  body {
    font-size: 1.6rem;/* =16px */
    color: #797979;
  }
  #title {
  font-size: 130%;
  }
  pre.code {
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    font-size: 1.4rem;
  }
}
ブログの管理画面＞デザイン＞スマートフォンアイコン＞詳細設定
  • レスポンシブデザインにチェック


▼現在はこちらを使用していません▼

トップページを記事一覧に変更する

  • 初期設定は、最新の記事の全文が表示されているので、記事一覧に変更します。
    • トップページから記事一覧ページに転送しているので、アナリティクスなどで分析する人には、あまり良い方法ではないかもしれないです。
ブログの管理画面＞設定＞詳細設定＞検索エンジン最適化＞headに要素を追加

▽一部を変更すればコピペで変更できます▽

<script type="text/javascript">
if( location.href == 'https://hak00810.hatenadiary.org/'){
location.href='https://hak00810.hatenadiary.org/archive';
}
</script>
<noscript>
<p><a href="https://hak00810.hatenadiary.org/archive">WEB制作の備忘録｜朧なる足痕</a></p>
</noscript>

・https://hak00810.hatenadiary.org/は自分のブログのトップページを記載します。
　※archiveがある箇所はそのまま残してください。
・<noscript><p><a>テキスト</a></p></noscript>テキスト部分は自分のブログ名を記載してください。


その他 - 用語など

はてな記法一覧

  • 整形したHTMLなどのソースをそのまま表示できます。

help.hatenablog.com

シンタックスハイライト

  • ソースコードを色付けして表示できます。
  • ファイルタイプを指定します。

help.hatenablog.com



＜参考サイト＞

www.inside-shiina.com
https://www.okuni.me/entry/how-to-use-icon-sideberwww.okuni.me
corksample.hatenablog.com
blog.wackwack.net
blog.wackwack.net
www.tomomore.com