ブログデザインカスタマイズ方法

スポンサーリンク

スポンサーリンク

今回は、サブブログを使ってトップページのカスタマイズ方法を紹介します。

charlottehibi.hatenadiary.jp

 

 

ブログ作成

f:id:UrushiUshiru:20180415230654j:plain

はてなブログのブログ作成のページ「https://blog.hatena.ne.jp/register」にアクセスして、URL、公開の範囲を設定して作成します。

 

f:id:UrushiUshiru:20180415230914j:plain

作成しましたが、これでは殺風景なのでカスタマイズします!

 

テーマの導入

はてなブログのテーマストア「http://blog.hatena.ne.jp/-/store/theme/」にアクセスします。

 

f:id:UrushiUshiru:20180415231247j:plain

 

今回は「Brooklyn」という、このブログでも使用しているテーマを適用します。

同じテーマにした方が管理しやすいからね!

 「プレビューしてインストール」のボタンを押すと適用されます。

「テーマの説明」通りに設定しないとグローバルメニューが表示されないので、ちゃんと説明を読んで設定して行って下さい。

 

 

グローバルメニューのカスタマイズ

/*グローバルメニュー*/
 #global-menu {
 background-color: #444444; /*ナビメニューの両サイド背景の色変更*/
 border-bottom: 2px solid #444444; /*ナビメニュー下部のラインカラー変更*/
 }
 .global-menu-list li a {
 color: #fff; /*ナビメニューの文字色変更*/
 background-color: #444444; /*ナビメニューの背景色変更*/
 }
 #mobile-head {
 background-color: #444444; /*スマホ版 ナビメニューの背景色変更*/
 }
 #blog-title {
  border-bottom: 1px solid #444444; /*ナビメニュー上部のラインカラー変更*/
 }

1. グローバルメニューのカラーを変更するのには、上記のコードの「#XXXXXX」という数値(カラーコード)を弄ってを変更します。

カラーコードについては以下のサイトから好きな色のコードを取得してください。

html-color-codes.info

 

 

f:id:UrushiUshiru:20180416005536j:plain

2.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

 

f:id:UrushiUshiru:20180416005700j:plain

グローバルメニューの色が変わります。

サブブログに設定してるのは濃いグレーなのであまり変化は無いですが・・・。

 

 

 ヘッダ画像の余白を消す

f:id:UrushiUshiru:20180416005700j:plain

はてなブログの管理画面から「デザイン」⇒「スパナマーク」⇒「背景画像」から設定していくと余白が酷い状態になります・・・。

せっかく描いたのに・・・。

 

<pre class="prettyprint lang-css">  /*ヘッダ画像の参照*/
#blog-title {
    color: #ffffff;
    background: url('ヘッダ画像のURL') center 18%;
    background-size: cover;
}

 /*ヘッダ画像の位置*/
#title{
    font-size: 0px;/* タイトル文字大きさ */
    height:350px;/* 画像の高さ */
}

</pre>

そんな時に上記のコードを使用します!!

 

f:id:UrushiUshiru:20180416011428j:plain

1.上記コード11行目の「height:〇〇〇px」の値を変更するとヘッダ画像の表示される高さを変えられますので、適用したい画像によって値を変更してください。

 

 

f:id:UrushiUshiru:20180416005536j:plain

2.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

f:id:UrushiUshiru:20180416124501j:plain

これで一通り、テーマの導入カスタマイズが完了しました。

 

 

スマホ版はてなブログのカスタマイズ(Proのみ)

f:id:UrushiUshiru:20180416125529j:plain

 

 スマホでサブブログを確認してみると、ヘッダ画像しか設定してないので殺風景・・・。

 

f:id:UrushiUshiru:20180416125758j:plain

レスポンシブデザインにすると、PC版ブログのヘッダ画像が適用されて微妙・・・。

スマホ版に対応するようにヘッダ画像作成してないしね!!

そんな時に、複合メニューバーを導入します。

 

 

f:id:UrushiUshiru:20180416130446j:plain

複合メニューバーと言うのは、スマホでブログにアクセスしたときに真下に表示されるメニューバーのことです。

 

複合メニューバーの導入

以下のサイトを参考にして複合メニューバーを設置します。

その中の5つのボタンの場合のコードを修正して設置します。

www.yukihy.com

  

<ul class="category-list">
    <li><a href="https://charlottehibi.hatenadiary.jp/entry/about">ブログについて</a></li>
    <li><a href="https://charlottehibi.hatenadiary.jp/archive/category/%E3%82%B0%E3%83%AB%E3%83%A1">グルメ</a></li>
    <li><a href="https://charlottehibi.hatenadiary.jp/archive/category/%E5%AE%9F%E9%A3%9F%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC">実食レビュー</a></li>
    <li><a href="https://charlottehibi.hatenadiary.jp/archive/category/%E3%81%8A%E5%87%BA%E3%81%8B%E3%81%91">お出かけ</a></li>
    <li><a href="ここにリンク先のアドレス">お問い合わせ</a></li>
</ul>

 1.参考サイトのコードの真ん中辺りにある「<li><a href="URL"></a>カテゴリー</li>」をご自身のブログのカテゴリー毎のURLに書き換えてください。

 

<a class="home-btn" href="homeボタンのURL"><i class="blogicon-home lg"></i><br>HOME</a>

 2.参考サイトのコードの真ん中辺りにある上記のコードの「"homeボタンのURL"」をご自身のブログのURLに書き換えてください。

 

 

.category-list a{
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #444;/*カテゴリの背景色*/
    color: #f0f0f0;/*カテゴリの文字色*/
    font-size: 80%;
}

  3.参考サイトのコードの下の方にある「.category-list a{~}」の8行目9行目のカラーコードを弄って複合メニューバーのカテゴリーの背景色と文字色を変更します。

 

f:id:UrushiUshiru:20180416164116j:plain

複合メニューバーのカテゴリーは上記の赤枠で囲った部分です。

 

 

.btn-area span{
    display: block;
    float: left;
    width: 20%;
    height: 50px;
    line-height: 25px;
    text-align: center;
    font-size: 70%;
    background: #ffd700;/*メニュー部分の背景色*/
    color: #f0f0f0;/*メニュー部分の文字色*/
}

  4.参考サイトのコードの下の方にある「.btn-area span{~}」の9行目10行目のカラーコードを弄って複合メニューバーのメニュー部分の背景色と文字色を変更します。

 

 

f:id:UrushiUshiru:20180416164200j:plain

 メニュー部分は上記の赤枠で囲った部分です。

 

 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

 5.参考サイトのコードの下の方にある、JavaScriptファイルを参照しているコードのhttpの部分をhttpsに変更します。

「src="http://code.jquery.com/jquery-1.9.1.min.js"」

    変更

「src="https://code.jquery.com/jquery-1.9.1.min.js"」 

 

新しく作成したブログだと、はてなブログの仕様が変わり「http://~」から始まる参照先が読み取れなくなったのか、複合メニューが動作しませんでした。

 「https://~」から始まるアドレスに参照できなかったら詰んでたでござる・・・。

 

f:id:UrushiUshiru:20180416171142j:plain

6.はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に変更した複合メニューバーのコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

f:id:UrushiUshiru:20180416171959j:plain

7.これで複合メニューバーの設置は完了です。

 

スマホデザインのカスタマイズ

以下のサイトを参考にカスタマイズしていきます。

以下のサイト通りにカスタマイズすれば問題無いのですが、カラー等変更した場所をピックアップして紹介します。

www.ituore.com

 

記事タイトル・日付の色

<style type="text/css">
/*記事タイトル・日付の色*/
.list-entry-article .date, .date {
    color:#008080; /* 日付の色 */
}
.list-entry-article .entry-title, .entry-title a {
    color:#4444444; /* 記事タイトルの色 */
}
</style>

上記コードで記事一覧の「日付(4行目)」と「記事タイトル(7行目)」の色を変更します。

 

f:id:UrushiUshiru:20180416203327j:plain

 「日付」と「記事タイトル」は上記の画像で指し示した部分です。

 

更新時刻の色

<style type="text/css">
/*更新時刻の色*/
.list-entry-article .entry-footer {
    background:#CC3399; /* 背景色 */
    color:#EEEEEE; /* 文字色 */
}
</style>

上記コードで記事一覧の「更新時刻」の色を変更します。

 

f:id:UrushiUshiru:20180416203905j:plain

 「更新日付」は上記の画像で指し示した部分です。

 

 

 カテゴリーの色

<style type="text/css">
/*カテゴリの色*/
.categories a {
    color:#fffff	; /* 文字色 */
    background:#0099CC; /* 背景色 */
}
</style>

上記コードで記事内の「カテゴリー」の色を変更します。

f:id:UrushiUshiru:20180416204117j:plain

 「カテゴリー」は上記の画像で指し示した部分です。

 

f:id:UrushiUshiru:20180416205347j:plain

以上で、スマホ版ブログのデザインカスタマイズは完了です。

 

まとめ

サブブログ「シャルの甘美なる日々」はこんな感じでカスタマイズしています。

参考になるか分かりませんが、カスタマイズしてみてはいかがでしょうか?

 

次は、会話吹き出しの設置と見出しのカスタマイズについて記事にしようと思います。

 

この記事書くの面倒くさかったでござるよ・・・

 

 

最後まで読んでいただきありがとうございました!