あいまいみーのきたろぐ

「できる人」よりも「できた人」を目指すブログ

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

f:id:imyme_999:20170819043129j:plain

こんにちは、あいまいみー( @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

 

 

シェアボタン

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

 

 

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

f:id:imyme_999:20170817150551j:plain

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

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

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

www.foxism.jp

 

 

Milliard関連ページ

corp.shisuh.com

 

 

囲み枠

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

saruwakakun.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

 

 

 

気になるカスタマイズ

吹き出し

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

www.foxism.jp

 

 

囲い

これ良すぎます。ぜひどなたか実装してください…
FOXISMさん、優秀すぎやしませんか \(^o^)/

www.foxism.jp

 

 

 

関連記事表示

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

めっちゃ良い感じになること間違いなしなので、みなさんぜひ実装ください \(^o^)/

www.notitle-weblog.com

 

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

www.notitle-weblog.com

 

 

 

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

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

www.notitle-weblog.com

 

 

 

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

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

いろんな記事を見てお話を聞き、「この本が良いのかな?」という本をメモしておきます \(^o^)/

 

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

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

 

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

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

 

 

デザインの基礎

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

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

www.baconjapan.com

 

 

 

おわりに

さて、本日の記事はいかがだったでしょうか。

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

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

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

めっちゃ喜びます。

 

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