IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / はてなブログテーマ/Cherry Blossom

はてなブログテーマ/Cherry Blossom

2016/11/20 CSS, javascript, はてなテーマ, はてなブログ

はてなブログテーマストアに投稿した「Cherry Blossom」の解説記事です。

  • スクリーンショット
  • 概要
  • テーマカラーの変更
  • ブログタイトルバックのイメージ変更
  • タブ表示仕様に必要なこと
    • タイトル下(ヘッダ)
    • フッタ
    • デザインCSS
  • チューニング

スクリーンショット

下記運用サイトをご覧ください。

ausnichts.hatenablog.com

概要

  • レスポンシブテーマです。
    768px から2カラムになります。
    デザイン > スマートフォン > 詳細設定 > レスポンシブデザイン にチェックを入れてください。
  • 記事をタブで切り替えます。
    ただし、タブ仕様にするには、ヘッダとフッタに HTML と Javascript を入れる必要があります。同時に、右下にページトップへのスムーズスクロールとトップページへのリンクが追加されます。
  • HTML,Javascript を入れなければ、通常表示のテーマとして使用できます。
  • flex,vw を使用していますので、旧ブラウザで表示が崩れるものがあります。
    対応ブラウザは、Can I use… Support tables for HTML5, CSS3, etc を参考にしてください。未対応ブラウザは、サポートの切れているブラウザと考えていいと思います。

テーマカラーの変更

デザイン > カスタマイズ > デザインCSS に次のスタイルを追加すればテーマカラーが変更されます。red,blue,rgba(0, 0, 255, 0.5) を好みの色に変更してください。

#blog-title::before {
  border-top: 44px solid red;
}
#blog-title::after {
  background: blue;
  box-shadow: 92px 10px 0 rgba(0, 0, 255, 0.5);
}
.entry, .page-archive .archive-entry {
  border-bottom: 5px solid red;
}
.entry::before, .page-archive .archive-entry::before {
  border-bottom: 5px solid blue;
}
.entry-header .entry-date::after, .page-archive .archive-entry-header .entry-date::after {
  background: blue;
  box-shadow: red 5px -5px;
}

上のスタイルは次のようになります。

ブログタイトルバックのイメージ変更

次のスタイルが指定してありますので、該当部分を上書き指定すれば変更できます。

#blog-title {
  position: relative;
  overflow: hidden;
}
#blog-title::before {
  content: "";
  position: absolute;
  border-top: 44px solid rgba(238, 135, 180, 0.3);
  top: 0;
  left: 62px;
  z-index: -1;
  border-left: 11vw solid #fff;
  border-right: 70vw solid #fff;
}
#blog-title::after {
  content: "";
  position: absolute;
  bottom: 29px;
  width: 178px;
  height: 5px;
  background: #6FBA2C;
  box-shadow: 92px 10px 0 rgba(111, 186, 44, 0.5);
  transform: rotate(-13deg);
  z-index: -1;
}

タブ表示仕様に必要なこと

次のように HTML,Javascript を入れてください。

タイトル下(ヘッダ)

<div class="tab-left"></div>
<ul id="tab">
<li class="tab-none tab-prev"><a href="javascript:void(0)" title="Prev"></a></li>
<li class="tab-none tab-next"><a href="javascript:void(0)" title="Next"></a></li>
</ul>
<div class="tab-right"></div>

フッタ

下の「自分のブログアドレス」の部分を、http://ausnichts.hatenablog.com/などと入れ替えてください。

<ul class="navi">
<li><a href="javascript:scrollToTop();"><i class="blogicon-chevron-up"></i></a></li>
<li><a href="自分のブログアドレス"><i class="blogicon-home"></i></a></li>
</ul>
<script>function showArticle(e){Array.prototype.forEach.call(document.getElementsByClassName("entry"),function(t){e.getAttribute("rel")===t.id?t.classList.add("visible"):t.classList.remove("visible")}),Array.prototype.forEach.call(document.getElementsByClassName("tab-item"),function(e){e.classList.remove("active")}),e.parentNode.classList.add("active")}function scrollToTop(){y=window.pageYOffset,setTimeout(function(){y>=0?(y=y-y/20-1,window.scrollTo(0,y),setTimeout(arguments.callee,10)):window.scrollTo(0,0)},10)}!function(){var e=0,t=window.location.href,a="http://"+location.hostname+"/",n=document.referrer;if(-1!==n.indexOf(a)&&(e=1),n===a&&(e=2),0!==e){var s=document.getElementsByClassName("tab-prev")[0];s.classList.remove("tab-none"),s.children[0].addEventListener("click",function(){history.back()},!1)}0===e&&t===a&&(e=2);var i=document.getElementsByClassName("pager-next")[0];if(void 0!==i){var c=document.getElementsByClassName("tab-next")[0];c.classList.remove("tab-none"),c.children[0].setAttribute("href",i.getElementsByTagName("a")[0])}var l=function(e,t){var a=document.createElement("a");return a.setAttribute("href","javascript:void(0)"),a.textContent=e,a.setAttribute("rel",t),a.addEventListener("click",function(){showArticle(this)},!1),a},d=t.split("/"),o=document.createElement("li");switch(-1!==d[3].indexOf("search")&&(d[3]="search"),d[3]){case"archive":"category"===d[4]?o.appendChild(document.getElementsByClassName("breadcrumb-child")[0]):void 0!==d[4]?o.appendChild(document.getElementsByClassName("archive-heading")[0]):o.innerHTML="<span>記事一覧</span>",o.classList.add("tab-item","active");break;case"about":o.innerHTML="<span>"+document.getElementsByTagName("dt")[0].textContent+"</span>",o.classList.add("tab-item","active");break;case"search":o.appendChild(document.getElementsByClassName("archive-heading")[0]),o.classList.add("tab-item","active");break;default:var o=document.createDocumentFragment(),r=document.getElementsByClassName("entry");Array.prototype.forEach.call(r,function(e,t){var a=l(e.getElementsByClassName("entry-title-link")[0].textContent,e.id),n=document.createElement("li");n.classList.add("tab-item"),0===t&&(n.classList.add("active"),e.classList.add("visible")),n.appendChild(a),o.appendChild(n)})}document.getElementById("tab").appendChild(o)}(),window.addEventListener("load",function(){document.getElementById("tab").classList.add("active")},!1);</script>

デザインCSS

.entry, .page-archive .archive-entry {
padding-top: 30px;
}
.page-index .entry:not(.visible), .page-index .page-archive .archive-entry:not(.visible), .page-archive .page-index .archive-entry:not(.visible),
.page-entries-year-month-day .entry:not(.visible),
.page-entries-year-month-day .page-archive .archive-entry:not(.visible),
.page-archive .page-entries-year-month-day .archive-entry:not(.visible) {
display: none;
}
#top-box,
.archive-heading,
.search-result {
display: none;
}


チューニング

はてなブログ公式のソーシャルパーツを入れている場合は、タブのアニメーションがカクカクするかも知れません。その場合は、次の CSS を追加してアニメーションを削除するか、下記記事で代替となる軽量ソーシャルボタンを公開していますので試してみてください。

ul#tab li {
transition: initial;
}
ul#tab li a,
ul#tab li > span,
ul#tab li h2 {
transition: initial;
}

www.imuza.com

はてなブログ/トップページの記事をタブ式表示にしてみた
Dropbox を Plamo Linux に同期させる
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips109
  • javascript98
  • Joomla!88
  • Wordpress70
  • Windows68
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com