ブログのテーマをUnder Shirtに変更しました

SHARE

f:id:moshimore:20180817084905j:plain
ブログのテーマをカード型のデザインにできる「Under Shirt」に変更しました。
設定やCSSなどを少しずつ変更していくので、そのメモ書きです。

このテーマの特徴

テーマストアにも書かれていますが、以下のような特徴があります。

  • レスポンシブデザインで記事一覧やアーカイブページで大きいアイキャッチ画像を2カラム、スマホなら1カラムで表示できる
  • サイドカラムには、レクタングル広告の表示ができる
  • カスタマイズしやすいデザイン

注意点としては、トップページの表示形式を一覧形式にする必要があるので、必然的にはてなブログProへの加入となります。

詳細設定の変更

ブログの設定ページにある詳細設定を変更します。

  1. トップページの表示形式→一覧形式に変更
  2. 検索エンジン最適化にあるheadに要素を追加へ以下を追加
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

ページャーリンク

「次のページ」が左側に寄ってしまう点など、配置を修正しました。

.pager-next a, .pager-prev a {
background: #ddd;
border-radius: 5px;
}
.pager-next a:hover, .pager-prev a:hover {
color: #1487bd;
}
.pager .pager-prev, .pager .pager-next {
width: 100%;
}
.pager-permalink{
padding-left: 20px;
padding-right: 20px;
}

<script type="text/javascript">
    if (!$('.pager-prev').length)
    {
        var span = document.createElement('span');
        span.classList.add('pager-prev');
        var element = document.getElementsByClassName('pager')[0];
        element.insertBefore(span, element.firstChild);
    }
</script>

コードに行番号を表示

ソースコードを掲載することが多いので、見やすくコードに行番号を表示するようにしました。
Maruさんが公開している方法を取り入れました。
code-life.hatenablog.com

フッター

<script>
var codeBlocks = document.getElementsByClassName('code');
[].forEach.call(codeBlocks, function(e) {
  if (!/lang/.test(e.className)) {
      return;
  }
  var lines = e.innerHTML.split(/\n/);
  var codeBlock = "";
  lines.forEach(function(line){
    if(line != ""){
      codeBlock += '<div class="code-line">' + line + '</div>'      
    }
  })
  e.innerHTML = codeBlock;
});
</script>

CSS

/*code-lineクラスの数でカウント*/
.code-line {
counter-increment: linenumber;
}
/*偶数行のみ背景色を適用*/
.code-line:nth-child(even){
background-color: #eee;
}
/*行番号を擬似要素として表示*/
.code-line::before {
content: counter(linenumber);
display:inline-block;
color: #ccc;
text-align: right;
width: 35px;
padding: 0 15px 0 0;
}

あと、コードに枠も表示させたかったので、以下を追加しました。

pre.code {
border-color: #888;
border-style: solid;
border-width: 1px;
padding: 1px;
}

フッターの追加

これと言って載せる内容もないけれど、とりあえずブログ名とコピーライト、プライバシーポリシーへのリンクということで、オークニズムさんが公開しているフッターを追加しました。
www.okuni.me

フッター

<footer id="footer">
<div id="footer-menu">
<div id="blog-title-content">
<a href="ブログのURL">ブログ名</a>
</div>
<nav>
<div class="footer-links">
<ul>
<li>
<a href="お問い合わせページのURL">お問い合わせ</a>
</li>
<li>
<a href="プライバシーポリシーのURL">プライバシーポリシー</a>
</li>
</ul>
</div>
</nav>
<p class="copyright">© 2018 ブログ名 All rights reserved.</p>
</div>
</footer>

CSS

/* フッター */
#bottom-editarea {
width: 100%;
margin: 0 auto;
background: #7f8c8d;
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: #676F74;
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: 50px;
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;
}
.copyright {
font-size: 10px;
}

aboutページのデザイン変更

aboutページ（プロフィールページ）を記事のデザインと同じにしたい場合は少し手を加えます。
自由記述欄へ以下を貼り付けて編集します。

<header class="entry-header">
<h1 class="entry-title">
<a href="/about" class="entry-title-link bookmark"><!-- タイトル --></a>
</h1>
</header>
<!-- 本文 -->
<footer class="entry-footer">
<!-- 何か追加したいフッター -->
</footer>
<script type="text/javascript">
$(function(){
    $('body').removeClass('page-about');
    $('body').addClass('page-entry');
    $('.entry-content').before($('.entry-header'));
    $('.entry-content').after($('.entry-footer'));
});
</script>

自由記述欄に入力された内容は全てentry-content内に反映されてしまいます。
それを回避するためにJavaScriptでentry-headerとentry-footerを記事ページと同じようにentry-contentの前後へ移動させています。

ソーシャルボタン

id:vintonさんが公開しているシンプルなマテリアルデザイン風のソーシャルボタンを設置しました。
webgaku.hateblo.jp

記事上

<div class="sns-header">
<ul class="sns-area">
<li>
<a
      class="sns-twitter sns-link"
      href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=TWITTER_IDに変更" target="_blank">
<i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a>
</li>
<li>
<a
      class="sns-facebook sns-link"
      href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
      onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      target="_blank">
<i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a>
</li>
<li>
<a
      href="http://b.hatena.ne.jp/entry/{Permalink}"
      class="hatena-bookmark-button sns-bookmark sns-link"
      data-hatena-bookmark-title="{Title}"
      data-hatena-bookmark-layout="simple"
      title="このエントリーをはてなブックマークに追加">
<i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a>
</li>
<li>
<a
      class="sns-pocket sns-link"
      href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
      onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      >
<i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
</li>
</ul>
</div>

記事下

<div class="sns-footer">
<ul class="sns-area ">
<li>
<a
      class="sns-twitter sns-link"
      href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=TWITTER_IDに変更" target="_blank">
<i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a>
</li>
<li>
<a
      class="sns-facebook sns-link"
      href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}"
      onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      target="_blank">
<i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a>
</li>
<li>
<a
      href="http://b.hatena.ne.jp/entry/{Permalink}"
      class="hatena-bookmark-button sns-bookmark sns-link"
      data-hatena-bookmark-title="{Title}"
      data-hatena-bookmark-layout="simple"
      title="このエントリーをはてなブックマークに追加">
<i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a>
</li>
<li>
<a
      class="sns-pocket sns-link"
      href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
      onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      >
<i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a>
</li>
</ul>
</div>

フッター

<script type="text/javascript">
$(function(){
    $('.entry-header').after($('.sns-header'));
    $('.entry-footer').before($('.sns-footer'));
});
</script>

CSS

.sns-header, .sns-footer {
padding: 0 24px;
}
.sns-area {
margin: 30px auto 10px;
padding: 0;
overflow: hidden;
table-layout: fixed;
display: table;
width: 100%;
}
.sns-area li {
list-style-type: none;
display: table-cell;
vertical-align: middle;
}
.sns-area li:last-child {
margin-right: 0
}
.sns-link {
position: relative;
display: block;
color: #fff;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
height: 42px;
line-height: 42px;
}
.sns-link::after {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background-color: rgba(255,255,255,.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.sns-link:hover {
text-decoration: none;
}
.sns-link:hover::after {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
50% {
opacity: 1;
}
100% {
width: 300px;
height: 300px;
}
}
@keyframes circle {
50% {
opacity: 1;
}
100% {
width: 300px;
height: 300px;
}
}
.sns-twitter {
background: #55acee;
}
.sns-facebook {
background: #3a5795;
}
.sns-bookmark {
background: #00A5DE;
}
.sns-pocket {
background: #ED4055;
}
.blogicon-twitter,
.blogicon-facebook,
.blogicon-bookmark,
.blogicon-chevron-down {
margin-right: 5px;
}
@media only screen and (max-width: 767px) {
.sns-txt {
display: none;
}
.blogicon-twitter,
.blogicon-facebook,
.blogicon-bookmark,
.blogicon-chevron-down {
margin-right: 0;
}
}

この状態だとブログテーマによって、リンクのテキスト部分が青くなってしまうので、以下を追加しました。

.sns-area a {
color: #fff;
text-decoration: none;
}
.sns-area a:hover {
color: #fff;
text-decoration: none;
}

他にも随時、変更していった内容を記載していこうと思います。

以上、ブログのテーマをUnder Shirtに変更しましたでした。

前の記事

LINE Clova スキル版 頭痛予測をリリースしました！

次の記事

ナショナル（パナソニック）の電動歯ブラシ ドルツを分解（破棄電…