はてなデザインZENO-TEALにしてカスタマイズする気になったのはポケ森のせい①
ベトナムでもどうぶつの森ポケットキャンプのアプリが使えるんですね。DQのカードバトルのやつは、ご使用できない地域ですって言われてしまってご飯も喉を通らない生活をしていたんですが、ポケ森のおかげで体重が戻りそうです。
ポケ森に感化されたかどうかは定かではありませんが、ポケ森で家具を集めて部屋（キャンプ場）をレイアウトしていると、ふとブログをいろいろ変えてみようかなと思いまして、今回いろいろ大幅に変更しました。
しかし僕はプログラミングとかほんとに何もわからず、ブログを始めて7か月くらいですが、
<p>・</p>
くらいしかわかりません。笑
というかこれがプログラミングの一種なのかもわかりません。
そんな僕が今回は（人の見様見真似ですが）頑張ったので記事にしようと思いました。（本当はネタがないだけです。）
とりあえず今回変わったところいろいろ。
はてなProにしました。
遂にはてなproにしました。
とりあえず一年契約にしてみました。ベトナムでの生活が始まった今年の4月からブログを始めて、毎日投稿とかはしてないですけど、なんだかんだ今まで続いているし、楽しいので多分これからも続くでしょうということで。8000円くらいでしたが、なぜか安いかなと思え始めたので。笑
もう一つの理由としては、次に説明するんですが、変えたいデザインテーマがあって、そのテーマはデザイン的に、はてなブログの広告を非表示にする前提だったんですね。でもはてなの無料版では広告を削除することができないんですよ。
もしかしたらテーマを作っている人ははてな管理者から買収されていたのかもしれません。（嘘ですすいません。）
デザインテーマの変更
以前使わせていただいたテーマはこれでした。
人気テーマ1位のやつです。
最初からデザインもシンプルでいいと思ったし、最初からある程度僕の需要に会ってる感じにカスタマイズされていた感があったのでこれを使わせていただいていました。
しかしブログを始めるにつれてちょっとずつカスタマイズ（コピペですけど）がわかるようになっていろいろコードを加えていたんですが、僕の知識不足で不具合が多かったり、コードを入れてもうまく機能しないことがあったので、、、つまり使いこなせませんでした。（笑）ごめんなさい作成者さん。しかし僕みたいな初心者にとっては序盤は大変お世話になりました。
今回のテーマさせていただいたのはこれです。
このテーマにしようと思った理由は
一つ目、記事の表示の方法がカードみたいになってるのがいいなと思ったから。
でもさっき言ってたように、無料版で広告表示を無効にできない場合だと、それぞれの記事のサムネ（写真部分）に9割型被った状態で広告が表示されてしまうので、無料版のままでは使えませんでした。
二つ目、なんか明るい明るい色にしたかった。
あとで色は変えましたが、デフォルトのままでも明るい感じの緑でいいな～と思ってました。
三つ目、誰か使ってたのをだいぶ昔に見た。
このデザインテーマ使ってた方のブログをいつ高に見たことがあって、それがずっと印象に残っていたのです。テーマに印象を持っていかれたので、どなたのブログなのかまでは記憶にありませんでした。笑
こんな感じでした。このテーマを提供してくださった方のサンプルのブログにカスタマイズ方法とかいろいろ書いてあったので、それを参考にして、他の方のブログとかもみていろいろいじってみました。
ZENO-TEALを使う気になった同士は参考にしてみてください。
テーマのカラーを変更
デフォルトではカラーが緑でしたが、僕は青に変更しました。
そのままの色でも全然良かったんですが、変更の方法が乗っていたので、そのままは面白くないかなと思って。それに、さっき言った、昔見た印象をくれた方のブログは色がデフォルトのままだったので、変えようかと。（べ、べつにデフォルトのままだったからってディスってないですよ！！笑）
コードはデザイン設定からのカスタマイズからのデザインCSSのところにこれを記入です。
/* メインカラー 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:#03A9F4;}
.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:#03A9F4;}
.archive-heading::before, .entry-content h2::before
{border-top-color:#03A9F4;}
.entry-content h3
{border-left-color:#03A9F4;}
ul.table-of-contents, .page-index .pager a, .page-entry .pager span
{border-color:#03A9F4;}
@media screen and (max-width: 480px){
.entry-content h2
{border-bottom:3px solid #03A9F4;color:#03A9F4;background-color:transparent;}
}
/* 濃い色 700 */
#globalheader-container, .zeno-menu li a:hover
{background:#0288D1;}
.entry-content p a:visited {color:#0288D1;}
/* 薄い色 300 */
.page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before
{background:#4FC3F7;}
このコードの中にいくつか＃から始まる暗号みたいなのあるじゃないですか。メインカラーには７つ、濃い色ってところに２つ、薄い色ってところに１つ。そこに好きなカラーのコードを入れるだけでいいらしい。エンドユーザーに優しすぎる。
今紹介しているコードに記入されているのは僕が使っている色のコードですね。
コードはここでわかります。
↓ ↓ ↓ ↓ ↓ ↓
Color - Style - Material Design
関係あるかわからないけど、色の濃さの数字も一応対応させときました。３００とか５００とか。もしかしたら変えなくてもいいところなのかもしれないけど。
フッターになんか追加
ブログの一番下になんか書き込めるようにしました。
AboutとかCreatorとか。
これもサンプルブログに記事として詳しく説明してくれています。
デザイン設定からのカスタマイズからの、フッターにHTMLの追加です。
僕のはコードはこれです。
<div class="three-footer">
<div class="footer-1">
<div class="footer-h"><i class="blogicon-help-alt lg"></i> ABOUT</div>
<p>まとまりも統一性も感じられない個人的な趣味Blogです。基本的に何でもありの雑記です。とりあえず思ったこと、挑戦してみたこと、体験したことを書いています。 </p>
</div>
<div class="footer-2">
<div class="footer-h"><i class="blogicon-account lg"></i> CREATOR</div>
<p>製作者：本間 郭鳳（ほんまかくほう）</p>
<p>道産子。小樽市出身。小学校から高校までは野球バカ、高校卒業以降はただのバカ。2年の浪人を経て京都の同志社大学文学部英文学科へ入学し、めでたく英語バカに転向。2017年4月からのベトナムでの長期海外インターンシップを機にブログを始めました。 </p>
<p>座右の銘：なんとかなる</p>
</div><div class="footer-3">
<div class="footer-h"><i class="blogicon-pen"></i>STATUS</div>
<p>レベル：２４ / １００</p><p>攻撃力：１５０ / ５００</p><p>守備力：０ / ５００</p><p>忍耐力：４００ / ５００</p><p>英語 ：２００ / ５００</p><p>日本語：１００ / ５００</p><p>運 ：９９９ / ５００</p>
</div>
</div>
とりあえずデフォルトの参考にして適当に法則見つけて編集しました。（笑）
使われているアイコンのコードを調べて、どのコードがどこに組み込まれているのか探してそこを書き換えたら変更できましたしました。
コードも詳しく教えてくださっています。神かよ。
例えば、CREATORのところの人物のシルエットみたいなアイコンのコード（この記事ではコードというところじゃなくてクラス名というところを使いました。）は
blogicon-account
なので、それが組み込まれているところは
<i class="blogicon-account lg">ですから、この中身を変えれば変更できます。
多分改行は<p></p>で改行したいテキストを挟めばいいです。
とりあえず最初にやったのはこんな感じでした。
また次回に、グローバルナビとかヘッダー下のおすすめ記事とかのカスタマイズ方法を書きますね。
このデザインテーマ使いたいという同士は参考にしてみてくださいね。
