（2018/2/27 更新）
こんにちは、あいまいみー（ @imyme_999 ）です（´-`）.｡oO
みなさん、ブログカスタマイズしてますか？
私は少し前にやっとデザインを変更しました ！！
Webデザインを勉強したことがない私でもここまで出来ました～～ ！
まだ気になるところがありますが、おいおいデザインしていく予定です。
（ちなみにタイトルも変更してます、また記事書こう。笑）
また、読者さん200人突破しました～～ ｡ﾟ(ﾟ´ω`ﾟ)ﾟ｡
いつも見てくださっている方、はじめましての方、応援ありがとうございます！
応援お待ちしております～～ ( ˘ω˘ )
はじめに
今回は冒頭でお伝えしたとおり、ブログ カスタマイズについてのお話。というより、「あいまいみーのきたろぐ」のカスタマイズメモといったところでしょうか ٩( ‘ω’ )و
（カタカナと平仮名ばかり… 笑 ）
Webデザインを学んだことのない私でもここまで出来ました ＾＾
しかもみなさん褒めてくださるから調子に乗ってしまいます。
それもこれも、優秀なテーマを無料で公開してくださっているデザイナーさんがたくさんいらっしゃるから。みなさま、いつも有難うございます。
はてなブロガーは幸せですよね～～ ( ˘ω˘ )
噂によるとSSL化がどうのこうの言われていますが、はてな運営さんを信じて気にせず進めましょう。
それでは、今回は私がカスタマイズした箇所や気をつけたことなどを公開しちゃいます。
カスタマイズをする前に
まずは準備をしましょう ٩( ‘ω’ )و
CHECK
- 知識を学ぶ
- テストブログを作る（バックアップ）
ちなみにこれだけ！ 笑
それではどうぞ ＼＼٩( ‘ω’ )و //／／
知識を学ぶ
なんとなくの理解でもできますが、時間がかかり効率が悪いです (´°ω°`)
なので必要最低限のことは学んでおきましょう ( ˆoˆ )/
POINT
- 文字の大きさ：
セレクタ {font-size: ◯◯px or ◯◯em} - 文字の色：
セレクタ {color: 色名orカラーコード} - 背景色：
セレクタ {background: 色名orカラーコード} - 線で囲う：
セレクタ {border: 線の太さ 色 種類} - コメントアウト：
/* この中の文章はCSSに反映されません */
「セレクタ」とは
セレクタでは「どの部分のデザインを変えるのか」という適用先を指定すること
サルワカさんのこの記事が優秀すぎます…
これを無料で公開されていらっしゃるのだから太っ腹すぎる ( ˘ω˘ )
〈STEP1～4〉くらいまでをざっと読めば、ある程度の知識がつきます。
あいまいみーは、ざっくりSTEP4まで読みました。実は身体の調子が悪い日などは、一日中読んでたこともあります。休職中の特権… 笑
テストブログを作成する（バックアップを取る）
失敗を前提でカスタマイズしましょう！！
FOXISM（id:c-miya）さんのこの記事がわかりやすいです ！！
大切なことなのでもう一度。
バックアップは必ず取りましょう ( ˘ω˘ )
バックアップさえとっておけば何度でも試行できます。
しかも、いろんなデザインも試せるので便利。
あいまいみーはテーマデザインを悩んでいたこともあり、4個作りました。笑
今までお世話になったデザイン「Minimalism」
PC
スマホ
今までは、こどみす（id:codomisu）さんの「Minimalism」を使用していました。
実際めちゃめちゃ気にいっていまして、デザインも最高でした ٩( ‘ω’ )و
今回はスマホデザインでもお世話になっています ＾＾
レスポンスデザインにも対応してらっしゃり、設定がめちゃめちゃ簡単です。
初心者の方やはてな無印の方にはおすすめです！！
◎テーマデザインはこちら：Minimalism – テーマ ストア
それではカスタマイズをご紹介します！
完成図：PC
完成図：スマホ
テーマデザイン「ZENO-TEAL」
▲出典：はてなブログテーマ「ZENO-TEAL」をテーマストアに投稿しました – FOXISM
今回はFOXISM（id:c-miya）さんの「ZENO-TEAL」を使用させていただきました ！
「あいまいみーのきたろぐ」ではアイキャッチに力を入れているので、カードデザインのブログにずっと憧れを抱いておりました… ( ˘ω˘ )
なので、FOXISMさんには頭が上がりません。
POINT
- 一覧表示にしない
- 「続きを読む」の記事挿入必須
最初、きちんと記事を読めていなくて、デザインが上手くいきませんでした ｡ﾟ(ﾟ´ω`ﾟ)ﾟ｡
書いてくださっていることをしっかり読みましょう。
見落としてしまいがちです！
ちなみに、カスタマイズの記事を熟読したのですが、コードを入れてもカテゴリタグの色の変え方が分からないので、誰かご親切な方いらっしゃいましたら教えてください…
多分、私の入れる位置などが悪いと思うのですが… ｡ﾟ(ﾟ´ω`ﾟ)ﾟ｡
◎詳しくはこちら：ZENO-TEAL – テーマ ストア
カラーパレット
使用したカラー
- メイン（濃）：#769FCD
- サブ（薄）：#D6E6F2
- アクセント：#B9D7EA（未使用）
色味はここから抽出しました。
おしゃれなデザインがたくさんあります ( ˘ω˘ )
（色を選ぶのが苦手な方はこんな方法があります）
macho（@machoMacholog）さんblog.marswee.com
▽ こんなツイートもありました
色の模写の仕方。 pic.twitter.com/R5MC56JOYY
— 天野 雀 (@b0mb00) 2017年11月22日
フォント（その1）
id:northgeek さんのおしゃれフォントを使用させていただきました ＾＾
フォント（その2）
Google Fonts からフォントを選ぶ
シェアボタン
Minimal Green（id:syofuso）さんのデザインを使用させていただきました。
Pocket まであるのがうれしい ( ˆoˆ )/
（ちなみに、テーマデザインのカスタムでは上手くいきませんでした…）
カエレバ・ヨメレバ
えむしてっく（id:mshitech）さんのデザインを使用させていただきました。
これはぜひ、マウスを合わせてみてほしい（上記は画像です。笑）。
思わずクリックしたくなる。
サイドバー：フォローボタン
じょーじ（id:george-gogo）さんのデザインを使用させていただきました。
びよーんと伸びるデザインが最高です ( ˘ω˘ )
色合いもめちゃくちゃ好みです… ！
サイドバー： プロフィール
またまた、FOXISMさんのデザイン。
個性を出すならこれがおすすめです！
画像はもう少し検討したい… ( ˘ω˘ )
「PRO」部分変更
アリーサントワネット （id:alysantwanet）さんの企みに乗っかりました ＼(^o^)／
ちょっとした遊び心ですが、たのしいですよね～～
アリーさんのブログは他にも楽しい記事がいっぱいなので要チェック！！！
サイドバー：マウスホバー
Naoya（@nxworld_net）さんの記事をコピペで実装させていただきました ＾＾
記事下 アイキャッチ＆フォローボタン
こちらもFOXISMさんのデザイン。
最近おしゃれなブログでよくみかけますよね…
私もおしゃれブログの仲間入り！ ということで実装！ かっこよい！
（スマホにもカスタマイズしたいんですが、うまくいかなかったので保留中…）
Milliard関連ページ
囲み枠
サルワカさんのデザインから使用させていただきました。
サイドバーに目次追従
苦労詐欺（id:ztrabbit02）さんの記事を参考にさせていただきました ＾＾
レスポンシブデザインにする際には以下のコードが必要
これきっと @media screen〜 あたりをいじるのかなと思っているのですが、わからぬのです、、、( ´•̥̥̥ω•̥̥̥` )
どなたかご存知でしたら教えてくださいませ、、、😭✨ https://t.co/GHj4KnYt2g
— あいまいみー (@imyme_999) 2018年2月21日
と悩んでいたところ、救世主が現れました…… ｡°(°´ω` °)°｡
宇宙魚（@25_sKy_fiSh_）さんより
@media screen and (max-width: 1200px) {
#sectionListSide {
display: none;
}
}
CSSの一番下（多分重要）にぶち込めば治ると思います_(:3 」∠)_ダメだったら以前の !importantで…— 宇宙魚@はてなブログ (@25_sKy_fiSh_) 2018年2月21日
okutani（@okutani_t）さんより
こんな感じかな。。？@media screen and (max-width: 1200px) {
#sectionListSide {
position: relative !important;
// もしくはここにdisplay: none; とか
}
}目次をどうするのかによって変わりそうです 🙂
— okutani (@okutani_t) 2018年2月21日
感謝過ぎました…… ｡°(°´ω` °)°｡
ほんとうに有難うございましたっ
会話風 吹き出し
フラットデザイン、超 探しました… 笑
アプリーチ カスタマイズ
ゴトー (id:hogehoge223) さんのデザインをお借りしました ( ˘ω˘ )
ページトップに戻るボタン
ええ感じになりました！！
Milk（id:maxminkun）くん有難うっ （´-`）.｡oO
テーマデザイン：スマホ版
ほぼ全て
こどみすさん渾身のデザインを使用させていただきました。本当に素晴らしい…
スマホデザインならこれ以上のカスタマイズ記事はないと思います ( ˘ω˘ )
一部、PCデザインと色を合わせてタイトル画像を作成したりしました。
フッダデザインはぜひ、OMG（id:omg-ox）さんに依頼したいものです…（検討中。笑）
記事一覧
shun（id:shun_prog0929）さんのデザインを参考に少し使用させていただきました。
引用
リスト
North-Geek（id:northgeek）さんのデザインを使用させていただきました。
月別アーカイブ
キュー（id:cucumberking231）さんの記事を参考にさせていただきました。
カテゴリー
カエレバ・ヨメレバ
ぷちゅん（id:ktrw3200）くんの記事を参考にさせていただきましたっ ＾＾
気になるカスタマイズ
吹き出し
やってみたいんですが、まだ手が出せず。
いずれトラちゃんが出てきますよー 笑
囲い
これ良すぎます。ぜひどなたか実装してください…
FOXISMさん、優秀すぎやしませんかっ ( ˘ω˘ )
関連記事表示
SHIROMA T（id:shiromatakumi）さんの素敵すぎるカスタマイズです。
こちらもまだ手が出せず…
めっちゃ良い感じになること間違いなしなので、みなさんぜひ実装ください ( ˘ω˘ )
ちなみにですが、SHIROMA Tさんのプロフィール記事、見に行ったことありますか？
おしゃれすぎて震えたのでぜひ皆さん見てほしい…（勝手な願望）
いちばんお世話になった記事
今回カスタマイズをするにあたり、いちばんお世話になったかもしれません。笑
これから読みたいWebデザインの勉強本
まだまだ勉強不足の私ですが、しっかり勉強もしたいので本も読まないとなーと思いながらなかなか読めずにいます。
いろんな記事を見てお話を聞き、「この本が良いのかな？」という本をメモしておきます （´-`）.｡oO
初心者には持ってこいの本
◎参考：【初心者必見！】Webデザインを習得する上でおすすめの本10冊 | TechAcademyマガジン
ブログに関する本は定番の「沈黙のwebライティング」くらいしか読んでないかなー。それよか人の運営報告が参考になるよ。ヒットした記事とか載せてる人は特に。需要があるネタを知れるからね！
— OMG👁🗨 (@omgoxorg) 2017年8月16日
こちらはマネジメントに関してお聞きしたところ、教えていただきました。
いつも勉強になります ！！
そして、OMGさんにタイトル似合いすぎません？ 笑
すっごいイカツイ感じ… ( ˘ω˘ )
デザインの基礎
ベーコン（id:rororororo）さんのこの記事でも紹介されている本著は、あいまいみーが今いちばん読みたい本なんですが、まだ買えていません…
なぜかって、ハマっちゃうこと間違いなしだから。笑
という記事を書いているうちに、ついに購入してしまいました。
届くの楽しみです ( ˘ω˘ )
おわりに
今回は「あいまいみーのきたろぐ」のカスタマイズメモについてでした （´-`）.｡oO
「カスタマイズしてみたくなったかも！」とか「おつかれさーん」とか「青すぎない？ 大丈夫？」という方は、読者登録、はてなブックマーク、コメントお待ちしております ＾＾
また、Twitterでは絶賛クラゲ化計画回遊中ですので、よろしければお声掛けください ( ˘ω˘ )
めっちゃ喜びます。
それでは、本日はこのへんで。
お付き合いいただきまして、有難うございました ＾＾
Webデザイン・ランディングページ（LP）・ロゴデザイン・名刺・リンクバナー・カラー設計・ライティング（寄稿）など、グラフィックデザイン、DTP、Web まで幅広くお受けしております。
まずはお気軽にご相談くださいませ ( ˆoˆ ) ✧*｡
