I am

日常のちょっとしたキラキラを切り取るブログ

初心者がブログをカスタマイズした10の項目

こんばんは、葵です。

ブログのデザインが崩れているのが気になっていた、今日この頃。

ようやくお盆休みをつかって、整えられました。

 

以前、ブログカスタマイズの記事を書いたのですが、その後もゆるゆるとマイナーチェンジさせて、とりあえず今の形に落ち着きました。

変えたところもあれば、あいかわらず変えていないところもあったりするのですが…

 

html も CSSもいまいちよくわかっていないわたしが、コピペのみでカスタマイズしてみました。

 

初心者がブログをカスタマイズしてみた

f:id:a418:20190815230239j:plain

テーマを変える

はてなproにしたということもあり、proでないと使えないデザインに変えました。

UnderShirt」のシンプルだけど見やすいデザインは、お気に入りです。

レスポンシブ設定にして、スマホでも同じデザインを使えるようにしてあります。

 

.categories{
display:none;
}

トップページにカテゴリーが表示されてごちゃつくのが嫌だったので、CSSに上を貼り付けて表示しないようにしました!

 

スマホで2列表示にする

パソコンでは記事が2列で表示されるのですが、レスポンシブでは画面いっぱいに記事が表示され、どうやら1列表示になってしまうみたい。

2列のほうが見やすいかなと思うので、2列表示に変えました。

 

トップ画を変更する

ヘッダーにブログのロゴを設定しています。

画像を設定するだけなのに、一気にブログの個性が強くなるので手軽です。

f:id:a418:20190815221528p:plain

 

わたしはロゴメーカーで作ったものを愛用しています。

マイナーチェンジで、文字を手書き風に変えました。

 

サイズは 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に貼りつけるだけ!

簡単なのに印象がかわる、カスタマイズ!

 

前のページに戻るボタンの表示

はてなブログって次のページボタンがあるのに前のページに戻るボタンがなくて。

ブラウザの戻るボタンで前に戻るから不要かと思うのですが、自分自身をついていたらいいなと思ったので追加しました。

 

: : : :

 

引用元の記事が消えていたりしたので、久しぶりにカスタマイズについて記事を書くことにしました。

私が参考にさせていただいたブログを貼っておくので、ぜひ参考にしてみてください。

 

ブログのデザインが自分仕様になると、なんだか愛着が湧いてくる…!

まだまだ知識がなく、コピペするので精一杯ですが、自分らしいデザインを追求してみたいと思います。

 

プロにお願いしたほうがいいのかなと思いつつ、お金がないため断念。

すこしずつ勉強して、知識を増やしていきたいと思います。