Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

トップ > はてなブログ > はてなブログのカスタマイズ 序の章3

はてなブログのカスタマイズ 序の章3

はてなブログ

序の章 その1(本ブログのテーマ選定)はこちら
序の章 その2(別ブログのテーマ選定)はこちら
おまけ的な記事(はてブロの仕様とか小ネタとか)はこちら

とりあえずひと段落

今回は序の章その3…いやぁ、前回の記事から数ヶ月経っちゃいましたね…。

あれから色々調べ上げ、とりあえず現状のレイアウトまで持って行くことが出来ました。
まぁブログUIの大体の雰囲気は「Minimalism」さんに任せましたが…。

また、はてなブログさんではテーマに加えて「デザインCSS」というものも設定出来るみたいです。
こちらでは自分のブログで読み込まれるCSSコードを直書き出来るみたいで…。
※正確には、はてブロさんのデフォルトCSSや、テーマCSSに追加して、ここで記述したCSSを読み込んでくれる感じです

そちらにも一手間(細かい部分に少し手を加えたくらいですが)かけ、仕上げてみました。
一先ずはこれで行きたいと思います。

自分で1からテーマを作ってみるってのもとっても面白そうだなぁと思いつつ。
そのためには、たくさんのインプットが必要でしょうけどね…！
もし出来ましたらこちらのブログに記事投稿する予定ですので、「おっいいじゃん使ってやんよ」って方は使ってあげてください。

自分でカスタマイズした部分

この章では、先にも申しました「細かいところに手を加えた部分」についてメモしていこうと思います。
最後の方にCSSコードも載せてます。

とりあえず見出し部分を変えたい

見出し部分をちょっと凝りたいなと思い、下記の様なCSSをとりあえず組んでみました。
また、文の最初にちょっとしたアイコンもつけたいなと思ったので…。
下記の参考記事を基に、before要素で実装してみました。
Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合 - Qiita

※ちょっと長いので折り畳んでます。

展開する

/* 見出しの装飾 */
.entry-content h3, .entry-content h4, .entry-content h5{
  background-color: #efefef;
}
.entry-content h3{
  padding: .8em;
  border-left: 8px solid #ccc;
}
.entry-content h4{
  padding: .5em;
  padding-left: 1em;
}
.entry-content h4::before{
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  color: #aaa;
  font-size: .8em;
  font-weight: normal;
  padding-right: 1em;
}
.entry-content h5{
  padding: .5em 1em;
}
.entry-content h5::before{
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  color: #aaa;
  font-size: .8em;
  font-weight: normal;
  padding-right: 1em;
}

目に眩しいシンタックスハイライトの色を変える

はてなブログでは、ソースコードに色をつけてくれるシンタックスハイライト機能がありますが…。
デフォルトでは背景も暗くなく、なかなか目に眩しい配色をしてらっしゃいます…こんな感じに。

※この情報は、下記の参考記事から引用させていただきました。
はてなブログのシンタックスハイライトの色を変更する - 素人趣味のWeb制作ブログ

/* SUPER PRE SYNTAX HIGHLIGHT */
.synSpecial { color: #c000c0; }
.synType { color: #3EC63E; }
.synComment { color: #4F80E5; }
.synPreProc { color: #9355E6; }
.synIdentifier { color: #51CFCF; }
.synConstant { color: #FF6666; }
.synStatement { color: #D88A17; }

表にすると以下の様な感じです。

Class Hex Color
.synSpecial #c000c0
色
.synType #3EC63E
色
.synComment #4F80E5
色
.synPreProc #9355E6
色
.synIdentifier #51CFCF
色
.synConstant #FF6666
色
.synStatement #D88A17
色

これを改善すべく、下記の参考記事を基にCSSを追記しました。
はてなブログのソースコードの色を変更する - PG日誌

※参考記事を見ると「C#でコードが綺麗に見える様な配色にしてあります」とありますが、使ってる感じ別の言語でも非常に綺麗に見えます…本当感謝です。

/* ソースコードのハイライト */
/* 参考記事: https://takachan.hatenablog.com/entry/2017/06/04/183208 */
.entry-content pre.code {
    background-color: #3F3F3F;
    color: #DCDCDC;
}
.synSpecial { color: #cc9393; }
.synType { color: #E3CEAB; }
.synComment { color: #7A987A; }
.synPreProc { color: #8c8cb4; }
.synIdentifier { color: #6e96be; }
.synConstant { color: #cc9393; }
.synStatement { color: #efc986; }

サイドバーに自分のTwitterを

はてなブログさんでは、サイドバーもカスタマイズ出来ますが…。
このサイドバーには、外部のサービス(Twitterなど)の埋め込みソースコードを貼ることが可能です。

筆者もこの機能を使い、Twitterのタイムラインウィジェットを横に表示させる様にしました。
こちらやこちら参考記事を見ながら、下記のソースコードをサイドバーに表示させる様にしてみました。

<a class="twitter-timeline" width="240px" data-tweet-limit="5" data-chrome="noheader nofooter" href="https://twitter.com/アカウント名?ref_src=tなんか文字列">Tweets by アカウント名</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

…しかし、Twitter側がこのタイムラインウィジェット機能を廃止するそうで。
その代わりに、「publish.twitter.com」という今までこの機能を提供してくれていたものとは別のグループが、タイムラインウィジェット機能を提供してくれるそうです。
早速下記の参考サイトを参考に、publish.twitter.comのウィジェットに設定しましたが…。
Twitter、タイムラインウィジェットのサポート廃止に。新しいウィジェットの設置方法 | 電話代行メディア

publish.twitter.comから提供されたウィジェットのソースコードがね、こんな感じなんです。

<a class="twitter-timeline" data-lang="ja" data-width="240" href="https://twitter.com/アカウント名?ref_src=なんか文字列">Tweets by アカウント名</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

…いや、正直さっきのウィジェットと変わらない様な…。
また、publish.twitter.comのウィジェットでは「data-tweet-limit」属性(ツイートの最大表示数を指定できる)を付けられなかったのですが…。

ここまで似たコードならひょっとして…と思い、上記コードにdata-tweet-limitを付けると問題なく動作。
まぁ、いずれは廃止されるかもしれませんが…どうなんでしょうかねぇ。

スマホ用に表示調整

スマートフォンは縦長のため、PC用のレイアウトをそのまま流用すると大惨事に…。
とはいえ、Minimalismテーマはスマホ用でもレイアウトがいい感じになる様に設定されていますが。

ただ、それだけでは少し物足りない部分もあったので…。
下記のコードも加えておきました。
多少の調整程度ですが…こういう細かいところもしっかりやると、いい感じに見える(はず)なんですよねぇ。

@media screen and (max-width: 640px){
  #blog-title #title {
      font-size: 21px;
  }
  .breadcrumb-inner{
    line-height: 2em;
  }
  .entry-content {
    font-size: 14px;
    line-height: 1.8em;
  }
  .content-inner-follow-buttons .twitter{
    width: 80%;
  }
}

ページ上部に戻るボタン

ページ上部に戻るボタンもあるといいかなと思い、下記のCSSコードとJSコードも追記しました。
はてなブログのデザイン設定>フッターの所で、HTMLタグを記述できるので…JSのコードはそこに書きました。
具体的なソースコードはこんな感じです。

.scroll-btn {
    position:fixed;
    width: 1em;
    height: 1em;
    right:5vw;
    bottom:5vh;
    padding: 1.2em;
    font-size: 1.2rem;
    color:#fff;
    text-align: center;
    text-decoration:none;
    background:#000;
    border-radius: 50%;
    transition: .5s;
    opacity: .5;
}
.scroll-btn:hover {
    opacity: .4;
}
.scroll-btn:visited{
    color:#fff;  
}

※jQueryが入っていること前提です

<script>
  $(function () {
    /** ページトップ処理 **/
    // スクロールした場合
    $(window).scroll(function() {
      // スクロール位置が200を超えた場合
      if ($(this).scrollTop() > 200) {
        $('.scroll-btn').fadeIn();
      } else {
        // ページトップへをフェードアウト
        $('.scroll-btn').fadeOut();
      }
    });

    // ページトップクリック
    $('.scroll-btn').click(function() {
      // ページトップへスクロール
      $('html, body').animate({
        scrollTop: 0
      }, 300);
    });
  })(jQuery);
</script>

<a href="#" class="scroll-btn" style="display: none;"><i class="fa fa-angle-double-up"></i></a>

※余談ですが、昔Web系勉強会でJSファイルを書く場所についてアドバイスがありました。
「JSの読み込みは遅いから、<head>部分に書くとその分Webページが重くなってしまうので、は特別な意味がないなら<body>タグの最後に書くといいよ」というものです。
はてなブログのデザイン設定>ヘッダーの部分でも、HTMLタグを記述できますが…。
上記の理由を聞いて以降は、<body>タグの最後らへんに書く様にしています。

開発者ツールを使ってGoogleやGithub、Dropbox等大手WebサービスのWebページソースも覗いて見た所、全てがこの手法をとってましたしね。
(正確には最後ではなく、ソースの途中に記述されてたりもしましたが…恐らくJSコード下記のHTMLソースは、そのJSがないと機能しないものなのでしょうかね)

カテゴリ部分のカスタマイズ

※2018.09.09追記

地味に気になってた…PC版だと記事横に見える、「カテゴリ一覧部分」。
デフォルトだと縦長なレイアウトになってしまいますが…設定次第で如何様にも変えれるとの事。

確かに、他のはてブロ記事を見てると、カテゴリ一覧部分がタイル状に並べられているものもありました。
自分もそのようにしてみたいなと思い…下記の様なCSSを組んでみました。

※今回は下記の参考記事にお世話になりました。
サイドバーのカテゴリーをリスト表示からタイル表示にする方法【はてなブログ カスタマイズ】 - 思考は現実化する

※ちょっと長いので折り畳んでます。

展開する

/*------------------------------*/
/* カテゴリ部分の装飾 */
/* 参考記事: https://www.thoughts-make-things.com/entry/category-tile-display */
/*------------------------------*/
.hatena-module-category .hatena-urllist {
  margin: 0 0;
  padding: 0;
}
.hatena-module-category .hatena-urllist li {
  display: inline-block;
  margin: 0 .5em .5em 0;
  padding: .8em;
  font-size: 0.8em;
  color: #333;
  background-color: #eee;
  border: none;
  border-radius: 2px;
  transition: .3s;
}
.hatena-module-category .hatena-urllist li a{
  width: 100%;
  height: 100%;
  color: #333;
}
.hatena-module-category .hatena-urllist li:hover {
  background-color: #ddd;
  box-shadow: 0 .3em .2em rgba(0,0,0,0.2);
}

CSSコード

他にもいろいろ細かなところを調整した結果、下記の様なデザインCSSが出来上がりました！
※このCSSは2018/09/03現在での、当ブログのデザインCSSです。今後変更される可能性が高いので悪しからず…。

展開する

/*------------------------------*/
/* ページトップへ戻るボタン */
/*------------------------------*/
.scroll-btn {
    position:fixed;
    width: 1em;
    height: 1em;
    right:5vw;
    bottom:5vh;
    padding: 1.2em;
    font-size: 1.2rem;
    color:#fff;
    text-align: center;
    text-decoration:none;
    background:#000;
    border-radius: 50%;
    transition: .5s;
    opacity: .5;
}
.scroll-btn:hover {
    opacity: .4;
}
.scroll-btn:visited{
    color:#fff;  
}

/*------------------------------*/
/* カテゴリ部分の装飾 */
/* 参考記事: https://www.thoughts-make-things.com/entry/category-tile-display */
/*------------------------------*/
.hatena-module-category .hatena-urllist {
  margin: 0 0;
  padding: 0;
}
.hatena-module-category .hatena-urllist li {
  display: inline-block;
  margin: 0 .5em .5em 0;
  padding: .8em;
  font-size: 0.8em;
  color: #333;
  background-color: #eee;
  border: none;
  border-radius: 2px;
  transition: .3s;
}
.hatena-module-category .hatena-urllist li a{
  width: 100%;
  height: 100%;
  color: #333;
}
.hatena-module-category .hatena-urllist li:hover {
  background-color: #ddd;
  box-shadow: 0 .3em .2em rgba(0,0,0,0.2);
}

/*------------------------------*/
/* 記事内容部分への装飾 */
/*------------------------------*/

/* 見出しの装飾 */
.entry-content h3, .entry-content h4, .entry-content h5{
  background-color: #efefef;
}
.entry-content h3{
  padding: .8em;
  border-left: 8px solid #ccc;
}
.entry-content h4{
  padding: .5em;
  padding-left: 1em;
}
.entry-content h4::before{
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  color: #aaa;
  font-size: .8em;
  font-weight: normal;
  padding-right: 1em;
}
.entry-content h5{
  padding: .5em 1em;
}
.entry-content h5::before{
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  color: #aaa;
  font-size: .8em;
  font-weight: normal;
  padding-right: 1em;
}
/* 各段落への装飾 */
.entry-content p{
  margin: 1.6em;
}
/* 折りたたみコンテンツへの装飾 */
.entry-content details{
  padding: .5em;
  padding-left: 2em;
  background-color: #eee;
}

/*------------------------------*/
/* スマホ画面用レイアウト */
/*------------------------------*/
@media screen and (max-width: 640px){
  #blog-title #title {
      font-size: 21px;
  }
  .breadcrumb-inner{
    line-height: 2em;
  }
  .entry-content {
    font-size: 14px;
    line-height: 1.8em;
  }
  .content-inner-follow-buttons .twitter{
    width: 80%;
  }
}

/*------------------------------*/
/* ソースコードのハイライト */
/* 参考記事: https://takachan.hatenablog.com/entry/2017/06/04/183208 */
/*------------------------------*/
.entry-content pre.code {
    background-color: #3F3F3F;
    color: #DCDCDC;
}
.synSpecial { color: #cc9393; }
.synType { color: #E3CEAB; }
.synComment { color: #7A987A; }
.synPreProc { color: #8c8cb4; }
.synIdentifier { color: #6e96be; }
.synConstant { color: #cc9393; }
.synStatement { color: #efc986; }

次回について

ひとまずやりたい事はやれた様に思えます…ひとまずね。
ただ、いろいろ細々とカスタマイズしていると、いっその事自分で1からテーマを作ってみようかなという気持ちがすっごく強くなってきました。
というわけで、次回は自作テーマ作りに入っていこうかなと思います。

ではでは|дﾟ)