hatenablog-customize-css

記事内に広告を含む場合があります はてなブログの使い方

はてなブログカスタマイズ初心者専用!これだけは押さえておきたい無料CSS

はてなブログカスタマイズ初心者専用!これだけは押さえておきたい無料CSS

 

わんちゃん
無事にはてなブログを始めたよ!
次はこれだけはやっておくといい設定なんてある?

そうですよね。
私も始めた時は夢中でしたが、2ヶ月目にやったことがあるのでお伝えしますね。

 

1.グローバルメニュー作成

2.上に戻るボタン作成

3.ソーシャルのフォローボタンの数字を表示に

4.フッター作成

5.ヘッダー画像の変更

6.サイトの安全性の改善

7.サーチコンソールが使えなくなってた時の対処法

8.スクリーンショットの撮り方と記事への挿入

9.見出しのカスタマイズ

10.吹き出しで会話形式にする設定

 

 

グローバルメニュー作成

グローバルメニューがあったら読者も分かりやすいです。

ただ初心者の時に問題なのはグローバルメニュー(グローバルナビ)という言葉が出てこないんですよね。

なので検索しようとしてもそこで結構つまづくんです。

基本がわかって、色を変えたりも出来るようになり
オリジナリティーが出せるようになれば楽しみも増してきます。

カラーコードはワードプレスに行っても
ずっと使うよ!
ねこさん

上に戻るボタン作成

これは自分自身があった方が絶対にいいと思って探していたんです。
操作がすごく楽になりますよ!

ソーシャルのフォローボタンの数字を表示に

“ブクマやフォローの数がきっと少ないだろうから見えるのは恥ずかしいな”という気持ちで非表示にしていたのですが、ふと、自分だったら数字が見えた方が他の方も押していたら自分も結構気楽に押せるんじゃないかと思って“表示”に設定しました。
そう、見える化です。

確かに少ないと恥ずかしいです。
でも、ブクマして頂いているのを見ると凄く励みになるし心から嬉しくなりますね。

こちらが参考になりました。

フッター作成

最後をきちんと作ることでブログが締まり、サイトらしくなります。
見てくださる読者側も安心できますよね。

 

ヘッダー画像の変更(規定のサイズ)

これは気分的な事もあるのですが、ヘッダーを規定通りのサイズで変更してみました。

 

はてなブログのヘッダー画像の推奨サイズは
1000×200px

 

カスタマイズでサイズを指定しておき、作るのもいいですね。
横幅をぴったりにするカスタマイズも公開されている方がいらっしゃいます。

私は、はてなで【Under Shirt】アンダーシャツというテーマを使用していたので
そこにそのままのサイズで貼っていました。

サイトの安全性の改善(トレンドマイクロに調査依頼をする)

ある日、自分のブログをグーグルで検索しようとしたら…
なんと文字がグレーで左上にはてなが付いてたんですよね。

サイトの安全性が確認されていないということです。

安全なサイトはグリーンで表示され、左上にはレ点が入っています。

グレーの左上のはてなにマウスでカーソルを合わせると
このwebサイトの再評価をトレンドマイクロに依頼しますとなるので
サイトの持ち主である私は再評価の依頼をしました。

日にちが浅いサイトはそこまでまだ評価が追いついてないのです。

ものの30~40分程で評価して頂けて
表示もグリーンになっていました!
ねこさん

少しでも見てくださる方が安心して来て頂きたいですよね。

サーチコンソールが使えなくなってた時の対処法

ある朝、いつものようにサーチコンソールを開くと
いきなりDNSレコードでのドメイン所有権の確認という画面になってて
動かなくなってました。

f:id:ami_lier:20191216222950p:plain
全てのドメインを入力します。

私はムームードメインで取得しているので、ムームーのHPからログインし
コントロールパネルからTXTを設定しました。

そしてhttpsありなしバージョンなど全てのドメインを登録しました。

こちらの記事で少しこの話題にも触れていますので
簡単な方法があるので目を通してみてください。

ワードプレスの収益化設定!これだけは最初にやるべき【いきなり書き出してはいけません】

スクリーンショットの撮り方と記事への挿入

本当に小さい事なんですけど、PCによってスクショの撮り方が違ったりするんですよね。
検索するときはスクリーンショット 撮り方 ○○○○といった感じで
ご自分の使っているPCのメーカーを入れたりするのも有効かと思います。

これも、単純な様で分りにくい点です。

見出しのカスタマイズ

今からブログを始める方は最初にまず見出しをh3ではなくh2に変えましょう。
それからh2に対して、カスタマイズしていきます。

そこで私が手こずったのは、
カスタマイズをcssに貼ることは出来たし大見出しをh2にも出来るけど、ブログ説明文にもcssが反映されてしまうというところでした。

なので例えばh2をカスタマイズするとしたら
h2の前に.entry-contentを付けて指示を出せばいいそうです。

見出しを変更した際に、ブログの説明文までも一緒に反映されてしまって切り離せなくて困っていらっしゃる方は、プログラミング上の、この問題だと思います。

吹き出しで会話形式にする設定

 

私は今、ワードプレスでサイトを複数運営していますが、吹き出し風は流行っています。
テーマですでに設定されているものもありますし、プラグインで入れる事もあるんです。

※プラグイン…スマホでいうアプリのようなもの。

吹き出しがあることで読者に分かりやすく、こちらも伝えやすくなります。

こうやってみても分るように、当時のはてなブログユーザーだった私は皆様の力をお借りしてカスタマイズ出来ました。

無料で公開してコピペオッケーにしてくださってる皆様
私でも出来ました。
ありがとうございます!
ねこさん

他の記事も読み進めてブロガーとして力を付けていきましょう!

人気記事【アフィリエイトASPを比較します】ここだけは押さえておきたい厳選5選【初心者向け】
人気記事【はてなスターはいらない?】はてなブログでアクセスを増やすには?アップのためにすること3つ

-はてなブログの使い方