ずっと放置気味のブログに気合いを入れ直すべく、ブログのテーマを「ZENO-TEAL」に変更しました。
はてなブログの中では、記事をタイルに並べるタイプのテーマは珍しいかと。今日、このタイミングでは、テーマストアのピックアップに上がっています。
このテーマをインストールして、はじめに躓いたこと。
「ん？あれ？？記事をクリックしても、記事に飛ばない！！！」
このテーマを使う上で最も気をつけないといけないことが、ひとつありました。
それは、記事に“続きを読む”を必ずつけること。
もうこれがないと、ブログトップから、開きたい記事をクリックしたくてもクリックできなかったり、画像だけが開いてしまったりで、どうにもなりません。
こちらのコメントで、この件、説明されています。
zeno-teal.hatenablog.com
これまでの記事で「続きを読む」なんて一度使ったことがなくて、昨夜、一斉に入れていきました。
そもそも、記事数が少ないので、時間はかかりませんでしたが…。
現在進行形でCSSを弄ってますが、自分用も含めて、修正箇所を紹介していきたいと思います。
ナビゲーションバー
ヘッダ内のタイトル下に以下を設定。
ドロップダウンメニューになってないので、4つ程度にしないとスマホで表示したときに変なところで改行が入ってしまいます。
<div id="zeno-menu"> <ul class="zeno-menu"> <li><a href="https://moshimore.jp"><i class="blogicon-home"></i> ホーム</a></li> <li><a href="http://moshimore.jp/knowledge"><i class="blogicon-myblog"></i> ブログ</a></li> <li><a href="http://moshimore.jp/knowledge/about"><i class="blogicon-user"></i> プロフィール</a></li> <li><a href="https://moshimore.jp/supports/contact"><i class="blogicon-help"></i> お問い合わせ</a></li> </ul> </div>
ソーシャルボタン
記事の記事上と記事下に以下を設定。
デザインは、4種類あって、「snsbtns1」「snsbtns2」「snsbtns3」「snsbtns4」が選べます。
<div class="snsbtns2"> <a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="sns-fb">Facebook</a> <a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}', '', 'width=500,height=400'); return false;" class="sns-tw">Twitter</a> <a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="sns-po">Pocket</a> <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button sns-hb" data-hatena-bookmark-layout="simple">Hatebu</a> <script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </div>
テーマカラー
やっぱり青系のカラーに変更。
/* メインカラー 500 */ #blog-title, .entry-content h2, .entry-content ol li:before, .page-index .pager a:hover, .page-entry .pager .pager-prev::before, .page-entry .pager .pager-next::after, .hatena-module-title, .archive-heading {background-color:#00BCD4;} .entry-content p a, .entry-content h3, .entry-content h4::before, .entry-content ul ul li::before, ul.table-of-contents:before, .page-index .pager a, .page-entry .pager span a, .urllist-item::before, .hatena-module-category .hatena-urllist li::before, .entry-content ul li::before {color:#00BCD4;} .archive-heading::before, .entry-content h2::before {border-top-color:#00BCD4;} .entry-content h3 {border-left-color:#00BCD4;} ul.table-of-contents, .page-index .pager a, .page-entry .pager span {border-color:#00BCD4;} @media screen and (max-width: 480px){ .entry-content h2 {border-bottom:3px solid #00BCD4;color:#00BCD4;background-color:transparent;} } /* 濃い色 600 */ #globalheader-container, .zeno-menu li a:hover {background:#00ACC1;} .entry-content p a:visited {color:#00ACC1;} /* 薄い色 400 */ .page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before {background:#26C6DA;}
色の組み合わせは、Googleのマテリアルデザインから。
タイトルの部分を中央寄せではなく左寄せに変更
#blog-title-content { width:1174px; margin:2rem auto; text-align:left; } @media screen and (max-width: 1200px){ #blog-title-content{ width:760px; } } @media screen and (max-width: 780px){ #blog-title-content{ width:100%; } }
#contentのCSSを参考に変更しましたが、正しいかどうか不明です。
以上、はてなブログのテーマを「ZENO-TEAL」に変更しました！でした。