DIY BLOG In Nagasaki

女の子でも簡単に出来るDIYを紹介していきます!

DIY BLOG In Nagasaki

はてなブログのテーマ【ZENO-TEAL】に変更してやったカスタマイズまとめ

スポンサーリンク

f:id:imuh:20171211161132p:plain

 皆さまこんにちは!みっぷうと申します。

このブログのデザインを大幅に変更したので、まとめてみました。

ずっとカスタマイズしたかったのですが、カスタマイズをやり始めると時間がかかるので、なかなか出来ずにいました。

やっとカスタマイズに成功出来たので、これから同じテーマを使ってカスタマイズする人のためにも記事にしようと思いました!  

スマホからもカード風に表示したい!Wordpressのようなデザインにしてみたい!
こんな風に思っている方、是非同じテーマを使って、カード風のブログにしてみませんか?

 

 

 

ZENO-TEALを使ってカード風のブログに変更した

 

▽ 完成したブログ全体をスクリーンショットしてみました!

f:id:imuh:20171127140922j:plain
f:id:imuh:20171127142122j:plain
パソコンとスマホのスクリーンショット


(スクリーンショット上手く撮れてるか不安なので、もし見にくかったりしたら教えていただけたら助かります。)

パソコンでもスマホでも記事一覧が横に2つ並んでるように表示がしたくてたまりませんでした。でもやり方が分からず、テーマをプレビューしてみてもうまく反映されずお手上げ状態でした。 

 

何で記事をカード風に出来なかったのかは、理由がありました。

 

スポンサーリンク
 

見落としていたポイント

 

POINT

記事一覧の設定を全文形式にしよう!

 

見落としていたのは、設定→詳細設定→トップページの表示形式(PC版)→全文形式にチェックを入れることでした。

 

今まで私は、記事一覧形式にしたまま、プレビューしていたのでうまく反映されていなかったようです。もしZENO-TEALを使うかたは、記事を全文形式にチェックを入れることを忘れないでください!

 

全文形式にチェックすると、カード風に表示することが出来ました!

 

テーマをZENO-TEALに変更してからやること

 

テーマは「ZENO-TEAL」を使用させていただきました。テーマをインストールするだけで、もういじらなくても完璧なカスタマイズのブログに変身できるのでオススメです。(色は初期設定の緑が可愛すぎてそのまま使わせていただいています。)

 

▽ テーマ制作者のorefolder (id:c-miya)さんが「ZENO-TEAL」のカスタマイズをまとめてくれているので、非常に参考になります。

zeno-teal.hatenablog.com

 

ZENO-TEALは、はてなブログを始めた時からの憧れで、ついに上手く反映されたので(全文形式に変更するのを忘れてただけ)、嬉しくてたまりません!

ブログのカスタマイズって1つ間違えるだけで反映されないので、きちんと1つ1つ間違っていないか確認することが大切なんだと感じました!

 

続きを読むを必ず入れよう

 

f:id:imuh:20171127134135p:plain

 続きを読むボタン

 

全文形式にした後は、1記事1記事に続きを読むというのを入れなくてはいけません。スマホのアプリからでは続きを読むを入れることが出来ないので、パソコン表示にしてネットで編集するか、パソコンから続きを読むを挿入してください。

 

記事が多い方は大変な作業となりますが、やり終えて上手く反映された時の感動はたまりませんよ!そして、続きを読むを入れないと表示が崩れる可能性があるので注意してください。

 

テーマのインストール方法

 

ブログの管理画面のデザインを開きます。

f:id:imuh:20171128111948p:plain

するとこの画面になりますので、デザインテーマのボタンをクリックします。

f:id:imuh:20171128111955p:plain

下の方にスクロールすると、「テーマストアでテーマを探す」というところが出てくるのでクリックします。

f:id:imuh:20171128111959p:plain

するとテーマストアに移動します。もし何か変更していて保存していないまま移動すると消える可能性があるので、きちんと保存してから移動しましょう。

上のトップ、人気順、新着順、公式テーマとありますが、人気順をクリックします。

 

f:id:imuh:20171128112005p:plain

すると人気順の色んなテーマが出てきますが、その中から「ZENO-TEAL」を探します。「ZENO-TEAL」が出てきたら、クリックします。

 

f:id:imuh:20171128112011p:plain

クリックするとこの画面になりますので、プレビューしてインストールを押します。そして複数ブログがある場合は選ぶメニューが出てくるので、テーマを使いたいブログを選び、「このテーマをインストールする」という最終画面に移動するので、そこをクリックするとテーマをインストールすることが出来ます。

 

重要!

テーマをインストールする前に必ずバックアップを取っておきましょう!

 

細かいカスタマイズまとめ

 

テーマをインストールして、見出しはそのまま使わせてもらってますが、フォントやフォローボタン、ヘッダー画像の設定などをカスタマイズしたので、参考にさせていただいたサイト様をご紹介します。

 

フォントのカスタマイズ

 

フォントはNorth-Geekさん(id:northgeek)が紹介してくれているフォントをずっと使っています。一目見たときからずっと好きなフォントです。特にアルファベットを打ったときのころんっとした感じがたまりません。

 

www.north-geek.com

 

 

フォローボタンのカスタマイズ

 

このフォローボタンのカスタマイズにも手こずり、Twitterにて助けてもらったりもしました。そして今使用しているフォローボタンは、「いつ俺~いつから俺ができないと錯覚していた?~」というブログを運営されているid:shun_prog0929さんのフォローボタンを使用させていただいております。

 

www.ituore.com

 

 

ヘッダー画像の左右余白を無くす

 

ヘッダー画像を設定したときに、左右に白の余白が出来てしまいどうしたらいいのか分からなくてネットで検索して色々試して上手くいったので、参考になった記事は「月無ことのは日記」のid:tukinasikotonohaさんの記事、「たわしの帖」のid:kimamalistさんの記事を参考にして、設定したら余白が無くなりました。本当に助かりました!

 

www.tukinasikotonoha.com

tawashino.hateblo.jp

 

タブメニューをまとめる

 

以前使っていた「Minimalism」でサイドバーをまとめていたときに参考になった、「はみだしブログ小川の人と人をつなげるお悩み相談サロン」のid:tinger02さんの記事です。

もしサイドバーをまとめたい方は是非参考に挑戦してみてください!感動しました!なお今現在は使用しておりません。

 

www.kokoro-nayami-soudan.space

 

 

ブログで使うイラスト

f:id:imuh:20171124162006p:plainいらすとやさんいつもありがとう!

 

ブログでたまに使わせてもらっているいらすとは、いらすとやのイラストです。テレビでもたまに使われてるのを見るくらいなので、非常に人気があるいらすとやさんのイラスト。ほっこり可愛いので私もいつも使わせていただいております。最近はアイキャッチ画像にも使わせてもらってます。

 

www.irasutoya.com

 

はてなブログで使えるアイコン

 

しろかい!のid:shun9167さんのこの記事は一体何度参考にしたのだろう?と思うくらい見させていただいております。はてなブログで使えるアイコンなので、トップページのメニューのアイコンも使わせていただいてます。FontAwesomeよりも軽い気がするのでオススメです。

 

shirokai.hatenablog.com

 

 

ページ全体スクリーンショットの撮り方

 

f:id:imuh:20171127140922j:plain
f:id:imuh:20171127142122j:plain

△ このブログ全体の写真を撮るときに早速使ってみました。

 

私も先ほど初めて導入してみたのですが、忘れないうちにご紹介します!

 

Chrome拡張機能で拡張するだけで、右上にカメラボタンが常に出ているので、そのカメラボタンを押すだけで画面全体のスクリーンショットを撮ることが出来るのでオススメです。

下の画像でも右上にカメラのボタンがあるのが分かりますよね?(小さっ)

 

f:id:imuh:20171127134931p:plain

 

拡張するというボタンを押したらすぐに使えるようになったので簡単だし、便利だし、オススメなので、全体を撮りたい!という方は試してみてくださいね。

 

▽ こちらからChromeに追加出来ます。

chrome.google.com

 

▽ こちらの記事を参考にさせていただきました。

weekly.ascii.

 

アイキャッチ画像を作成するときに使用しているCanva

 

アイキャッチ画像を作るときはいつもCanvaを使わせていただいてます。Canva以外ではアイキャッチ作れる自信がないくらいCanva大好きです。

最初は結構難しくて、更にスマホからだと上手く出来ずに困っていたのですが、パソコンからやってみると嘘のようにサクサク使えました。無料で、かっこいいお洒落なアイキャッチ画像を簡単に作ることが出来ます

 

www.canva.com

 

画像の圧縮に使用させてもらってるTinyJPGと画像圧縮アプリ

 

一時期ブログの読み込むスピードに悩んでいた時期に圧縮するという技を覚えたのですが、写真をそのまま載せるとブログが重くなってしまい、読み込むのに時間がかかってしまいます。そうすると初めて来てくれた人は読み込みが遅いので、そのまま見ないで帰ってしまうかもしれません。

 

もったいないですよね。そんなことにならないよう、今は写真は必ず圧縮しています。その時にいつも使っているのはパソコンはTinyJPG

 

tinyjpg.com

 

スマホは画像圧縮というアプリから必ず圧縮してから、はてなブログに貼り付けるようにしています。

 

 

まとめ

長くなってしまいましたが、これからカスタマイズを考えている人などのお役にたてたらとても嬉しいです。カスタマイズって難しいと思って出来ない!と思う人も多いかもしれませんが、一度是非挑戦してみてください!

 

私は結構好きなようで、カスタマイズやってる日は時間があっという間に過ぎていきます。ブログカスタマイズの勉強もしたいし、毎日時間が足りないくらいです。

 

またカスタマイズしたら、こちらにちょこちょこ追記していこうと思います!

 

最後までご覧いただき、ありがとうございました!