My Hot News

読者です 読者をやめる 読者になる 読者になる

My Hot News

自由気ままに思ったことを書きます。

My Hot News

なんでもかんでも思ったこと書きます

テーマをJUDEに変更、気に入ってます!

Design

ブログを解説してみても、最初はかなり殺風景です。もちろん本当の最初は、試しに記事を書いてみてどんな風に表示されるのかを確認しました。

やっぱりデザイン面が寂しいよなーってのが感想です。

そこでデザイン面をまず最初に補強していくことにしました。

 

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

既に作られたテーマをいただける

f:id:s0sem0y:20160326114301p:plain

きっとhtmlとかcssとか詳しい人は、デザインの編集から色々できてしまうのでしょう。そうでもない人はテーマストアから頂いてきて、少しずつ編集したほうがいいです。編集をしているうちに、htmlやcssのことも分かってこればいいなという感じで(僕自身がそんな感じでやっていくつもりです)

人気順や新着順でテーマを見られます。

僕はとりあえず人気順から幾つか見てみました。

 

自分のはてなブログを、一旦好きなテーマに変更してプレビューを見ることもできるので安心です。いきなり決定ということではないですので、いろいろ試してから決められる。

 

各テーマの作者さんが、色々なカスタマイズの方法なども公開しているので本当にありがたい(;▽;)

ちなみに僕はスクショにも写っている人気順当時2位のHEY DUDEって描かれてるやつ使ってます。作者さんのブログが非常に観やすかったので。(多分はてなブログのデザインで有名っぽい)

 

ヘッダーの変更

大まかなデザインが決まったら、サイドバーとかヘッダーとかを変えていきました。

しかしこれも参考になるサイトがたくさんあるので基本的にはコピペ。慣れてきてから中身のコードをいじってみればいいのです。

tsukuruiroiro.hatenablog.com

DUDEの作者さんがカスタマイズの方法を掲載しているので参考にしました。ヘッダーの画像は自分で準備してフォトライフにアップロードしておけば好きなものを使えます。

 

まずは下記のコードを、デザインからカスタマイズに行き、ヘッダのタイトル下のhtmlにコピーしておきます。大見出しの部分が僕のブログではMy Hot Newsで、その下の紹介文が中見出しに該当します。自分で好きな文章に変えてください。

<div class="headimg"><h4>大見出し</h4>
<h5>中見出し</h5>
<div class="recommendlist">
<h6><a href="おすすめ記事1のURL">おすすめ記事1のタイトル</a></h6>
<h6><a href="おすすめ記事2のURL">おすすめ記事2のタイトル</a></h6>
<h6><a href="おすすめ記事3のURL">おすすめ記事3のタイトル</a></h6>
</div>
</div>

ちなみにおすすめ記事の表記は、ブログができたてほやほやなので僕は消しています。

<h6> </h6>で囲まれた3行を消してしまうか、コメントアウトしてください。コメントアウトとは<!--  -->で囲まれた部分はhtmlとして読み込まれなくなる機能です。

実際に僕の場合は以下のように入力してあります。

もしもおすすめ記事を載せたくなったら赤字の部分を消せばいいです。 

<div class="headimg"><h4>大見出し</h4>
<h5>中見出し</h5>
<div class="recommendlist">
<!-- <h6><a href="おすすめ記事1のURL">おすすめ記事1のタイトル</a></h6> <h6><a href="おすすめ記事2のURL">おすすめ記事2のタイトル</a></h6> <h6><a href="おすすめ記事3のURL">おすすめ記事3のタイトル</a></h6> -->
</div> </div> 

更に大見出しの部分(僕のブログならMy Hot News)の部分を押すとHomeに戻るようにしたい場合は上のコードの代わりに以下を使ってください。(一番上の行が変わっただけです)

<div class="headimg"><h4><a href="あなたのブログのURL">大見出し</a></h4>
<h5>中見出し</h5>
<div class="recommendlist">
<!-- <h6><a href="おすすめ記事1のURL">おすすめ記事1のタイトル</a></h6> <h6><a href="おすすめ記事2のURL">おすすめ記事2のタイトル</a></h6> <h6><a href="おすすめ記事3のURL">おすすめ記事3のタイトル</a></h6> -->
</div> </div> 

 

次に同じくデザインからカスタマイズで、一番下のデザインCSSに以下をコピーします。これは、ヘッダーの画像を好きなものに変えてくれます。画像のURLの部分を好きな画像のURLに変えてください。

 

URLはフォトライフにアップロードした画像クリックして開いてからを「右クリック⇛画像のアドレスをコピー」を選んでください。(フォトライフで画像を開いた状態だとアドレスバーのアドレスは、フォトライフのアドレスになっています。画像右クリックからが確実です

.headimg { background-image: url("画像のURL") }

これで大体見た目は良くなると思います。(JUDEが元々綺麗ですしね)