旅と写真を楽しむブログ

プロブロガー気分になれるZENO-TEALのカスタマイズまとめ

ZENOTEALにカスタマイズしたトップ画面(PC)

はてなブログのテーマ「ZENO - TEAL」のデザインを取り入れてブログ全体の雰囲気を一気に変更。結果的にオシャレになって見やすさも上がり、アクセス数も上がりました。

この記事ではカスタマイズをする際に参考にさせて頂いた記事のご紹介とちょっとしたやり方の説明を中心に書いています。

お気に入りのブログデザインにして運営をさらに楽しくしてみましょ~♪愛着もわいて更新したくなりますよ~。

※取り除いたりしているものは理由を書いてありますので参考にどうぞ。

 最初にするカスタマイズ

ブログ「DIY BLOG In Nagasaki」を運営しているみっぷうさんの記事にカスタマイズする方法が分かりやすく書かれていたので本当に助かりました。

記事の最初の方にある3つが特に重要で真っ先に実行。

  1. 全文形式にすること
  2. 続きを読むをいれること
  3. ZENO-TEALの導入方法

他にも細かいカスタマイズのことや画像圧縮サイトのことを紹介して頂けていますのでご確認をお願いします。(追記 現在は他のデザインテーマを利用されていますが記事は残っているので読むことが出来ます。) 

www.diy-mp.com

みっぷうさんのおかげでZENO-TEALを知ることが出来たので本当に感謝です。ありがとうございます。 

作成者さんのサイトを参考にカスタマイズ(PC表示)

みっぷうさんの記事で書かれていたことの作業を終え、次にZENO-TEAL作成者さんの サイトを参考にデザインを形にしていきます。ちょっと困ったところなどのポイントも記載。 

タイトル下によく読まれている記事を表示(2018年2月2日に取り除きました。)

タイトル下におすすめ記事を並べる部分左から順番に僕のブログでよく読まれている記事

ここでは記事のURLと載せたい画像アドレス、記事タイトルを入力するのが主な作業。分かりやすく解説してくれています。

気をつける部分としては画像サイズが223×148だということ。

画像編集ソフトを使用して記事のアイキャッチ画像のサイズを223×148にします。

タイトル下のおすすめ記事のカスタマイズ方法

zeno-teal.hatenablog.com

画像アドレスの確認方法はこちらのブログさんからご確認ください。様々な方法を書いてあります。取得した画像アドレスをコピー&ペーストです。

www.snow0303.com

僕ははてなフォトライフではなくてグーグルフォトを使って画像アドレスを取得しました。その場合はグーグルフォトに223×148の画像をアップロード⇒画像をクリックして1枚だけ表示させる(画像の周りは黒色)⇒画像を右クリックして画像アドレスをコピー⇒画像アドレスをhtmlにペーストします。

追記 取り除いた理由

理由としてはトップ画面をすっきりとさせて最新の記事をまず先に読んでもらいたかったからです。

アクセス数が増えてきたりしたらまた導入する可能性もなきにしもあらず。

タイトル下に重要な記事やカテゴリーを表示

グローバルナビゲーションバーを表示タイトルの下に重要なカテゴリーや記事を

指示に従いコードを入力します。

気をつけるところは3点。

1 コード内の「a href='' ''」の「" "」の間に記事やカテゴリーのURLを入力すること。

2 コード内の「SAMPLE」となっている部分にプロフィールやお問い合わせと入力します。

3 カスタマイズの記事の中では4つしかメニューが出ていないのですが、<li>~~~~</li>の部分を1列コピーしてSAMPLE4の下にペースト。そこで1と2の作業をすれば僕の写真のように5つのメニューが表示されます。

zeno-teal.hatenablog.com

シェアしてもらうためのボタンを設置

記事上にシェアボタンのカスタマイズ記事のタイトル下に表示

とってもいい感じ。

僕は記事上だけでなくて記事の下にも表示させています。

zeno-teal.hatenablog.com

ブログの1番下の部分にプロフィール等を表示

これがやってみたかった

1番下の部分に好きな文章を書きます。

htmlの中で文章が入力されている部分を消して書きたいことを書けばOK。

zeno-teal.hatenablog.com

全体の色を変更(現在は色を青から黒に近いグレーに変えました)

フッター(ブログの1番下)に自分のブログに関してや好きなことを書いている
青色が好き

 

パソコンの全体画像を載せました。

全体の色を変更するときにしたことはcssの色コードと書かれている部分を消して下記の#から始まる数字を入力していきます。(#は1つだけです。)

メインカラーの所にメインの色#3f51b5 濃い色の所に#3949ab 薄い色の所に#5c6bc0。

サイト内で全体を青色へ変える方法がかいてあってそのまま真似をしました。青色が好きですし♪(現在は黒に近いグレーです。)

zeno-teal.hatenablog.com

追記 色を黒に限りなく近いグレーに変更した理由

色を#212121に変更。

周りの色を黒にすることによって写真を目立たせたかったので。

青色は楽しい感じが出てる感じで黒は引き締まった感じがあります。言葉に説得力も増して伝わりやすくなればいいなぁ。

h2の見出しが画面に固定されるのを解除(2018年1月13日に導入)

zeno-teal.hatenablog.com

(h2の見出しが下までついてくるなぁ~。)

今までの記事のh3をh2に変え終えて分かったことで僕はこの機能は使わないなと思って導入。

解決しました。

レスポンシブでh2の見出しデザインをPCとスマホを同じに(2018年2月1日に導入)

レスポンシブにすると見出しのデザインがPCとスマホで違うことが分かって解決策を探す僕。

下記のテーマ作成者さんの記事の下の方にあるコメント欄に同じ悩みを抱えている方が質問をされていて解決方法も書いてくださってます。

zeno-teal.hatenablog.com

ヘッダー画像を横いっぱいに表示(2018年2月2日に導入)

ヘッダー画像を1263×300pxにして作りました。

色々とサイズを試してみてスマホで見た時もバランスが良かったのでこのサイズに決定。

やり方は下記のサイトでコピー&ペーストでやりやすかったです。時間がかかるのはヘッダー画像をどしようかというところ。

tukinasikotonoha.hatenablog.com

ただでさえ楽に設定で来て凄いのにさらにありがたいのはヘッダー画像のどこを押してもトップに戻ってくれるところ。

出来た時はめっちゃ感動したなぁ。

サイドバーや記事下の部分をカスタマイズ

ここからはインターネットで様々なカスタマイズを検索して見つけ、取り入れさせてもらったもののご紹介です。

サイドバーにフォローボタン

見出しはどんな感じになるのか説明びよ~んって伸びて遊び心あります

こちらのサイトさんを参考にどうぞ。

色も淡く優しい感じでマウスを持っていく度にニヤッとします。

georges.hatenablog.jp

追記 2018年1月28日

上記のフォローボタンを記事下にも設定しました。

記事下にこの記事が気に入ったらフォロー(2018年1月28日に取り除きました)

PC上のブログ画面横にあるサイドバーにフォローボタンを設置これオシャレやし憧れてたんです

記事の終わりにアイキャッチ画像とタイトルが入力されます。

写真を多めに使っているブログなのでこういう形で写真が表示されるのが好き。

www.foxism.jp

取り除いた理由

設置していたのですがFeedlyのボタンが機能していないことが分かって訂正の仕方が分からなかったので削除しました。

ページTOPに戻るボタンを設置

記事の下にこの記事が気に入ったらフォローを設置している。アイキャッチ画像が自然に組み込まれてプロブロガー感が増す右下のところをクリックするとブログの1番上に移動

さ~っと上に戻る感じがたまらないです。これ出来た時は嬉しくて何度も押しちゃいましたね。笑

コピペでさくっと作っちゃいましょう。

blog.mshimfujin.net

記事下に関連記事を表示

ページトップに戻るボタンをブログ右下に設置似ているカテゴリーを表示させる

僕はリスト表示を選択して表示させています。すっきりまとまっている感じが好き。

www.suzushin7.jp

はてなブログIDと日付を非表示(2018年1月28日に導入)

記事下にあるはてなブログIDと日付が表示させないようにしました。

すっきりになって嬉しいです。

tamasaburo.com

カテゴリーを階層化(2018年2月2日に導入)

たくさんあったカテゴリーをすっきりまとめました。

www.du-soleil.com

上記の記事の最後の部分。サイドバーを親カテゴリー表示のみにするコードのところフッターのところに入力すると出来ました。

読みやすさ超絶アップの記事内カスタマイズ

書いていて楽しくなるし、お読み頂ける方にとっても良いこと間違いなし。

文字のサイズを大きく(2018年1月18日に導入)

ブログは色々な年代の方がお読みになられるので文字のサイズも大きくしようと調整。

下記のAppismさんの記事の文字サイズを変えるという項目を参考に導入。

www.tarappism.com

文字サイズは18で設定しています。

字が大きくなって僕自身も確認のために読みやすくもなったし、書いている時も目が疲れにくくなりました。

夢は大きく文字も大きく。なんちゃって。

囲み枠を使っておしゃれに読みやすく(2018年2月4日に導入)

30種類ある中から2種類選びました。やり方も書いてくれていてとても分かりやすかったです。

saruwakakun.com

上記サイト「サルワカ」さんから僕が使わせて頂くのはシンプルな囲み枠の項目にある角丸。

この囲み枠で色も変えてみました

もう1つはタイトル付き囲み枠の項目にある枠の途中にタイトルです。

少し工夫して2種類色違いで利用しようとアイデアが浮かんで挑戦。

合わせて読みたい

関連の記事がある時に読んでもらいたいものはオレンジ色。

ブログに載せる画像サイズを考えて決める←こんな感じでね。

ポイント

黒の囲み枠はここが重要ですよってことを強調するために使います。

やっぱりあるとないのとでは記事の感じがかなりちがって表現力も増えますね。

吹き出しでさらに楽しく親しみやすく(2018年2月4日に導入)

ブログ「NO TITLE」さまが分かりやすく解説して下さってくれています。

www.notitle-weblog.com

早速、使わさせて頂きましたよ~♪

いやぁ~楽しいですね♪ここで1つ重要なことを。

ポイント

吹き出し内の画像サイズは1:1の正方形で作成して画像アドレスを貼り付けています。

だいぶん前に正方形でない画像アドレスを貼るとタテやヨコに吹き出しが伸びちゃったんです。(今は大丈夫かもしれない)最初から正方形の画像をつくってやるのが安心です。

ありがたく使わさせて頂きます。

太字の下のマーカーを消す(2018年2月11日に導入)

下記のテーマ作成者さんのサイトのコメント欄に太字の下のマーカーを消す方法が書いてあります。

zeno-teal.hatenablog.com

コメント欄にあるコードをデザインCSSにコピペするだけで太字から黄色のマーカーが消えます。

表を使ってデータを見やすくする(2018年2月14日に導入)

はてなブログの見たまま編集で記事を書いているので下記サイトさんの項目3「HTML」から記事内のHTMLにコピペして貼り付けて入力。

HTMLの意味も書いてくださっていて分かりやすくて助かりました。

はてな記法やMarkdown記法のやり方も書いて下さっています。

www.snow0303.com

表。めっちゃ使わせてもらいますね♪

アフィリエイト関連のカスタマイズ

Amazonさんのデザイン

www.yukihy.com

上記のサイト中のレスポンシブのコードをデザインCSSにコピペするだけでとってもいい感じのデザインに。

スマホ版のカスタマイズ

前のデザインではPCとスマホで分けてカスタマイズをしていたのですが今回は簡単に出来ました。

スマホでの設定はチェックをつけるだけ

はてなブログのダッシュボード⇒デザイン⇒スマートフォン⇒詳細設定⇒レスポンシブデザインにチェック。

この設定をするとPCで設定した同じ表示になりました。(僕ははてなブログproに加入しています。加入していないと出来るかどうかはわかりません・・・。)

表示の確認(現在のデザインとは違います)

記事下に関連記事を表示。5つの似ているカテゴリーの記事が表示されている
スマホTOP(2月2日に取り除いています)

タイトル下のおすすめ記事はスマホでは2つのみの表示になります。

スマホ画面のZENOTEALデザイン画面を横向きにすると3つ表示される(2月2日に取り除いています。)

スマホを横向きに表示すると範囲が広がるので3つ出てきますね。

 

スマホを横に 向けた時のZENOTEALデザイン
記事のページ

関連記事とこの記事が気に入ったらフォローお願いしますをスマホで見て

記事下

(この記事が気に入ったらフォローお願いしますの部分は2018年1月28日に削除。)

 

スマホでのフッターの見え方
フッター

まとめ ZENO-TEALにして大満足

僕はhtmlやcssがかなり苦手。途中で何度も寝て起きて休み休みやっていたのでとっても時間がかかりました。↑のtwitterによるつぶやきは疲れて誤字が・・・。涙

(これでいいんかなぁ?)と思いながらも確認しながらお正月にゆっくりと形にしていきました。

でもだからこそ達成感はありますね。次の日に起きて自分のブログを見た時にニヤニヤしちゃって気分はプロブロガー。やっぱり楽しみながら運営した方が読んでもらえる方々にもきっと伝わりやすいですから。

最後にカスタマイズの方法を書いてくださった皆さま、本当にありがとうございます。また1つブログ運営が楽しくなりました。

僕の記事もこれからカスタマイズする方々の参考になれば嬉しいです。

取り除いたりしている部分もいいなぁ~と感じられるのであれば導入して見て下さいね。

それでは今日も楽しいブログライフを。

関連記事

www.shashintanoshimu.com

www.shashintanoshimu.com

www.shashintanoshimu.com