好きな事しかしたくない!!

自分に自信がない女性の方へ...。«綺麗»を磨いて自信が持てるようになる美容blog

【超初心者でもできた】ブログテーマZENO-TEAL 私がやったカスタマイズを全てまとめました。

f:id:hasegawa36:20181109091808p:image

いつも読んでいただきありがとうございます。

ブログテーマをZENO-TEALに変更しました!!!!

気軽な感じで変えようと思ってやってみたけどほんとに大変で…。まとめてある記事ってほとんどないし1つ1つ検索し直すのめんどくさくないですか??なので私がやったカスタマイズを全てまとめてみました。

ちなみにめちゃめちゃ機械音痴の私が全てiPhoneでできたのできっと誰にでもできると思いますよ(笑)ただiPhoneだととってもやりにくいのでPCでやることをオススメします。

INDEXから見たい所へと飛んでみてください。

最初に

私が使っているはてなブログのテーマはこちらです。

ZENO-TEAL - テーマ ストア

トップがカード型で見やすく、スッキリとして見えるます。このカード型のトップページにしたかったんです!!ただ、はてなPro限定のテーマとなっているので無料版をお使いの方はご注意ください。

ブログテーマを変える前に準備すること

レスポンシブデザインモードにする。

レスポンシブデザインモードとは、スマホで見てもPCと同じデザインが表示されますよ!!という設定です。

ダッシュボード→デザイン→携帯マーク→詳細設定→レスポンシブデザインモード

記事の編集

①画像を1番上にする。

このテーマは画像を1番上にしないとアイキャッチ表示がされません。1行でも空いてしまうと反映されないので気をつけましょう。このテーマの場合、アイキャッチをほかに設定しても記事の1番上の画像が使用されるのでご注意ください。

②導入文の下に【続きを読む】を入れる。

ブログの記事を書く画面のアイコンで簡単に入れることが出来ます。携帯から見るとアイキャッチ画像とタイトルしか見えませんがPCから見ると導入分が表示されます。これを入れないとトップページから記事に飛ぶことができないので必ず入れてください、!

f:id:hasegawa36:20181109094339j:image

記事を全文表示に変更 記事数を偶数に

ダッシュボード→設定→詳細設定→トップページの表示形式(全文表示)

その下にあるトップページの記事数を偶数にする

f:id:hasegawa36:20181109094810j:image

これで準備はおわりです。ブログテーマをインストールして実際にカスタマイズした方法や参考にしたサイトを紹介します。

テーマカラーの変更

インストールしたばかりのテーマカラーはグリーンになっています。デザインcssを変更することによって自分の好きなカラーにすることが出来ます。

カスタマイズ5:全体のテーマカラーを変更する - ZENO-TEAL

私はピンク系でまとめています。カラーコードはこちらを参考にしています。

WEB色見本 原色大辞典 - HTMLカラーコード

まずはデザインcssをコピーしてメモなどに貼り付けます。そしたら次にカラーコードのサイトから好きな色を選んで#英数字の部分をコピーして#色コードと書かれた部分に貼り付けるだけです。

これで準備ができました。全文をコピーしてデザインcssに貼り付けます。

ダッシュボード→デザイン→スパナマーク→デザインcssに貼り付け→保存

次に記事画面のカスタマイズを紹介します。

私の記事画面はこんな感じです。

f:id:hasegawa36:20181109104934j:image

色コードを変えれば男性でも使えると思うのでぜひ参考にしてみてください。

シェアボタンのカスタマイズ

私が使っているシェアボタンのカスタマイズはこちらを見てもらうととっても分かりやすくまとめられています。デザインがとっても可愛いですよね!!

ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Hatena Blog Theme Custom

記事の上下に貼り付けています。

見出しのカスタマイズ

見出しをカスタマイズすると記事が読みやすくなったりページの雰囲気も一気にガラッと変わるのでオススメです。

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! | NO TITLE

はてなブログでは

大見出し   h3

中見出し   h4

小見出し   h5

となっています。

お好きなカラーにする場合はこちら

WEB色見本 原色大辞典 - HTMLカラーコード

私が使っている色は#9400d3です。見出しを同じ色にするとぐっと統一感が上がるきがします。

囲み線

私はシンプルに点線の囲み線にしています。記事の途中に使うとより大事な部分を強調できてら見やすくなるのでオススメです。

文章を囲む時は、記事を編集するときにHTML編集の画面にしてこちらを貼り付けるだけです。

<div class="box6">

    <p>ここに文章</p>

</div>

こちらで詳しく線の種類や太さ、色について解説してくれています。

<コピペ用>ブログの本文を枠で囲っちゃおう♪ - 生涯、学習していきたい

シンプルで使いやすい囲み線はこちら

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

よりたくさんの囲み線を見たい!!使ってみたい!!という方はこちらの方がURLをまとめて紹介してくださっているので参考にしてみてください。

【ブログで使う】囲み枠のデザイン集。コピペでOkなデザインまとめ - Lust-Life 40代わたしの生き方

こんな感じで記事画面のカスタマイズに参考になるページのURLをまとめてみました。

ブログの画像編集

私はブログの画像編集にはcanvaを使っています。テンプレートやフォントが充実していてとっても使いやすいです!!

f:id:hasegawa36:20181109110528j:image

Twitterのヘッダー用やバナー用、ほかにもInstagramの投稿用やストーリー用などSNS専用のテンプレートがあったりコラージュができたりとっても便利です!!

携帯アプリをダウンロードして使っています。

最後に

私がブログデザインをカスタマイズする時にあれ調べてこれ調べてと色々検索して本当に大変だったので最低限ブログらしくなる程度にまとめてみました。最初のうちはいいかな。と思ったけどやっぱりオリジナルのブログが出来ると嬉しいしブログを書くのが楽しみになりますね!!

まだまだ皆さんのように凝ったデザインは難しくて出来ませんが初心者の方で最低限のカスタマイズがしたいという方の参考になればうれしいです。ぜひやってみてください!!

ブログランキング・にほんブログ村へにほんブログ村 主婦日記ブログ アラサー主婦へ

あなたにオススメの記事↓↓↓

 

www.hasegawasan.work

www.hasegawasan.work

www.hasegawasan.work