目指すはスローライフ

研究職の夫と医療職の妻のブログ。良質な生活を追い求める理系健康オタク夫婦の日々。

目指すはスローライフ

【カスタマイズ一覧】ブログデザインをZENO-TEALに変更!

f:id:mezasuhaslowlife:20190116215415p:plain

 

どうも、ぴーすけです。

 

以前から読者になってくれていた方々は「別ブログ!?」って思ったのではないでしょうか。

驚かせてしまって申し訳ございません。

急遽ですが、このたびブログデザインを一新させて頂きました。

 

 

 

デザイン変更のきっかけ

私たちの最近の趣味は先輩ブロガー達のブログを読みあさること。

 

最初はどんな記事を書いているのかなって諸先輩方のブログを参考にしていました。

それが次第にブログデザインに目がいくようになり、気づけば夫婦ともにカード型デザインのブログがカッコいい!と思うように。

 

そんな中、改めて自分たちのブログを見返すと、、、

 

ダサっっ!!!

 

そんなわけで重い腰を持ち上げてデザインを変更しました。

 

ブログテーマ変更

「Minimalism」から「ZENO-TEAL」に変更しました。

 PCに関して全くの初心者である私が自分でカード型デザインにするなんて無理!というわけで、色々な方が使っているZENO-TEALをインストールすることにしました。

 

ちなみにテーマ変更前はこんな感じ。

 

f:id:mezasuhaslowlife:20190112023659p:plain

f:id:mezasuhaslowlife:20190112023759p:plain

 

テーマ変更後カスタマイズすること5時間。時刻は深夜4:00。

(長い時間、カスタマイズ中でブログデザインが壊れていました。その間に訪れてくれた方には大変申し訳なかったです。。)

ようやく完成したのがこちら!! 

f:id:mezasuhaslowlife:20190112024023p:plain

f:id:mezasuhaslowlife:20190112024115p:plain

 

だいぶ垢抜けた感じになったのではないでしょうか?

ちゃーすけが100点満点くれたので良しとしました。

 

カスタマイズ前にテストブログを作ろう

私のような初心者はカスタマイズすると必ずと言っていいほどデザインが壊れます。

テストブログを作っておけば、テーマを変えたりカスタマイズを変えた時にどういった修正を加えなければいけないかが事前に分かります。

ブログデザインを変更する前には必ずテストブログを作りましょう。

 

作り方は、、

 

①ブログデータをエクスポートする

ダッシュボード>設定>詳細設定>エクスポートで「記事のバックアップと製本サービス」をクリックしてエクスポートします。エクスポートが完了すると「ダウンロードする」ボタンが表示されるのでクリックします。MT形式のテキストファイルが作成されるので、デスクトップにでも保存しましょう。

 

②新しいブログを作成する

ダッシュボード>マイブログ>新しいブログを作成するをクリックして、テキトーなURLを入力して「ブログを作成」をクリックしましょう!

この時、公開範囲を自分のみにしてください!!!

コピーブログをGoogleさんが見つけてしまうと同じブログが二つあると認識して、どちらかが真似をしたとか判断されるといいことありません。必ず自分のみ公開にしてください。

 

③新しいブログにデータをインストールする

テストブログのダッシュボード>インポート画面でMobile Type形式を選択して①で保存したテキストファイルを読み込みましょう。

読み込めたら「文字コード確認へ進む」をクリックして「UTG-8」にチェックを入れて「インポートする」をクリックします。

 

④完成!

これでテストブログが作成できたはずです。

あとはお好きなブログテーマをダウンロードしたり、カスタマイズして自分好みのブログを作りましょう。

テストブログで動作を確認して問題なければ、本ブログに変更内容を移します。

 

カスタマイズした部分

ヘッダー画像

真っ先に変更したヘッダー画像です。

以前のヘッダー画像はブログ開設2週間ほどたったある日私が思い立って作成したものです。

思えばこの画像も深夜テンションで作ったものでした笑

そんな想い出深いものでしたがブログ1ヶ月たった頃からかこのヘッダー画像のせいでブログ全体が芋臭いのではないかと思い始めました。

f:id:mezasuhaslowlife:20190110142602j:plain

 

そこで平日にこそこそデザイン案を考えて、ちゃーすけに提案したのがこちら!

f:id:mezasuhaslowlife:20190110222119j:plain

 

ちゃーすけ「90点!!!」

90点なら十分合格点な気がしますが、ちゃーすけが100点満点と言わないときは何か明確に気に食わないところがある場合です。

早速聞いてみると、フォントがダサいと。日本語がダサいと。

おいおい!俺らのブログタイトル「目指すはスローライフ」だぞ。って思ったのはここだけの話。

英語すると「Aim for Slow Life」「The purpose is Slow Life」あたりでしょうか。

日本語と直結させるとどうしてもカッコイイ表現にはならなかったので、

「Be a SLOW LIFE」にしました。

 

f:id:mezasuhaslowlife:20190110231159j:plain

うん。かっこいい。

 

画像はPhontoアプリを使って作りました。

簡単に加工できるので、アイキャッチ画像を作るのにも適しています。

Phonto 写真文字入れ

Phonto 写真文字入れ

  • youthhr
  • 写真/ビデオ
  • 無料

 

テーマ色

 

以前は緑をテーマにしていましたが、赤に変更しました。

理由はヘッダー画像が赤だったからです。笑

 

ZENO-TEALをインストールした直後は緑っぽい色がテーマ色になっていますが、以下の記事を参考にしてテーマ全体を赤に統一しました。

zeno-teal.hatenablog.com

 

ヘッダーグローバルメニュー

 Minimalismのグローバルメニューもよかったんですが、スマホ画面になると途中で切れていまいスクロールしてメニューを見る形式でした。

もっとひと目で全メニューが分かるようにしたい!と思っていたら公式カスタマイズにありました。

スマホ画面になると多段式メニューになるという優れもの。

 

f:id:mezasuhaslowlife:20190113103331p:plain

 

スマホ画面になると二段になります。

f:id:mezasuhaslowlife:20190113104335j:image

 

公式のCSSだと、スマホは3段になる設定になっていますが少し手を加えて二段にする設定に変えました。 「width: 33%;」の数字をいじることで更に変更することもできます。

.zeno-menu{

  -webkit-flex-wrap: wrap;

  flex-wrap:wrap;  /* 多段になるようにします */

}

.zeno-menu li{

  width:16.5%;  /* 普段の1つあたりの幅 */

}



@media screen and (max-width: 780px){

.zeno-menu li{

  width: 33%;  /* 横幅780ピクセル以下のときの1つあたりの幅 */

}

}

@media screen and (max-width: 480px){

.zeno-menu li{

  width: 33%;  /* 横幅480ピクセル以下のときの1つあたりの幅 */

}

}

 

zeno-teal.hatenablog.com

 

ヘッダー下おすすめ記事一覧

私たちのブログの弱点「直帰率の高さ」を改善する一手として、おすすめ記事をヘッダー下に設置することにしました。

 

f:id:mezasuhaslowlife:20190113103645p:plain


頑張って記事書くから、直帰しないでくれ~。。

 

これも下記記事のコードをコピペするだけで簡単に設置できました。

zeno-teal.hatenablog.com

 

背景色変更 

標準だと背景がドットになっており、私の思い浮かべるデザインとは異なっていたのでドットを消して真っ白に変更しました。

 

下記記事の「サイト全体の背景を白く」を参考にしました。

 

www.okuni.me

 

プロフィール画像

 新しいプロフィール画像がこちら。

f:id:mezasuhaslowlife:20190113162045p:plain

これちゃーすけの手作りなんです。

そしてこのポーズが私たち大好きで写真を撮る時なんかはいつもこんなポーズに。

巨人と小人みたいでしょ?

 

作り方はとっても簡単です。

①ダッシュボード>設定>詳細設定>読者になるボタンのHTMLコードをコピーする

②白い紙にイラストを書いて写真をとる

③新しい記事を作って②を貼り付ける

④画像下に自己紹介文をかく。自己紹介文の下に①のコードを貼り付ける

⑤HTML編集にしてコードをコピーする

⑥ダッシュボード>デザイン>カスタマイズ>サイドバー>+モジュールを追加>HTML

HTMLコードを打ち込む箇所に⑤でコピーしたものを貼り付ける。タイトルは「プロフィール」にします。

 

これで上記のようなプロフィールがサイドバーに作成できます!

 

最後に

比較的簡単なカスタマイズを行うことで、理想としていたブログデザインを作ることができました。

ZENO-TEALを作成して下さった方には感謝です。

あなたも2019年心機一転ブログデザインを変更してみてはいかがでしょうか?

 

それではまた!