2018年7月28日スポンサーリンクやっさんです。今日ははてなブログ向けの記事になります!!先日ブログのデザインを一新致しました!前のブログデザインはヘッダー画像にまだ妊婦のイラスト使ってたし↓スマホはヘッダー画像が拡大されて切れちゃってるし、ずっとなんとかしないとなーと思ってそのまま放置しておりました。この度はてなproにしたタイミングでもう一度初心に帰ろう!ということでデザインも思いっきり変えることにしました。カスタマイズ初心者なのでなかなかやりたいことがうまくいかず、かなり四苦八苦して形になるまでに10日もかかってしまいました。なんとか見れるデザインになったので一気にデザイン変えしました。実はまだクリアできていない大きな問題があるのです。←スマホの方なんですが。(原因がわからなくてどうしても直らない泣)今回のカスタマイズを行うに当たって本当にたくさんの方々のサイトを参考にさせて頂きました。皆様の記事がなければ完成させることはできませんでした。本当にありがとうございます!!ここでやっさんが行ったカスタマイズの内容と参考サイトをまとめたいと思います。試行錯誤で初心者が作ったものなのでコードの間違いなどたくさんあるのではないかと思いますが、同じように初心者でこれからカスタマイズをしたいという方、なかなかうまくいかなくて悩んでいる方の参考になれば幸いです。シェアボタン記事下フォローボタングローバルメニューの設置パンくずリストグーグルアドセンス今後の課題とまとめカスタマイズの前にまずはこれは皆さんやっておいた方がいいと思います。デザインカスタマイズをやるときはテストブログで先に試しましょうという話。Green」を使用させていただきました。やっさんのやりたいデザインに合いそうだったこと、作者の方のカスタマイズ記事がわかりやすくそのデザインも可愛かったことで選びました。ストアあとこんなサイトも参考にしました。こんなサイトにしたいなぁの参考www.dosuika.com他にも参考サイトが見れるよbm.s5-style.com※上記はこちらのサイトで見させていただきました。NIMONOISMスポンサードリンク記事幅、余白設定を決める記事幅と余白でも見やすさが変わります!有名サイトの記事幅と余白の平均値はこのようになりました。Green」ではcontent幅1000px,記事幅(main)624px,サイドバー幅336pxに設定しています。サイドバーに広告も貼りやすい設計です。スマートフォン(横幅360px~)でも300pxの広告が表示されるようにしました。いうことで記事幅は624px、余白は40pxで平均と近かったので変更は行いませんでした。フォントサイズを決める記事幅の次はフォントサイズ。フォントの大きさでも読みやすさや印象が大きく違います。こちらの記事で詳しく書かれていました。ブログの行間とフォントサイズをCSSで調整して読みやすいデザインにしようPC、スマホのフォントサイズの変え方はこちらを参考にしました。AppismやっさんはPC、スマホどちらも16pxにしています。テーマカラーを決めるいざヘッダーを作ったりカスタマイズをしていく前に自分のカラーを決めておいた方がいいです。やっさんは下記サイトでイメージをつかみました。Ver2.0配色の基本についてはこちらのサイトを見ました。Imaginationまずはメインカラーを決めます。やっさんは家をリノベーションした際にセルフで壁に黒板塗料を塗ったんですが、その壁の色を自分のテーマカラーにしたいなと思っておりました。́・ω・`)新たにもっと優しいカラーにしてヘッダーも作り直しました。決めたカラーがこの色です。#82c0cd次にベースカラー。白・グレーなどの「明度の高い無彩色・濁色」を選ぶか、「メインカラーの明度を上げてパステル調にする」のがオススメ。Imaginationということでやっさんはベースカラーには白を選びました。最後にアクセントカラーです。アクセントカラーはメインカラーとできるだけ離れた色相を選ぶのがベストだ。補色を採用することもしょっちゅうある。Imaginationやっさんはこちらの色にしました。#FDFF5E子育てブログなのでとっつきやすいイメージにしたいなぁと思っていたのですが、こちらの配色なら優しくてポップな色合いになったのではないかと思います。メインカラー、ベースカラー、アクセントカラーの他に少しだけ色をたしています。違う色を使うとページ全体の印象がバラバラしてしまうので、メインカラーやアクセントカラーを薄くしたり濃くしたりして似た色を使っています。日付、サイドバータイトル文字ボタンの色をメインカラーにした際、文字の色が白だと少し見にくいような気がしたので、より目に優しく見やすくなるように下記の色にしてみました。文字の色はこちらの色にしました。#FDFF5Eリンク文字のカーソルを合わせた時の色リンクにカーソルを合わせた時の色はメインカラーの少し薄い色にしました。人はリンクは青色だと押しやすいそうです。リンクカーソルを合わせた時の色はこちらの色にしました。#9BE3F2リンク訪問済みの色カテゴリなどたくさんリンクがあるので、訪問した人がすでに見たリンク、まだ見ていないリンクがどれかわかりやすいようにリンクを1度クリックすると下記の色に変わるようにしました。リンク訪問済みの色はこちらの色にしました。#647f84トップ画像トップのヘッダー画像も新しいものに書き直しました。やっさんが使用しているお絵かきソフトはこれです。]このような画面です。ちなみにこの記事のアイキャッチ画像もこちらのソフトで作りました。レイヤーも複数作れるし、文字も入れられるし、やっさんが使用するには申し分ないくらいの機能がついています。一度作ってアップロードしてみたのですが、なぜか画像がボケるボケる。たわしの帖PC用に作った画像がこちら。調べたがり、まとめたがり、作りたがりというのはまんまやっさんの性格です。はてなブログへコピペで使えます。Greenサイドバーのタイトルはやっさんの使用したテーマの作者のMinimal-Green(id:syofuso)さんが紹介してくださっているカスタマイズから選びました。上記の記事の中の上下ステッチのデザインにしました。こちらの記事は見出しのカスタマイズとなっていますがサイドバーにも問題なく使えましたよ!ただ、一度設定してみたところ前のデザインの反映が消えませんでした。テーマのCSSと被ってうまく上書きできないときは、リセット用CSSを先に記述し、その後から各見出しのデザインのCSSを追記してください。はてなブログへコピペで使えます。h3」を「.hatena-module-title」に変えてリセット用CSSとして先に記述するとうまくいきました。コードは以下の通りです。0;}また、上下ステッチデザインのコードもサイドバー用に少し記述を変えました。Lab.こちらを参考にしました。文字のカラーを#F5F4EAに背景色を#82c0cdにステッチ部分の太さを2pxにして少し太く。できたコードが以下です。#9BE3F2;}こんな感じになります。#F5F4EA2pxの数字を変えればいいですよ~1pxだったらこんな感じ。1px3pxだったらこんな感じになります。3pxここを変えるだけでも随分雰囲気が変わります。́・ω・)プロフィールサイドバーのプロフィール欄では写真を大きくし、詳細プロフィールを先日書いた自己紹介記事にリンクで飛べるようにしました。ちなみに自己紹介記事はこちらです。こちらのカスタマイズ下記のブログを参考にさせて頂きました。time上記2つのブログではプロフィール欄下部にフォローボタンを設置されているのですが、やっさんは別に「FOLLOW」項目を作成し、そこにボタンを置きました。こんな感じになりました。詳しいやり方は上記ブログを見てみてくださいね!日付のデザイン変更サイドバーと同じくMinimal-Green(id:syofuso)さんのカスタマイズを参考にさせて頂きました。1px;」を15pxに変更して枠に丸みを出しました。TITLE記事中の見出しは上記記事を参考にしました。h3にはこの記事の中の見出しタイプ2、h4には見出しタイプ3にしました。色の変更と、見出しタイプ3のラインの太さを2pxから1pxに変更しています。North-Geekリストは上記記事を参考にカスタマイズしました。色はメインカラーの#82c0cdにしています。こんな感じになります。中で太字にしたときに蛍光マーカーを引いたようにできるカスタマイズを入れました。North-Geekこちらの記事を参考に。色はアクセントカラーの#FDFF5Eにしました。こんな感じになります。記事下シェアボタンこちらもMinimal-Green(id:syofuso)さんのカスタマイズ。Greenこのシェアボタンが!めっちゃ可愛い!!!!実はサイドバーのステッチデザインもこのシェアボタンと合わせたいなと思って選びました。ほんとにコピペするだけ。おすすめ!記事下フォローボタンサイドバーに加え、記事下にもフォローボタンを設置しました。記事下はゆきひーさんの記事からコピペさせていただきました。記事の通りにコピペしてみたら、、、こんな感じに;すでに入れているサイドバーのフォローボタンのデザインが干渉してしまっていたようです。そこでかなーーーり時間をかけていろいろ調べたりしてやっと原因がわかりました。classに同じ名前が使われていたんです。class=のあとの名前が“follow-btn”と全く同じになっています。(他の記述もほとんど同じですが;)そこで名前を片方はfollow-buttonに変更。CSSの方の名前も忘れないようにすべて変更します。するとうまくいきました!グローバルメニューの設置こちらもMinimal-Green(id:syofuso)さんの記事を参考に。Green色などは変更してます。そのままだとメニューが端に寄ってしまっていたので、メニューの横幅を均等幅にしました。こちらの記事を参考にしました。http://www.yukihy.com/entry/dropdown-toggle-menu#グローバルメニューの横幅を均等幅にするパンくずリストパンくずリストはSEO的にも設置しておいた方がよさそうだったので、カテゴリをいろいろと修正するのは面倒でしたが頑張って設置しました。こちらの記事を参考にさせて頂きました。太陽がまぶしかったから記事下にパンくずリストが表示されるようにしてます。́・_・`)上記サイトをもう一度確認して設置し直す予定。今後の課題とまとめここまで長かったーーーー!カスタマイズ自体もかなり時間がかかったのですが、この記事を書くのにもかなり時間がかかってしまいました。今までのカスタマイズはできるところだけとりあえず、、という感じだったので今回初めてしっかり腰を据えて取り組みました。しては私頑張ったんじゃないかなと思います。́・ω・`)回遊率を高めるためにも必須かと思うので早めに入れたいと思います。アドセンス今は前のブログのデザインでとりあえず入れたものを残しているだけになっているので、きちんと設置しなおしたいと思っています。希望としては記事下にレクタングル広告を2つ並べたい!カエレバのリンクのボタン化カエレバのAmazonや楽天へのリンクをクリックしやすいようにボタンにしようと思っています。カエレバのデザインを「Amazlet風-2」にしないといけないようで、これまでのカエレバも貼りなおさなければならないので躊躇しております。この前全部貼りなおしたところだったんだよ、、、(-.-)そしてお次はスマホのカスタマイズ記事も書きます、、、!また時間かかりそうですがーー|д゚)スマホはPC以上に悩んだのでそのへん書いていけたらと思います。当ブログは以下アカウントより読者登録して頂けます。Twitterでは更新情報の他、ブログ運営に関する試行錯誤や毎日家事・育児をこなす中で心に留めたいことをつぶやいています。気軽に声を掛けて頂けると飛び上がって喜びます。やっさんやっさんたっさんの子育て隊ご挨拶・お知らせブログ2周年を迎えて。PMsatou様コメントありがとうございます。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。人気記事1トコちゃんベルト2カ月使っての感想。view3パナソニック純正クリーナー【N-W1】で洗濯槽を掃除してみました。view4シンプルで使いやすい育児日記7選~育児日記用ノート検討中その2。(14)初心者におすすめ!私はこのライティングマニュアルで収益3倍アップしました。今だけ!30日間無料相談OKHOMEブログカスタマイズはてなブログ1年目の初心者が10日かけて行ったカスタマイズまとめ子育てブロガーやっさん商社で働く30代子育てブロガーです。2016年5月に娘タツ子を出産。面倒くさいことがキライ。子育てパートナーである旦那たっさんと協力して初めての子育てに奮闘しています。頑張らない育児が目標。やっさんたっさんの子育て。