こんにちは、研究職で主婦の松坂 澪(みお) (@matsuzakamio)です。ゆるけみをご覧いただき、ありがとうございます。

ゆるけみでは文才もないマーケティング経験も営業経験もない私が副業ブログを運営していくために調べたことをまとめています。

\ブログネタに困ったら悩みを知ろう/

ママリ-妊娠から育児まで女性向けQ&Aアプリ

ママリ-妊娠から育児まで女性向けQ&Aアプリ

Connehito, inc.無料

ブログ運営

【見やすいブログへ】はてなブログ カスタマイズ 一覧

はてなブログのカスタマイズ

はてなブログのカスタマイズをしてみました。

世の中には頭のいい人がいっぱいいるので、情報があふれており、htmlの知識がなくてもコピペである程度はカスタマイズが可能です。

ですが、カスタイマイズをしていくうちに、だんだん収拾がつかなくなってきたので、備忘録としてまとめました。

ちなみに無料のはてなブログとはてなProでは仕様がかなりちがいます。

無料はてなはSEO的にも不利な部分もあるため、収益性が低くなりがちです。

無料のはてなからはてなProへの移行は作業負荷も大きいので、10記事程度作成したらはてなProに移行したほうがいいと思います。

できれば最初からはてなPro…移行作業は本当に面倒だった…

 関連  ➢ 【はてなPROに移行時】設定すべき変更箇所 まとめ

はてなPro設定まとめ
【はてなPROに移行時】設定すべき変更箇所 まとめ無料のはてなブログからはてなProへ移行した際に設定したことを備忘録的にまとめました。...
この記事では

はてなブログのカスタマイズについてまとめています。

ご不明な点やご質問等がございましたら、お気軽に記事下のコメント欄にコメントください。

はてなブログ カスタマイズ項目

ブログデザイン

見やすさの根本。色々なテンプレートが存在するので、気に入ったものにとりあえず変更しておくことをおすすめします。

色:カラーコード

自分の使用しているテンプレートでメインとなっている色から―。これを知らないと、ちぐはぐな色見になってしまいます。

 参考  #1D3557 – Google 検索

 参考  WEB色見本 原色大辞典 – HTMLカラーコード

見出しデザイン

ついでにh2設定したけれども、h2でもh3でもSEO的には問題ないという記事も見かけたり。

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

グローバルメニュー

Naked グローバルメニュー・トグルメニューが展開しない

この問題、解決してません。

 参考  【はてなブログ】レスポンシブデザインを導入する際に起こった問題点と対処法 – homING

テーマ CONTENTSカスタム

 参考  レスポンシブ対応とグローバルメニューをトグルメニュー化する方法を解説 – DREAMARK

CSS 斜体で蛍光ペン設定

太字は多用しない方がいいらしい…本当はCSSで太字にした方がよいみたいですが…

 参考  【はてなブログ】CSSで蛍光ペンを使ったようにテキストを目立たせる方法! – クリアメモリ

カエレバ・ヨメレバのカスタマイズ

テーマによっては、もうカスタマイズしてあって、変にいじると逆にデザインが悪くなることもあります。

 参考  ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ! – Yukihy Life

 ソーシャルボタンカスタム

あってるかわからないけれども、カウンター消しちゃった。

なので、一部の表示が少し崩れています。

 参考  はてなブログにMaterial Design風のソーシャルボタンを設置する方法 – ウェブ学のすすめ

 参考  はてなブログをコピペでカスタマイズ!おしゃれなシェアボタンのつけ方 – くうねるだす

 参考  おしゃれなシェアボタンをCSS&Webフォントで作ってみた【はてなブログのPC&スマホ用】 – 技術を磨くだいぱんまん

引用枠の表示を変える

これもテーマによっては、もうおしゃれな引用枠の表示になっている場合もあります。

 参考  はてなブログのデザインカスタマイズ方法(簡易版) – TASK NOTES

サイドバーの表示を変える(文章を折り返さない)

文章を折り返さない方が、サイドバーがすっきりするので変更しました。

新聞の見出しと一緒で、冒頭にキーワードを使用した方がいいのかな?

 参考  はてなブログのデザインカスタマイズ方法(簡易版) – TASK NOTES

ヘッダーのコピーライト表記

ヘッダーに©でコピーライト表示をする方法です。

 参考  はてなブログのフッター、フッターメニューまわりのカスタマイズ – Hatena Blog Theme Custom




上に戻るボタンを設置する

結局やめました。スマホからスクロースの際に邪魔になってしまうような気がして。

ボタンが大きすぎるのかな?もう少し小さなものを設置できるようであれば、もう一度検討します。

 参考  はてなブログにTOPに戻るボタンを追加する方法 – TASK NOTES

パンくずリストを設定する

子カテゴリーとか設定してないなー。そのうちですかね。

 参考  はてなブログのカテゴリを階層化する – 生涯、学習していきたい

更新日を自動表示

本当は更新日だけ表示でもいいかもしれません。

 参考  更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください – つばさのーと

 参考  はてなブログで更新日時を自動表示させる方法 – Try Something New

目次の表示・非表示

これも導入やめました。テーマに入っている既存の目次と相性が悪かったので。

うまく複合化できるのであれば、本当を導入したいです。

 参考  はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム – Yukihy Life

レビュー表

レビュー表をみかけました。時間のあるときに導入したい。

 参考  レビューブログに使ってほしい はてなブログカスタマイズ その1:良い点・悪い点のリスト – FOXISM

 参考  レビューブログに使ってほしい はてなブログカスタマイズ その2:自分の評価を星で表示 – FOXISM




まとめ:ユーザービリティの良いブログにしよう

ユーザービリティの良い信頼性の高いブログ

完全に備忘録。選んだテーマによっては、カスタマイズ方法も異なってきます。

ある程度始めてからはてなProに変更すると、結構変更しなければならない箇所が出てきてかなり面倒です。

10記事くらい書いて「ブログ続けられそう!」と思ったら早めにはてなProへ移行することをおすすめします。私は地味に苦労しました…

 関連  ➢ 【はてなPROに移行時】設定すべき変更箇所 一覧

はてなPro設定まとめ
【はてなPROに移行時】設定すべき変更箇所 まとめ無料のはてなブログからはてなProへ移行した際に設定したことを備忘録的にまとめました。...


平凡な会社員主婦ブロガーの損をしないためのMEMO

どこにでもいるふつうの会社員で主婦です。文才もないし、Web関連のIT知識もなくて、マーケティング経験もなしのブログ初心者

【完全初心者】会社員主婦がブログで月20万円の収益が出るまでの1年間に行ったこと

ブログを始めた頃はわからないことがたくさんあって苦労した…

初心者に高いお金を払わせている人になんとなくモヤッとしてるので、自分備忘録をかねて有益そうなブログ関連の情報をまとめています。

副業ブログ トップへ戻る

 

最後までご覧いただき、ありがとうございました。 ご質問等ございましたら、記事下のコメント欄よりご連絡ください。
よかったらシェア&気になったらブクマして後で読んでください。
ぜひ、Twitter(@matsuzakamio)もフォローお願いします。
おさえておきたいASP

https://www.chemi-jyo.com/blog/blog-asp-affiliate-recommended/
この記事のURLとタイトルをコピーする
  

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA