こんばんは、葵です。
ブログのデザインが崩れているのが気になっていた、今日この頃。
ようやくお盆休みをつかって、整えられました。
以前、ブログカスタマイズの記事を書いたのですが、その後もゆるゆるとマイナーチェンジさせて、とりあえず今の形に落ち着きました。
変えたところもあれば、あいかわらず変えていないところもあったりするのですが…
html も CSSもいまいちよくわかっていないわたしが、コピペのみでカスタマイズしてみました。
初心者がブログをカスタマイズしてみた
テーマを変える
はてなproにしたということもあり、proでないと使えないデザインに変えました。
「UnderShirt」のシンプルだけど見やすいデザインは、お気に入りです。
レスポンシブ設定にして、スマホでも同じデザインを使えるようにしてあります。
.categories{
display:none;
}
トップページにカテゴリーが表示されてごちゃつくのが嫌だったので、CSSに上を貼り付けて表示しないようにしました！
スマホで2列表示にする
パソコンでは記事が2列で表示されるのですが、レスポンシブでは画面いっぱいに記事が表示され、どうやら1列表示になってしまうみたい。
2列のほうが見やすいかなと思うので、2列表示に変えました。
トップ画を変更する
ヘッダーにブログのロゴを設定しています。
画像を設定するだけなのに、一気にブログの個性が強くなるので手軽です。
わたしはロゴメーカーで作ったものを愛用しています。
マイナーチェンジで、文字を手書き風に変えました。
サイズは 1000 × 200px
スマホでも「PC版の設定と同じ画像を表示する」にしています。
ここはプロの方にお願いして作ってもらってもいいかも、と考え中。
サムネイルを角丸にする
.page-archive .entry-thumb {
border-radius: 0.7em; /*角の丸み*/
}
#box2 img {
border-radius: 0.7em; /*角の丸み*/
}
記事のサムネイル画像が真四角で可愛くなかったので、角丸に変えました。
小さな変化ですが、柔らかい印象になったと思います。
CSSにぺたっとはりつけるだけ。
グローバルナビの設定をする
スマホでもパソコンでも、トップ画像の下に表示されているメニュー
これがあると、なんか気の利いたブログっぽい気がして設置しています。
シェアボタンにする
シェアボタンも可愛くしたいということで、カスタマイズ！
これは、記事の上と下用。
こちらはサイドバー用に使いました。
Google+がサービス終了したので、Google+のボタンは削除しました。
LINEマーカー風太文字を設定する
ただの太文字が可愛くないので、ラインマーカー風に。
色は自分の好きな色に変えられるので、サイトのカラーに合わせて変更するとよさそうです。
見出しの変更
見出しを可愛く、見やすく変更しました。
「h1」と書かれたところを、大見出しはh3、中見出しはh4、小見出しはh5に変更してCSSに貼りつけるだけ！
簡単なのに印象がかわる、カスタマイズ！
前のページに戻るボタンの表示
はてなブログって次のページボタンがあるのに前のページに戻るボタンがなくて。
ブラウザの戻るボタンで前に戻るから不要かと思うのですが、自分自身をついていたらいいなと思ったので追加しました。
: : : :
引用元の記事が消えていたりしたので、久しぶりにカスタマイズについて記事を書くことにしました。
私が参考にさせていただいたブログを貼っておくので、ぜひ参考にしてみてください。
ブログのデザインが自分仕様になると、なんだか愛着が湧いてくる…!
まだまだ知識がなく、コピペするので精一杯ですが、自分らしいデザインを追求してみたいと思います。
プロにお願いしたほうがいいのかなと思いつつ、お金がないため断念。
すこしずつ勉強して、知識を増やしていきたいと思います。
