ブログ運営

はてなブログ カスタマイズ 一覧【備忘録的まとめ】



こんにちは、松坂 澪 (@matsuzakamio)です。本サイト(CHIMI-JYO)をご覧いただき、ありがとうございます。

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

office-2

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

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

でも、だんだん収拾がつかなくなるので、備忘録としてまとめました。

ただ、なんだかハリボテみたいな仕上がり。

そのうち、CSS勉強します・・・

blog-wrighting-skill
良い文章は媚薬【だらだらブログから価値のある記事に】必要なライティングスキルを勉強するためにおススメの2冊ブログを始めたけど、イマイチ収益が発生しないな。 正しい文章の書き方を知らないまま記事を重ねても、なかなか上達できないのが記事を書くライティングスキル。 本記事は、有名ブロガーがおススメしている書籍の中で、内容を実践して本当に効果があったおすすめの本を2冊、紹介します。...
blog-speed-up-2
【煩わしい作業は時短】ブログ作成をスピードアップできる6つのこと【音声入力からショートカット】 私も、ただえさえ文章を書くのが苦手なのに、キーボードの タイピングスピードが遅いため、ブログの記事を作成するスピードがとっても遅...

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

ブログデザイン

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

色:カラーコード

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

 参考  #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

★AMP用CSS(はてなPro)

しっかりと対応できてません。もう少しスタイリッシュにしたい部分が色々あるのですが。

思い切って AMP 非対応にすればいいのかも。

AMP特有のルールがあるので、そのルール違反をしてしまって、SEO的に問題が生じる方が痛い。

 参考  はてなブログのAMPに使える、超簡単なCSSの設定やサンプル集 – わたしと納豆ごはん

 参考  はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – LITERALLY

スマホではうまくグローバルメニューが設定できない。

 参考  【スマホ版】はてなブログのヘッダー部分のカスタマイズ方法まとめ(グローバルナビ・フォント変更・デフォルト表示削除など) – Awesome

レビュー表

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

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

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

もろもろ不要なものを消す(はてなPro)

はてなブログ限定になりますが、不要な表示をもろもろ消す方法です。

 参考  はてなブログのスマートフォン表示から不要な要素を削除する方法 – またろぐ

ブログ移動 対策

ドメインパワーを引き継いだままブログを移転する方法。

はてなブログでmetaタグにnoindexやcanonical設定する方法 – きりんの自由研究

まとめ

blog-coffee

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

というか、はてなブログの CSS 画面、小さくて編集しづらい。こんなもんなのか?標準のものすら知りません。

追記:結局、WordPressに移行しました。ハリボテ感のあるブログをうまくカスタマイズできなかったり、表作成に時間がかかったり、構造化データが解消できなかったりと不満が多くて…

はてなブログからWordPressのJINに変更【JINのメリット・デメリットと不具合】はてなブログからWordPressへの移行 はてなブログに不満が募っていました。 はてなブログのテンプレートは無料で...

文章力は早いうちに磨いておくべき。記事をたくさん書いてからだと修正が大変です。

blog-wrighting-skill
良い文章は媚薬【だらだらブログから価値のある記事に】必要なライティングスキルを勉強するためにおススメの2冊ブログを始めたけど、イマイチ収益が発生しないな。 正しい文章の書き方を知らないまま記事を重ねても、なかなか上達できないのが記事を書くライティングスキル。 本記事は、有名ブロガーがおススメしている書籍の中で、内容を実践して本当に効果があったおすすめの本を2冊、紹介します。...

記事作成スピードをあげたいなーと思っている方は「【ブロガー必見!記事を書くのに時間がかかる…悩みを解消】ブログ作成のスピードアップができる6つのこと」もあわせてお読みください。

blog-speed-up-2
【煩わしい作業は時短】ブログ作成をスピードアップできる6つのこと【音声入力からショートカット】 私も、ただえさえ文章を書くのが苦手なのに、キーボードの タイピングスピードが遅いため、ブログの記事を作成するスピードがとっても遅...
登録すべきASP

▼ブログ関連知識の本▼

ブログ運営の有益な情報まとめ
あなたにおすすめの記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください