クズ大学生の本気

完全補欠のクズブロガーの雑記

スポンサーリンク

【ブログ初心者向け】ブログ初心者が初心者にオススメする はてなブログデザイン! 

みなさんこんにちは

しのです。

 

ブログ楽しんでいますか?

 

f:id:wilknsangr:20170819120135j:plain

 

ブログのデザインを変えると

ブログはもっと楽しくなります!

 

 

 

今回はわたしの使った

ブログのデザインサイト

紹介していきます。

 

初心者向けが多いので

簡単にデザインすることができます!

 

それでは!はじめていきます!

 

この記事は

はてなブログ向けとなっています

 

 

目次

 

 

 

はてなブログデザインの基本の『き』

最初にはてなブログのデザインをする際の

基本を書いていきます。 

 

 

 

デザインにはcssを用いる

 

 

cssとはなんじゃい!?

 

という方はこちらのサイトを読んでください

CSSとは?-CSSの基本

 

簡単にいうとデザインする際の設計図だ。

 

このようなcss

コピー、ペーストしてブログをデザインしていく。

 

 

 

 

次は

パソコン、スマホ別に

コピペする場所を解説していく

 

 

パソコンの場合

 

 

ダッシュボードから

f:id:wilknsangr:20170819093025p:plain

 

 

 

デザインをクリック

 

 

 

f:id:wilknsangr:20170819093050p:plain

 

 

パソコンの場合は

 ここにコピーしたcssを入れていこう!

 

 

 

 

 

 スマホの場合

 

ダッシュボードから 

デザイン

 

 

f:id:wilknsangr:20170819093139p:plain

スマホのアイコンをクリック

 

 

 

 

f:id:wilknsangr:20170819093159p:plain

 

 

記事上や記事下にcssをペーストしていきましょう 

 

 

 

スマホ内のスマホデザインをするときに

注意点がひとつ!

 

 

 

 

引用

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

h1 {
border-bottom: double 5px #FFC778;
/*線の種類(二重線)太さ 色*/
}

こちらは見出しデザインを変えるcss

 

これをパソコンの「デザインcss」内に入れると問題なく使えるのだが

 

 

スマホデザインをするときに

このcssを使うと変更されるどころか・・・

f:id:wilknsangr:20170819093949p:plain

 

このように

よくわからない文字だけが出てくる

 

 

 

 

 

f:id:wilknsangr:20170819094026p:plain

記事上内にもしっかりコピペしたはずなのに・・・

 

 

 

 

 

ここで先ほどコピペしたものの両端に

 

<style></style>

 

という文字を入れて欲しい

 

 

<style>

h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}

</style>

 

 

 

 

 

これを入れると・・・

f:id:wilknsangr:20170819094310p:plain

 

 

 

このように無事デザインが反映されました

 

 

 

 

記事上内のcss欄を見てみると

 

 

f:id:wilknsangr:20170819094408p:plain

 

 

 

なんとなく文字色が変わったことに

気づいていただけたでしょうか。

 

 

文字の変化は

 

 

「これで変更されたよー!」

 

という合図なので

 

 

色が変わっていなかったら

間違えているということ!

 

変更したら要チェック!

 

 

さて

 

基本を覚えたところで

 

これからわたしが使ったサイトを紹介していく。

 

 

 

コピペもあり

本当に簡単なので逃げずに最後まで読んで欲しい!

 

 

 

 

わたしが使ったサイト

続いて

わたしが使ったサイトを

紹介していく 

 

 

 

公式サイトも良い!

 

 

 

色々なサイトを

みる前に

公式サイトデザインを色々見てみよう

 

 

ダッシュボード

デザイン

 

 

 

の順にクリックすると

 

f:id:wilknsangr:20170819095301p:plain

 

このような画面が左側に出てくる

 

 

多くのデザインが無料で使えるので

ここで大まかなデザインを決めても良い

 

 

 

 

 

 

これで満足できないかたは一番下まで

画面をスクロールすると

このような画面になる

 

 

 

f:id:wilknsangr:20170819095322p:plain

 

一番下に

テーマストアでテーマを探すボタンが出てくる

 

ストアと言ってもお金はかからないので

安心してクリックしよう

 

 

 

そうするとこのような画面が出てくる

 

勇気を出して

真ん中の画面上の

 

 

「Brooklyn」

 

 

をクリックしてみよう

 

f:id:wilknsangr:20170819095337p:plain

 

クリックすると

右側にプレビューしてインストールするボタンが出てくる

 

 

f:id:wilknsangr:20170819095354p:plain

 

 

自分のブログにあっていてたらインストールしよう

 

 

f:id:wilknsangr:20170819095409p:plain

 

インストールしたものは

こちらの画面でいつでも変更することができる。

 

 

 

これだけで大まかなデザインは変更できた

 

次は細かいデザインを

変更していこう!

 

スポンサーリンク

 

 

SNSのフォローボタンを変える

 

 

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life

 

次はSNSのフォローボタンを変更するボタン

初期のボタンでは味気ない人はここで変更しよう

デザインもたくさんあるので

きっと自分のお気に入りが見つかるはず!

 

 

カテゴリー欄を作る! 

 

 

はてなブログ スマホページにカテゴリ一覧を表示する方法 - これで直帰率が改善するかも! - いやまいったね!

こちらはスマホ内のブログにカテゴリー一覧をつける方法

 

PCのブログサイトでは

カテゴリー欄がデフォルトでついているのが

一般的だが

 

 

スマホ内のサイトにはカテゴリー検索欄がないので

 

まずはスマホの記事下やヘッダー部分に

設置しよう

 

初めてサイトを訪れてくれた人が

他の記事を読みやすくなる。

 

f:id:wilknsangr:20170819122345p:plain

 

f:id:wilknsangr:20170819122356p:plain

このように

 

クリックすると

自分のブログのカテゴリーが確認できるようになる!

 

 

 

サイドバーにtwitterのタイムラインを表示する!

 

 

【図解あり!】わかりやすいサイドバーにTwitterのタイムラインを表示する方法 - 魂を揺さぶるヨ!

 

最後に

サイドバーにツイッターのタイムラインを表示するカスタマイズ

コピペではないけれど本当に簡単にできる

f:id:wilknsangr:20170819090917p:plain

 

このように

自分のツイートや

他の人が自分に向けてつぶやいたものが

サイドバーに表示される。

 

これは設定画面で

「明るい」

を選んだのだが

 

「暗い」

を選び白い部分を黒くすることができる

 

 

自分のブログイメージに合わせて

カスタマイズしよう

 

変更の仕方は

 

デザイン

サイドバーの順にクリック

 

f:id:wilknsangr:20170819101645p:plain

f:id:wilknsangr:20170819101802p:plain

 

 

一番下のモジュールを追加をクリック

 

f:id:wilknsangr:20170819101849p:plain

 

HTML

 

をクリックして

 

 

タイトルを決めて

下の枠部分にコピーしたcssをペーストして

 

 

 

適用をクリック!

 

 

必ずきちんと反映されているか

確認しておこう

 

 

なかなかオシャレになるのでオススメ!

 

 

本から学ぶのもいい

 

 

はてなブログ初心者は

本を参考にするのもいいかもしれない

 

 

 

 

 

このように

詳しい解説書が出ているので

読んでみよう。

 

デザイン以外にもわかりやすい解説があるので

買っておいて損はない

 

もちろんわたしも買った! 

 

最後に

 

f:id:wilknsangr:20170819120856p:plain

 

このように

コピペでブログをデザインすることができるものが多い

 

私たちブログ初心者は恵まれている!

 

 

感謝して使いましょう。

 

 

www.sinosinogr.com

 

ただし、注意していただきたいのが

 

 

 

グーグルアドセンスを取りたい方は

審査に通ってからデザインすることをオススメする。

 

 

 

ブログ初心者はデザインしすぎて

ブログ内がごちゃごちゃしてい落ちやすくなる!

 

 

 

 

 

 

www.sinosinogr.com

 

こちらにも

様々なデザインをまとめた。

 

 

よかったらこちらも読んで欲しい

 

 

 

最後まで読んでいただき

ありがとうございました

 

 

トップへ戻る