moshimore Knowledge

アプリ開発・紹介とメモ書き、日々の日記。

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

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;
}

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