こんにちは。
4児パパです。
個人的にブログ活動が熱い今日この頃。挫折しない様、日々ネタは頭の中から湧いたものを直ぐメモするクセが出来ました。まぁ何事もブログネタになりますがね。
はてなブログのテーマについて、下記のツイートをしました。
ブログ初心者ではてなブログのデザイン編集で苦しむ人はたくさんいるんですよね。最初からレスポンシブ デザインを選んでおけば、スマホ表示のコーディングなど少しだけ苦労を取り除く事ができる。ブログの記事を専念したい人は外注もありだと思うし、自分で遠まりしてもやりたい人も良いと思う。
— ４児パパ (@ARTS_papa) 2019年8月12日
ブログ初心者ではてなブログのデザイン編集で苦しむ人はたくさんいるんですよね。最初からレスポンシブ デザインを選んでおけば、スマホ表示のコーディングなど少しだけ苦労を取り除く事ができる。ブログの記事を専念したい人は外注もありだと思うし、自分で遠まりしてもやりたい人も良いと思う。
■目次
１.はてなブログテーマはレスポンシブ を選ぼう
はてなブログのデザインは必ずといって良いぐらいレスポンシブ デザインを選ぼう
レスポンシブデザインは初心者にもやさしい
私のはてなブログのテーマはDUDE。
初心者にはお勧めしない。
これ本当。ただ、デモサイトみたいにキマッてくるとイケてくる。
ブロガーはプログラミングを学ぼう
ブログをやっていると多少のプログラミング言語の知識が必要となっていきます。プログラミングが好きって言う人には、なんともないかもしれませんが、プログラミングが億劫な方には、ぜひレスポンシブ デザインを選んで欲しい。
過去の記事にもお伝えしておりますが、
【はてなブログCSSで編集しない】サイドバーにおすすめの記事【SEO初心者必読】
スマホ画面でもPC画面と同じ様に表示されていくため、手間が人段階省けます。
レスポンシブで記事を書く時間を確保
Webライターさんほどではないが、記事に専念するにはやはりコーディングの時間は勿体無い。ヘッダーや目次の編集など一度行ってしまえば、ずっとイケてるままですが、ただ、初心者がやるととんでもない時間を食います。
最短で結果を
無駄な時間を省いて記事を書いていこう。ブログを育てて、自分が描いている記事を達成していきましょ。
2.非対応のブログテーマはスマホ表示では読みにくい
PC画面で慣れていくと、スマホ表示でも同じ様なサイトの構成でブログを見たいもの。
レスポンシブデザインを利用して一貫性を
読者の為にブログの構成をPC表示でも、スマホ表示でも一貫性を保った方が馴染みやすい。
レスポンシブデザインでSEO対策
実はレスポンシブデザインはスマホ表示でもPC表示でも同じコードを利用する為、円滑に画面へと表示します。それが多少なりとモバイルフレンドリーに繋がるのでSEOにも影響を受けます。
こだわりがあるのであれば、また話は別ですが。
3.レスポンシブ非対応見出しカスタマイズの仕方
早速カスタマイズしていきましょう。
はてなブログのテーマレスポンシブ 非対応『DUDE』
私のこのはてなブログのテーマは”DUDE“です。デザインが気に入ってこれにしましたが、実はこのテーマSEO的に初心者に向かないし、編集もやや面倒。
レスポンシブデザインのPC表示の見出し
PC表示の見出しの例を見ていきましょう。
わかりやすい様に、見出しの要素をふってあります。
レスポンシブのスマホ表示
スマホ表示を見てみましょう。
スマホ表示の見出しのカスタマイズ
ぜひコピペしてください。
『管理画面』→『デザイン』→『スマートフォン』→『ヘッダ』
CSS記入がありますので、記入していきましょう。
コピペして♪
<style type=”text/css”>
.entry-content h3 {
font-size: 140%;
padding: 12px 0 12px 13px;
color: #4D517D;
padding-left: 13px;
line-height: 1.6em;
border-left: #4D517D solid 9px;
}.entry-content h4:before {
content: “\f029”;
font-family: “blogicon”;
position: relative;
padding-right: 10px;
color: #6C9FCE;
}
.entry-content h4 {
font-size: 120%;
margin: 35px 0 20px;
content: “\f029”;
font-family: “blogicon”;
position: relative;
padding-right: 10px;
color: #454545;
}</style>
PC表示と同じになります。
サイズだったり、色の指定を自分なりにカスタマイズすると個性が出ますよ！
4.はてなブログの大見出しはh3
はてなブログに大見出しが”h3“。これ結構問題かも。
文面の大見出し”h2″が望ましい
SEOを考えると文の構成はh2から順に見出しをつけた方が良い。
ブログのタイトルはh1
ブログのタイトルがh1をしようしているので、必然的にh1は利用しない方が良い。
ブログの文の構成的に、”h2＂→”h3″→”h4″という様に落とし込んでいった方が良い。
私の大見出しh2を利用してください
私の文も構成の一番最初の大見出しぜひ利用してください。
本文のHTML編集にて、
<h2 id=”title1″ style=”padding: .5em .75em; background-color: #ffffe0; border-left: 10px solid #ffa500;”><strong><span style=”font-size: x-large; font-color: #000000;”>１.</span></strong></h2>
この1.の横にタイトルを入れれば、大見出しのイケてる枠になります。
バックグランドカラーや文字の色を変えて個性を出していこう。
5.ブログはあなたのメディア
ブログはあなたの大事なメディア。
ブログで世界へあなたの思いを届けられる
ブログやツイッターをできることの、この現代の恩恵にあやかっているということに気付けている人は何人いるだろうか。
本当に恵まれた時代で、PC一つで稼ぐこともできる。
ブログで夢を叶える
ブログで稼げれる様になると、自宅にもこもれるし、世界どこにいても自分のペースで稼げれる。楽しい事を楽しいと思えるほどに。
6.最後に
人生実は省いて良いものがたくさんあります。
省く事で、違うことに専念できてゆとりを持てます。
本当の豊かさと言うのは、お金があることではない。
本当の豊かさは時間を有意義に使い、内面的に幸せでいられると言うこと。
人生まじで伸びしろしかないことに気づいて欲しい。
周りにネガティブな人間に囲まれないで欲しい。
夢を持ち続けている人たちに囲まれよう。
奮闘している人たちからエネルギーをもらおう。
大丈夫。
どんなに辛いことがあっても、絶対に人生簡単に詰まない。
人生は伸びしろしかない！！！
コメントを残す