Welcome to Haiji Life!

Thank you for coming for my blog.

はてなブログデザイン変更と素人でも出来たカスタマイズ


follow us in feedly

  当サイトの記事には、広告・プロモーションが含まれます

ブログデザインをテーマCinnamonに変更

先週、ブログデザインを変更しました。

Cinnamon - テーマ ストア - はてなブログ

以前使っていたテーマも気に入ってたのですが、幅が狭い。

広げるとデザインが変になったので諦めてテーマを変えました。

幅が広くなって大満足です。

実はcssとか全然知らない素人の癖に生意気にもカスタマイズしています。

今回は何処をカスタマイズしたか紹介します。

全てはカスタマイズ方法をブログに公開してくださったお陰です。

参考にさせて頂いた各ブログの方々ありがとうございます。

 

可愛いソーシャルボタンを記事上につけた

f:id:haijimama:20150402164406j:plain

私が使っているテーマCinnamonを作られた方が可愛いソーシャルボタンを作られていたのでつけてみました。

コロンと丸い形が可愛かったからだけの理由です。

デフォルトの件数が出ているやつが可愛くないので消して記事下につけてみたのですがバランスがおかしかったので断念しました。

hachibeechan.hateblo.jp

 

素人がパンくずリストをつけた

f:id:haijimama:20150402164829j:plain

パンくずリストを設置するとSEOに良い」と聞いたのでつけてみました。

どうSEOにいいのかよくわかっていません。

でも私自身がパンくずリストの表示から他の記事を探したりするのでアクセスアップにつながるのかな?と思っています。

この方がパンくずリストのコードを作っているのですが、

bulldra.hatenablog.com

こちらの方が設置方法とかカテゴリーの変更まで素人にも出来る様に教えてくれています。

so888.hatenablog.com

記事が多いとカテゴリーを設置するのが大変な作業となるのですが、私はまだ30記事にも満たしてなかったので楽に変更できました。

実は記事下にもパンくずリストをつけてるんですが、なぜか表示されません。

何でだろう・・・

 

目次が自動で表示される

前からどうやって目次を作ってるのかなと思っていたんです。

まさか自動で出るなんて!

この方のコードをまるパクリです。

wepli-dot2.hatenablog.com

設置方法が詳しく書かれていないので補足すると、2つのコードうち上のコードは記事上のカスタマイズ欄に入れて、CSSコードと言ってる下のコードはデザインCSSに入れます。

すると記事を作る時に大見出しを使うと勝手に目次が出来ます。

2つ以上大見出しを使うと目次が出来るようです。(多分・・・)

 

見出しのデザインを変えた

テーマCinnamonでは見出しに何も飾りがついていなかったのでデザインをつけました。

この方のコードをベースにちょっといじっています。

sns-memorandums.hatenablog.jp

何処をいじったかというと文字の大きさと色、アンダーラインです。

参考までにいじった後のコードです。

h3{
font-size: 130%;
margin:10px 0px;
padding:0 0 3px 9px;
border-left:10px solid #CCC;
border-bottom:1px solid #CCC;
}

h4{
font-size: 105%;
margin:10px 0px;
padding:0 0 3px 9px;
border-left:8px solid #ccc;
}

このコードをデザインCSSに入れると私が使っているデザインになります。

ここのサンプル集ののコード内の文字?を抜き出して張替えました。

toshiiy.blog22.fc2.com

 

まとめ

今回の記事は素人でもブログをカスタマイズ出来たぞって事で、半分自慢で記事にしました。

記事を読んで「じゃあ私もやってみよう」って思う人がいたらめちゃ嬉しいです。

私の課題は何のコードを貼り付けたか名前をつけたいです。

後から見て何のコードか、何処から何処までなのかさっぱりわからない・・・

CSSのほうは何とかつけることが出来たのですが、HTML?の方が出来ないので誰か教えて欲しい・・・

それと記事中でおかしい所があれば言って下さいね。

 

 

  ▼ブログ村に参加しています▼

にほんブログ村 ライフスタイルブログ シンプルライフへにほんブログ村 ファッションブログ シンプルカジュアル系へ