プロブロガー気分になれる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作成者さんの サイトを参考にデザインを形にしていきます。ちょっと困ったところなどのポイントも記載。 

タイトル下によく読まれている記事を表示

タイトル下におすすめ記事を並べる部分

左から順番に僕のブログでよく読まれている記事

ここでは記事の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

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

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

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

見出しはどんな感じになるのか説明

びよーんって伸びて面白いボタンです

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

色も淡く優しい感じでマウスを持っていくとびよーんと伸びて面白いです。

georges.hatenablog.jp

記事下にこの記事が気に入ったらフォロー

PC上のブログ画面横にあるサイドバーにフォローボタンを設置

これオシャレやし憧れてたんです

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

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

www.foxism.jp

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

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

右下のところをクリックするとブログの1番上に移動

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

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

blog.mshimfujin.net

記事下に関連記事を表示

ページトップに戻るボタンをブログ右下に設置

似ているカテゴリーを表示させる

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

www.suzushin7.jp

スマホ版のカスタマイズ

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

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

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

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

表示の確認

記事下に関連記事を表示。5つの似ているカテゴリーの記事が表示されている

スマホTOP

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

スマホ画面のZENOTEALデザイン

画面を横向きにすると3つ表示される

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

 

スマホを横に 向けた時のZENOTEALデザイン

記事のページ

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

記事下

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

フッター

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

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

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

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

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

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

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