Blog

ブログデザイン[ZENO-TEAL]カスタマイズまとめ(あいまいみーのきたろぐ版)

(2018/2/27 更新)

こんにちは、あいまいみー( @imyme_999 )です(´-`).。oO
みなさん、ブログカスタマイズしてますか?

私は少し前にやっとデザインを変更しました !!
Webデザインを勉強したことがない私でもここまで出来ました~~ ‪!

まだ気になるところがありますが、おいおいデザインしていく予定です。
(ちなみにタイトルも変更してます、また記事書こう。笑)

また、読者さん200人突破しました~~ 。゚(゚´ω`゚)゚。
いつも見てくださっている方、はじめましての方、応援ありがとうございます!

応援お待ちしております~~ ‪( ˘ω˘ )‬

はじめに

今回は冒頭でお伝えしたとおり、ブログ カスタマイズについてのお話。というより、「あいまいみーのきたろぐ」のカスタマイズメモといったところでしょうか ٩( ‘ω’ )و
(カタカナと平仮名ばかり… 笑 )

Webデザインを学んだことのない私でもここまで出来ました ^^
しかもみなさん褒めてくださるから調子に乗ってしまいます。

それもこれも、優秀なテーマを無料で公開してくださっているデザイナーさんがたくさんいらっしゃるから。みなさま、いつも有難うございます。
はてなブロガーは幸せですよね~~ ‪( ˘ω˘ )‬

噂によるとSSL化がどうのこうの言われていますが、はてな運営さんを信じて気にせず進めましょう。

それでは、今回は私がカスタマイズした箇所や気をつけたことなどを公開しちゃいます。

カスタマイズをする前に

まずは準備をしましょう ٩( ‘ω’ )و

CHECK

  • 知識を学ぶ
  • テストブログを作る(バックアップ)

ちなみにこれだけ! 笑
それではどうぞ \\٩( ‘ω’ )و ////

知識を学ぶ

f:id:imyme_999:20170809024043j:plain
「ほうほう、ふむふむ、という学び」
ある程度の知識を勉強した方がカスタマイズはしやすいです。

なんとなくの理解でもできますが、時間がかかり効率が悪いです (´°ω°`)
なので必要最低限のことは学んでおきましょう ( ˆoˆ )/

POINT

  • 文字の大きさ:
    セレクタ {font-size: ◯◯px or ◯◯em}
  • 文字の色:
    セレクタ {color: 色名orカラーコード}
  • 背景色:
    セレクタ {background: 色名orカラーコード}
  • 線で囲う:
    セレクタ {border: 線の太さ 色 種類}
  • コメントアウト:
    /* この中の文章はCSSに反映されません */

「セレクタ」とは

セレクタでは「どの部分のデザインを変えるのか」という適用先を指定すること

初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!

サルワカさんのこの記事が優秀すぎます…
これを無料で公開されていらっしゃるのだから太っ腹すぎる ‪( ˘ω˘ )‬

〈STEP1~4〉くらいまでをざっと読めば、ある程度の知識がつきます。

あいまいみーは、ざっくりSTEP4まで読みました。実は身体の調子が悪い日などは、一日中読んでたこともあります。休職中の特権… 笑

saruwakakun.com

テストブログを作成する(バックアップを取る)

失敗を前提でカスタマイズしましょう!!
FOXISM(id:c-miya)さんのこの記事がわかりやすいです !!

大切なことなのでもう一度。
バックアップは必ず取りましょう ‪( ˘ω˘ )‬

バックアップさえとっておけば何度でも試行できます
しかも、いろんなデザインも試せるので便利。

あいまいみーはテーマデザインを悩んでいたこともあり、4個作りました。笑

www.foxism.jp

今までお世話になったデザイン「Minimalism」

PC

f:id:imyme_999:20170817144755j:plain

スマホ

f:id:imyme_999:20170817144812j:plain

今までは、こどみす(id:codomisu)さんの「Minimalism」を使用していました。
実際めちゃめちゃ気にいっていまして、デザインも最高でした ٩( ‘ω’ )و

今回はスマホデザインでもお世話になっています ^^

レスポンスデザインにも対応してらっしゃり、設定がめちゃめちゃ簡単です。
初心者の方やはてな無印の方にはおすすめです!!

hitsuzi.hatenablog.com

◎テーマデザインはこちら:Minimalism – テーマ ストア

それではカスタマイズをご紹介します!

完成図:PC

f:id:imyme_999:20170817151115j:plain

完成図:スマホ

f:id:imyme_999:20170817170712j:plain

テーマデザイン「ZENO-TEAL」

https://cdn-ak.f.st-hatena.com/images/fotolife/c/c-miya/20170311/20170311163208.jpg

▲出典:はてなブログテーマ「ZENO-TEAL」をテーマストアに投稿しました – FOXISM

今回はFOXISM(id:c-miya)さんの「ZENO-TEAL」を使用させていただきました !

「あいまいみーのきたろぐ」ではアイキャッチに力を入れているので、カードデザインのブログにずっと憧れを抱いておりました… ‪( ˘ω˘ )‬

なので、FOXISMさんには頭が上がりません。

POINT

  • 一覧表示にしない
  • 「続きを読む」の記事挿入必須

最初、きちんと記事を読めていなくて、デザインが上手くいきませんでした 。゚(゚´ω`゚)゚。
書いてくださっていることをしっかり読みましょう。
見落としてしまいがち
です!

ちなみに、カスタマイズの記事を熟読したのですが、コードを入れてもカテゴリタグの色の変え方が分からないので、誰かご親切な方いらっしゃいましたら教えてください…

多分、私の入れる位置などが悪いと思うのですが… 。゚(゚´ω`゚)゚。

www.foxism.jp

◎詳しくはこちら:ZENO-TEAL – テーマ ストア

カラーパレット

f:id:imyme_999:20170817150419j:plain

使用したカラー

  • メイン(濃):#769FCD
  • サブ(薄):#D6E6F2
  • アクセント:#B9D7EA(未使用)

色味はここから抽出しました。
おしゃれなデザインがたくさんあります ‪( ˘ω˘ )‬

colorhunt.co

(色を選ぶのが苦手な方はこんな方法があります)

macho(@machoMacholog)さんblog.marswee.com

▽ こんなツイートもありました

フォント(その1)

id:northgeek さんのおしゃれフォントを使用させていただきました ^^

www.north-geek.com

フォント(その2)

f:id:imyme_999:20180205083324j:plain

gigazine.net

fastcoding.jp

Google Fonts からフォントを選ぶ

googlefonts.github.io

シェアボタン

f:id:imyme_999:20170817150447j:plain

Minimal Green(id:syofuso)さんのデザインを使用させていただきました。
Pocket まであるのがうれしい ( ˆoˆ )/

(ちなみに、テーマデザインのカスタムでは上手くいきませんでした…)

design.syofuso.com

カエレバ・ヨメレバ

f:id:imyme_999:20170817172307j:plain

えむしてっく(id:mshitech)さんのデザインを使用させていただきました。

これはぜひ、マウスを合わせてみてほしい(上記は画像です。笑)。
思わずクリックしたくなる。

mshitech.hatenablog.com

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

f:id:imyme_999:20170817150514j:plain

じょーじ(id:george-gogo)さんのデザインを使用させていただきました。

びよーんと伸びるデザインが最高です ‪( ˘ω˘ )‬
色合いもめちゃくちゃ好みです… !

georges.hatenablog.jp

サイドバー: プロフィール

f:id:imyme_999:20170817150529j:plain

またまた、FOXISMさんのデザイン。

個性を出すならこれがおすすめです!
画像はもう少し検討したい… ‪( ˘ω˘ )‬

www.foxism.jp

「PRO」部分変更

f:id:imyme_999:20171106150849j:plain

アリーサントワネット (id:alysantwanet)さんの企みに乗っかりました \(^o^)/
ちょっとした遊び心ですが、たのしいですよね~~

アリーさんのブログは他にも楽しい記事がいっぱいなので要チェック!!!

alysantwanet.hatenablog.com

サイドバー:マウスホバー

Naoya(@nxworld_net)さんの記事をコピペで実装させていただきました ^^

www.nxworld.net

記事下 アイキャッチ&フォローボタン

f:id:imyme_999:20170817150551j:plain

こちらもFOXISMさんのデザイン。

最近おしゃれなブログでよくみかけますよね…
私もおしゃれブログの仲間入り! ということで実装! かっこよい!

(スマホにもカスタマイズしたいんですが、うまくいかなかったので保留中…)

www.foxism.jp

Milliard関連ページ

corp.shisuh.com

囲み枠

サルワカさんのデザインから使用させていただきました。

saruwakakun.com

サイドバーに目次追従

f:id:imyme_999:20171106150912j:plain

苦労詐欺(id:ztrabbit02)さんの記事を参考にさせていただきました ^^


レスポンシブデザインにする際には以下のコードが必要

と悩んでいたところ、救世主が現れました…… 。°(°´ω` °)°。

宇宙魚(@25_sKy_fiSh_)さんより

okutani(@okutani_t)さんより

感謝過ぎました…… 。°(°´ω` °)°。
ほんとうに有難うございましたっ

会話風 吹き出し

f:id:imyme_999:20171106150930j:plain

フラットデザイン、超 探しました… 笑

blog.codecamp.jp

アプリーチ カスタマイズ

f:id:imyme_999:20171106150943j:plain

ゴトー (id:hogehoge223) さんのデザインをお借りしました ‪( ˘ω˘ )‬

www.gamehuntblog.com

ページトップに戻るボタン

f:id:imyme_999:20171121153238g:plain

ええ感じになりました!!
Milk(id:maxminkun)くん有難うっ (´-`).。oO

www.milkmemo.com

テーマデザイン:スマホ版

f:id:imyme_999:20170817170712j:plain

ほぼ全て

こどみすさん渾身のデザインを使用させていただきました。本当に素晴らしい…

スマホデザインならこれ以上のカスタマイズ記事はないと思います ‪( ˘ω˘ )‬

一部、PCデザインと色を合わせてタイトル画像を作成したりしました。

フッダデザインはぜひ、OMG(id:omg-ox)さんに依頼したいものです…(検討中。笑)

hitsuzi.hatenablog.com

記事一覧

shun(id:shun_prog0929)さんのデザインを参考に少し使用させていただきました。

www.ituore.com

引用

saruwakakun.com

リスト

North-Geek(id:northgeek)さんのデザインを使用させていただきました。

www.north-geek.com

月別アーカイブ

キュー(id:cucumberking231)さんの記事を参考にさせていただきました。

www.cucumberking.com

カテゴリー

www.cucumberking.com

カエレバ・ヨメレバ

ぷちゅん(id:ktrw3200)くんの記事を参考にさせていただきましたっ ^^

気になるカスタマイズ

吹き出し

やってみたいんですが、まだ手が出せず。
いずれトラちゃんが出てきますよー 笑

www.foxism.jp

囲い

これ良すぎます。ぜひどなたか実装してください…
FOXISMさん、優秀すぎやしませんかっ ( ˘ω˘ )‬

www.foxism.jp

関連記事表示

SHIROMA T(id:shiromatakumi)さんの素敵すぎるカスタマイズです。
こちらもまだ手が出せず…

めっちゃ良い感じになること間違いなしなので、みなさんぜひ実装ください ‪( ˘ω˘ )‬

www.notitle-weblog.com

ちなみにですが、SHIROMA Tさんのプロフィール記事、見に行ったことありますか?
おしゃれすぎて震えたのでぜひ皆さん見てほしい…(勝手な願望)

www.notitle-weblog.com

いちばんお世話になった記事

今回カスタマイズをするにあたり、いちばんお世話になったかもしれません。笑

www.notitle-weblog.com

これから読みたいWebデザインの勉強本

まだまだ勉強不足の私ですが、しっかり勉強もしたいので本も読まないとなーと思いながらなかなか読めずにいます。

いろんな記事を見てお話を聞き、「この本が良いのかな?」という本をメモしておきます (´-`).。oO

初心者には持ってこいの本

◎参考:【初心者必見!】Webデザインを習得する上でおすすめの本10冊 | TechAcademyマガジン

こちらはマネジメントに関してお聞きしたところ、教えていただきました。
いつも勉強になります !!

そして、OMGさんにタイトル似合いすぎません? 笑
すっごいイカツイ感じ… ‪( ˘ω˘ )‬

デザインの基礎

ベーコン(id:rororororo)さんのこの記事でも紹介されている本著は、あいまいみーが今いちばん読みたい本なんですが、まだ買えていません…
なぜかって、ハマっちゃうこと間違いなしだから。笑

という記事を書いているうちに、ついに購入してしまいました。
届くの楽しみです ‪( ˘ω˘ )‬

www.baconjapan.com

おわりに

今回は「あいまいみーのきたろぐ」のカスタマイズメモについてでした (´-`).。oO

「カスタマイズしてみたくなったかも!」とか「おつかれさーん」とか「青すぎない? 大丈夫?」という方は、読者登録、はてなブックマーク、コメントお待ちしております ^^

また、Twitterでは絶賛クラゲ化計画回遊中ですので、よろしければお声掛けください ‪( ˘ω˘ )‬

めっちゃ喜びます。


それでは、本日はこのへんで。
お付き合いいただきまして、有難うございました ^^

おしごと依頼について

Webデザイン・ランディングページ(LP)・ロゴデザイン・名刺・リンクバナー・カラー設計・ライティング(寄稿)など、グラフィックデザイン、DTP、Web まで幅広くお受けしております。

 まずは作品がみたい ◎まずは相談してみる ◎

まずはお気軽にご相談くださいませ ( ˆoˆ ) ✧*。

POSTED COMMENT

  1. skyfish25 より:

    多分CSS記述欄の一番下に
    .entry-categories{background:#好きな色;}
    ↑を入れれば実装できると思います。間違ってたらすいません(ヽ´ω`)

  2. imyme_999 より:

    宇宙魚 (id:skyfish25)さん
    わざわざ教えてくださり有難うございますっ 。°(°`ω´ °)°。
    早速やってみたのですが、多分何かが邪魔してて実装できなかったです…… もっと勉強しますっ
    本当に感謝です \( ˆoˆ )/ ✧*。

  3. skyfish25 より:

    .entry-categories{background:#好きな色 !important;}ならどうでしょう?もうやっているかもしれませんが…

  4. imyme_999 より:

    宇宙魚 (id:skyfish25)さん
    わわわわわ !!!!!!
    できました~~~~~ 。°(°´ω` °)°。
    そうしてこんな簡単なことができなかったのか……
    有難うございます!!!!
    めっちゃ助かりました 。°(°´ω` °)°。

  5. skyfish25 より:

    やりましたね(ヽ´ω`)bお役に立てて何よりです。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です