2017.11.13はてなブログをスタートして最初にやったカスタマイズと設定をまとめてみました。カスタマイズや設定で迷っている人の参考になればと思います。【必要に応じて】独自ドメインでwwwなしでもアクセスできるようにするまとめ記事の文字色を変更はてなブログはデフォルトだと文字の色が濃いので、グレー寄りの色に変更しています。ほんの少しグレー気味にするだけでも、背景とのコントラストがおさえられてずいぶんと読みやすくなりますよ。【設定方法】はてなブログの管理画面から「デザイン」→「カスタマイズ」→「デザインCSS」とすすみ、次のコードを貼ります。}「#」のうしろにあるのが、文字色の指定です。ここを変えると、お好みの文字色にすることができます。HTMLカラーコード」を参考にするとわかりやすいですよ。記事のうしろにつくコメント欄の設定です。表示にすると、読者の方とコメントのやりとりができます。私の場合はコメントのやりとりまで手がまわらなさそうだったので、「なし」にしています。「設定」にいき、基本設定の項目にある「コメント設定」で表示の有無を設定できます。画像の圧縮設定はてなブログは、基本的に表示が重めです。できるだけ軽くなるように、画像は圧縮したものを使うのがオススメです。はてなフォトライフの設定を帰ると、自動で圧縮できるようになります。【設定方法】はてなフォトライフの「設定」で、画質を100%から下げます。80~90%あたりにすると画質の劣化も感じにくく、ほどよい感じかと思います。パンくずリストが表示されるようにするパンくずリストとは、主に記事タイトルの上に表示される「トップ>日常>○○」などと表示されるリストのことです。SEO的な効果がどうこうといわれていますが、純粋にみやすいので入れています。設定方法はてなブログの管理画面から「デザイン」→「カスタマイズ」→「記事」とすすみ、「記事ページにパンくずリストを表示する」にチェックをいれます。チェックを入れると、各ページにパンくずリストが挿入されます。グローバルナビを設置するグローバルナビとは、ヘッダー画像の下に入るメニューバーのことです。こんな感じのものですね。パソコン環境ではグローバルナビがあると格段にみやすくなります。設置方法はブログテーマによって違いがありますので、お使いのものにあわせて設定してみてください。タイトル画像(ヘッダー画像)をオリジナルにするこのブログでは、タイトル画像をオリジナルのものにしています。画像は「画像のみの表示」と「画像とテキストを表示」することができます。私の場合は、画像のみを表示しています。【設定方法】はてなブログの管理画面から「デザイン」→「カスタマイズ」→「ヘッダ」とすすみ、「画像をアップロード」から設定できます。タイトル画像の下にサイト説明を表示したい場合は、「画像とテキストを表示」にチェックを入れます。プロフィール画像を大きくするトップページに表示されるプロフィールの画像を大きくしました。大きくするとブログの雰囲気がガラッと変わり、読者の方にも覚えてもらいやすくなります。【設定方法】こちらの記事で手順をくわしく解説しています。はてなブログのプロフィール画像を大きくする方法はてなブログをはじめて、やってみたかったことの2つめは「プロフィール画像を大きくする」でした。いうわけで、さっそくやってみましたよ!はてなフォトライフで前準備プロフィール画像を大きく表示するには、はてなフォトライフで前準備が必要です。初期設定でもっとも苦労したのがこれでした。くわしく説明しながらいきます。今はネットの閲覧環境が人によってそれぞれです。サイトをつくるときはスマホ表示、タブレット表示、パソコン表示のそれぞれを意識したデザインが推奨されます。それに対応するのが、画面幅によってレイアウトが変わる「レスポンシブデザイン」です。レスポンシブデザインとは私のブログを例にとると、パソコンでみたときは横幅が広く表示されます。一画面の中に、記事一覧とサイドバーが表示されています。記事一覧には本文の抜粋が表示され、サイドバーには関連記事・注目の記事・月別記事数など、たくさんの情報が表示されます。スマホやタブレットでみるとレイアウトが変わり、サイドバーが記事一覧の下に移動します。レイアウトがシンプルになり、情報が必要なものにしぼられて、小さな画面でもみやすくなります。パソコンとは画面幅が違うので、それにあわせてデザインが変わるというわけですね。はてなブログのレスポンシブ問題はてなブログはレスポンシブ対応が不完全なようで、表示にいくつかの問題があります。スマホ対応のレイアウトは「とりあえず表示される」といった程度のもので、非常に見づらいデザインになっています。タイトル画像の両端が切れる問題また、スマホでみたときに、タイトル画像の両端が切れて表示されることがあります。この現象が起こった場合は、CSSにコードを追加して対応します。こちらの記事でくわしく手順を解説していますので、この現象に悩んでいる方は参考にしてみてください。【これで解決!】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】はてなブログはレスポンシブ対応が不完全なようで、スマホで見るとタイトル画像(ヘッダー画像)の左右が切れて表示されることがあります。ヘッダーが文字だけならいいようですが、画像になっているとレスポンシブが効かないようです。いうわけで、対処方法yuzumochi.com【必要に応じて】独自ドメインでwwwなしでもアクセスできるようにするはてなブログProで独自ドメインを使う場合は、wwwなしでもアクセスできるようにすると便利です。【設定方法】こちらの記事で手順をくわしく解説しています。【はてなブログ】独自ドメインでwwwなしでもアクセスできるようにする方法はてなブログProにすると、独自ドメインを使うことができます。はてなブログは少し特殊で、独自ドメインを設定しても「www」なしではアクセスできない仕様になっています。そこで今回は「お名前.com」で取った独自ドメインを例に、「www」なyuzumochi.comまとめ今回は、このブログで最初に行ったカスタマイズのまとめでした。最初に何をしたらいいか迷っている方は、ぜひ参考にしてみてくださいね。カスタマイズスポンサーリンクシェアするTwitterFacebookはてブPocketLINEコピーyuzumochiをフォローするこの記事を書いた人yuzumochiゆずもちろぐ。へんてこなものやかわいいものが大好き。yuzumochiをフォローするyuzumochiゆずもちろぐ。コードの不具合部分を修正しました&「ヘッダーの設定について」を追加しました。はてなブログに「トップに戻る」ボタンを設置してみました。「トップに戻るボタン」は、本文の途中で表示されるもので、押すと瞬時に先頭...カスタマイズはてなブログのSNSシェアボタンを簡単カスタマイズ!「AddThis」の使い方はてなブログにちょっぴりおしゃれなSNSボタンを設置しました。「AddThis」という海外のサービスです。ゆずもちゆずもちろぐ。へんてこ・かわいいもの好き。ゆずもちゆずもちろぐ。へんてこ・かわいいもの好き。ゆずもちゆずもちろぐ。へんてこ・かわいいもの好き。ゆずもちゆずもちろぐ。へんてこ・かわいいもの好き。【必要に応じて】独自ドメインでwwwなしでもアクセスできるようにするまとめタイトルとURLをコピーしました。