Lulu's Travel Note

オーストラリア留学・旅行・仕事・海外生活について

【Zeno teal】ブログデザインのカスタマイズについて解説。

f:id:Lulu-travel:20200301195616j:image

Zeno tealデザインをインストールしたらまず初めに設定したい事項を下記にまとめました。他の方の記事を沢山参考にさせて頂きました!

 

 

Zeno tealにした理由

現在のブログデザインは、Harumiを使わせて頂いていますが、ブログを始めた当初はZeno tealを採用していました。

 

理由は、カード型のデザインがとてもかっこいいなと思ったからです。

 

ブログ初心者なので変なことを書いていたら申し訳ないですがスルーしていただけますと幸いです(-_-;)

 

カスタマイズについて

f:id:Lulu-travel:20200301195941j:image

沢山の方のブログ記事を参考にして下記のカスタマイズを行いました!

 

トップページの表示形式を一覧形式に変更

設定⇒詳細設定⇒トップページの表示形式(PC版)から一覧形式に変更できます。

 

テーマカラーの変更

デフォルトの色から、青色にしたかったので青色に変更しました。

 

その際に、以下のColor Huntを参考にしました。

センスがないので、このようなサイトは本当に助かります(笑)

 

colorhunt.com

 

テーマカラーの変更方法についての詳細は、Zeno tealの下記のデモサイトに記載されています。

 

zeno-teal.hatenablog.com

 

h2見出しの固定解除

デフォルトだとh2の見出しが固定されているので解除しました。

 

/* 固定解除と携帯調整  */
.entry-content h2{
    position: relative;
}

 

下記記事を参考にしました。

 

zeno-teal.hatenablog.com

 

文字のサイズ変更

少し小さくしたかったので下記のコードをCSSに貼りました。

/*文字サイズ変更*/
.entry-content {
font-size:16px;
line-height:1.8em;}

 

タイトル文字の変更

フォントを変更したかったので、Google Fontsで自分の好みのフォントを探しました。

 

fonts.google.com

 

Google Fontsの使い方

すでに使いたいフォントがあれば、ウェブサイトの上にある、サーチからフォントを検索出来ます。

 

f:id:Lulu-travel:20200110230217j:image

 

特になければ、自分の好みのフォントをスクロールしてどんどん探していくことが出来ます。

 

下記のType someで、自分のブログタイトル(私の場合は、Lulu Travel) を入力すれば、下記に表示される文字が自分のタイトルに反映されるので、タイトルに合ったフォントを検索出来ます♪

 

f:id:Lulu-travel:20200110230235j:image

 

好みのフォントを見つけたら

好みのフォントを見つけたら次は、フォントの隣にあるプラスの印をクリックします。

 

クリックすると自動的にHTMLコードを生成してくれるので、下記の手順でブログのデザインを更新します。

 

f:id:Lulu-travel:20200110230307j:image

 

デザイン⇒カスタマイズ⇒ヘッダ⇒タイトル下

<style>
#blog-title {
        font-family: 'Caveat', cursive;
      }
</style>

 

設定⇒詳細設定⇒headに要素を追加

ヘッダーに要素を追加で、下記のHTMLを反映させます。

 

(下記のHTMLは私のデザインの場合なので、自分のフォントのHTMLを貼り付けてください。)

 

<link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet">

 

ヘッダーにトグルメニューを追加

ハンバーガーメニューとも言われていますが、携帯で見たときにトグルメニューで表示されるようにしたかったので、沢山の方のブログ記事を参考にして更新しました。

 

コードを貼り付ける場所は、以下の3か所。

 

  1. ヘッダー
  2. CSS
  3. Headに要素を追加

 

ヘッダー

デザイン⇒カスタマイズ⇒ヘッダ⇒タイトル下に下記のコードを貼ります。

 

カテゴリーは自分のブログに合ったカテゴリー名、及びURLに変更してください。

 

<style>
.menu-toggle{
 font-family: 'Caveat', cursive;
 }
</style>
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>
</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href="URLを貼る">カテゴリー名</a></li>
<li><a href="URLを貼る">カテゴリー名</a></li>
<li><a href="URLを貼る">カテゴリー名</a></li>
<li><a href="URLを貼る">カテゴリー名</a></li>
<li><a href="URLを貼る">カテゴリー名</a></li>
<li><a href="URLを貼る">カテゴリー名</a></li>
<li><a href="URLを貼る">カテゴリー名</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
     $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
</script>

 

CSS

デザイン⇒カスタマイズ⇒CSSに下記のコードを貼ります。

 

 #menu {
 position: relative;
 width: 100%;
 padding-left: 0px;
 height: 40px;
 background: #01579B;/*グローバルメニュー背景色*/
 font-family: 'Limelight', cursive;
}
.menu-inner{
 width: 968px;
 margin: 0 auto;
 height: 40px;
}
#menu li {
 list-style-type: none;
 float: left;
 height: 40px;
 text-align: left;
}
#menu li a {
 padding-left: 15px;
 padding-right: 15px;
 display: block;
 color: #ffffff;/*グローバルメニュー文字色*/
 font-size: 80%;
 font-weight: bold;
 line-height: 40px;
}
#menu li:hover a {
 color: #00DFFC;
 background: #01579B;
 transition: all .5s;
}
.menu-toggle{
 display: none;
}
/*タブレット*/
@media screen and (max-width:768px){
 #top-editarea{
  height: initial;
  background: #01579B;/*MENU背景色*/
  text-align: right;/*MENUの文字の位置*/
  width: 100%;
 }
 .menu-toggle{
  color: #ffffff;/*MENUの文字色*/
  display: inline-block;
  padding: 5px;
  margin: 3px;
 }
 #menu {
  width: 100%;
  display: none;
  height: initial;
  padding: 0;
  margin: 0;
 
 }
 .menu-inner{
  width: 100%;
  height: initial;
  position: static;
  margin: 0;
 }
 #menu li{
  float: none;
  height: 35px;
  width: 100%;
  list-style-type: none;
  background: #01579B;/*リスト文字の背景色*/
  margin: 0 auto;
  text-align: left;/*リストの文字の位置*/
 }
 #menu li a {
  height: initial;
  color: #ffffff;/*リスト文字色*/
  display: block;
 }
 #menu li:hover a{
  color: initial;
  background: initial;
 }

 

Headに要素を追加

設定⇒詳細設定⇒headに要素を追加で下記のコードを貼り付ける。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

トグルメニュー設定の際に、下記の記事を参考にさせて頂きました!!

www.yukihy.com

 

フッターの変更

フッターはシンプルにしたかったので、オーク二さんの下記の記事を参考にして変更しました。

www.okuni.me

続きを読む

記事作成時に続きを読むを追加していなかったので、変更したばかりの時は、クリックできませんでした。

 

その後、記事を作成する時に、続きを読むを含めなければいけないことを知りました(~_~;)

 

まとめ

以上が、Zeno tealに変更した際に行ったカスタマイズ事項です。

参考にさせて頂いた方、本当に有難うございました><