ウォンバットのうきうきくらし手帖

好きなことを好きなだけ

Sponsored LINK

THMLとCSSの違いもわからないような超初心者がはてなブログのデザインを変えてみました



タイトル通り、HTMLとCSSの違いがよくわかっておりません。

 はてなブログではHTML=記事の書体やサイドバーやヘッダー・フッターなどの局所的なデザイン等をいじれるやつ

CSS=ブログデザイン全体をいじれるやつ、HTMLよりも出来ることが多そう

、というような認識です。

 

現在のテンプレートはシンプルで好きですが、少しだけデザインを変えたかったのでネットで検索しながらデザインを変更しました。

 

今回の変更点

  1. GoogleAdSenceのカスタム検索をタイトルの横に設置する
  2. ブログの幅を変更してサイドバーの位置を調整する
  3. 記事の日付を本文の上にする

以上3点です。これをやるのに数時間かかりました。

 

f:id:ak66g:20150403152708j:plain

今回よく使うメニュー

 

GoogleAdSenceのカスタム検索をタイトルの横に設置する

GoogleAdSenceのカスタム検索エンジンをつけました。

広告の設定タブのメニュー、その他のプロダクトからカスタム検索エンジンに申し込ます。そうすると広告ユニットを作るのと同じ要領で検索窓を作れます。コードを取得した後は、デザイン→カスタマイズ→ヘッダ→タイトル下のHTML入力欄にコードを貼り付けます。 

<div align="right">
以下、取得コード

</div>

 

<div align="right">〇〇〇</div>は検索エンジンをブログの右に寄せてねという指示です。何も入力しなければ左側に、centerと入力すれば中央に配置されます。

そのままの状態ですと、ブログのタイトルの下の方に検索エンジンが配置されてしまうので、以下の記事を参考に位置を調整しました。

yoidorepapa.hateblo.jp

 

ブログの幅を変更してサイドバーの位置を調整する

検索エンジンがタイトルの横に配置されたよやったー!と思っていたら、サイドバーがどこかへ行ってしまいました。

よくよく見ると下の方にあります。原因を調べたら、ブログの幅に対して大きい画像等があるとサイドメニューが押し出されて下の方へ行ってしまうみたいです。

検索エンジンを配置したことが原因だということは分かりますが、サイトの左端に置く、という設定をしただけで何でそういう事になるのか原因はわかりません。rightじゃなくて文字間隔の調整とかで位置を決めれば、サイドバーの位置は変わらなかったのでしょうか。こちらは現在、よく分かっていません。

ブログ全体の幅を拡げるにあたっても、同ブログの他の記事を参考にさせていただきました。酔いどれパパさんかゆいところに手が届くし説明がわかりやすくて大変助かりました。

yoidorepapa.hateblo.jp

 

記事の日付を本文の上にする

サイドバーも横に戻ってきて、PCでブログを確認してみましたが、日付が何か切れています。ウィンドウを拡げれば表示されますが、日付のためにわざわざ拡げるのもなーと思い、日付を記事の上に表示させることにしました。

f:id:ak66g:20150403152209p:plain

左端、いつものウィンドウのサイズでは日付が切れて表示されています。

コードなどはこちらを参考に

colorguardteam.hatenablog.com

日付の位置の変更の他にも、編集ボタンの位置の変更、タイトルの文字の大きさ、本文の文字サイズ、各見出しの文字サイズの変更の方法が載っています。

 

日付の位置を変えた結果はこちらf:id:ak66g:20150403153715p:plain

いつものサイズに全てがおさまるようになりました。

 

他にも、ブログのタイトルの位置を微調整したいとかやりたいことは色々とありますが、今のところ方法がわかりません。

CSSやHTMLは細かい設定が出来るのが魅力的ですが、数が増えすぎると理解していない場合、何が何だかわからなくなってしまうのである程度の知識は必要だなと痛感しました。