おはようございます。ブログの更新が滞ってしまいました。
ブログのデザイン変更とそして思い切ってのブログ名変更
ブログデザインはストアでの人気順のトップでもある【Minimalism】を適用させていただきました。
以前のデザインも良かったのだけど、やはりいちばん人気１位のMinimalismも使ってみようと思ったわけでシンプルなデザインベースにスッキリとした感じでそれでいて弱小ブログを引き立てれるようにカスタマイズしていこうと思った次第です。
こんな弱小ブログにいちばん人気のブログデザインを選んでしまい心が痛む思いですが
どうか・・・使わせてくださいまし。
シンプルなMinimalismだけど標準機能で使用している人は少ない
シンプルなゆえに標準機能のまま使っている人は少なく自分の思い描くカスタマイズがされているなぁと感じました。
そんな私もブログ歴７年目なのでカスタマイズしてますが・・・笑笑
そこで私がこのMinimalismをどのように弄ったかを忘れないうちに備忘録として
そしてこれからデザインを変えることもあるでしょう
そんな方の参考の一つとなれば幸いです。
カスタマイズはコピーペーストで完結します。
先人が苦労されてきてブログにもカスタマイズの仕方が載っているのでほぼコピーペーストで一味ちがうMinimalismになっちゃいます。
ブログ始めた方にも簡単コピーペーストで完結します。
HTMLやCSSとかなんのこちゃわかりません。そんな方もご安心！！
私も無知なのでわかりません。笑
でも設置する場所くらいは認識していますので設置場所を間違いなければとても簡単ですので覚えておくといいです。
画像サイズが合わず申し訳ないのと私はパソコンで作業しているのでスマホレシポンシブに設定してから作業を行ってください。
●管理画面を開くと左側にダッシュボードとありデザインをクリックします。
●クリックした先にスパナのマークがありクリックします。
●クリックした先に赤枠で囲まれた部分に設定したいコードのコピーを貼り付けていきます。
●HTMLコードを貼り付ける場所はヘッダー 記事 サイドバー フッターの位置です。
初心者ありがちなミスなので気を付けてください。
●CSSコードを貼り付ける場所はデザインCSSのところだけです。
ブログタイトル下にナビゲーションメニューの設置とカスタマイズ
ナビゲーションバーはグーグルの評価も高いのでぜひ設置したいところでなので迷わず設置しました。
Minimalismのナビゲーションは公式を引用させていただきました。
ナビゲーションメニューデフォルトは以下の通りてなっていて一旦メモ帳などに貼り付けて作業することをお勧めします。
一気にヘッダー貼り付けて行うと失敗することもあり得ます。
●赤字のURL部分はご自身の表示させたいURLを貼り付けてください。
●青地の部分はアイコンマーク🏠や⚙マークとなるので不要なら削除します。
私は削除してます。
●グリーンの部分はコメント書き込み欄となっています。
★例題 ＨＯＭＥをブログトップを表示させたい場合はブログトップのURLコードを貼り付けコメント欄に「ＨＯＭＥ」または「ホーム」と書き換えます。
<nav id="gnav">
<div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
</div>
</nav>
ナビゲーションメニューのコード貼り付けたのが上の画像となっています。 どうですか? コピペで簡単に完結します。
シンプル過ぎるのナビメニューをカスタムした方法
ただシンプル過ぎると思った私はさらに手を加えることにしたのですが、 参考となる他のブログをいろいろ調べてみましたが・・・・
雑に書かれてる。自分がわかっていればいい。 かろうじて分かるものの肝心な所が抜けてそのコードどこに貼るの? そんなのばっかり検索に引っかかってきます。
読んでいてさらにチンプンカンプンでイライラしまくりでした。。
さてここからが本番ですよ。
上記で設置したナビゲーションバーを好きな色やバーの太さを変更していきます。
メニューバーのカスタマイズ
ダッシュボード→デザイン→スパナマーク→デザインCSSと開いていきます。
下記のコードをコービーしてデザインCSSに貼り付けます。
私が手を加えたのは下記の赤い部分となっています。
また いちばん下の→background:rgba(180,200,100,1); /* 色設定 */の部分は色指定となっていて（）の左から赤系 緑系 青系となってい最後の1は変更していないです。
それぞれの値を変えていくことで同色になったり少し薄い色合いにしたりと変化が楽しめたりします。
/* ナビゲーションメニュー */
#gnav {
border-top: 5px solid #191970; /* ナビゲーションメニューの上の線 */
border-bottom: 5px solid #191970; /* ナビゲーションメニューの下の線 */
margin: 0 0 10px;
background: #191970; /* 背景色 */
font-size: 0;
padding: 0 0 0;
}
#gnav .menu a {
display: block;
color: #ffffff; /* 文字色 */
font-size: 14px; /* 文字サイズ */
font-weight: 800; /* 文字の太さ */
text-decoration:none;
padding: 11px 9px 0px;
height: 40px;
text-align: center;
overflow: hidden;
box-sizing: border-box;
letter-spacing:0px; /* 文字の間隔 */
/* カーソルを合わせた時の背景色が変わるアニメーション */
transition-property: all;
transition: 0.2s linear; /* アニメーションの時間設定 */
}
/* カーソルを合わせた時に背景色を変える */
#gnav a:hover {
background:rgba(180,200,100,1); /* 色設定 */
シンプルだったMinimalismの雰囲気が変わったでしょう。
色の変更を自由に行えるので自分に合ったデザインにするといいでしょうね。
最後に
CSSに貼り付けて少し手を加えるだけで上記の画像になり物足りなりなさに変化が加わり雰囲気が変わったでしょう。
カスタマイズした部分は他にもあるのですが長くなりそうなので今回はナビゲーションバー設置とカスタマイズまでとします。
忘れないうちにまたちょこちょこと書き足していこうと思ってます。
