【はてなブログ初心者必読】絶対オシャレにするスマホ表示【トップページの記事一覧デザインカスタマイズ】

はてなブログ スマホ表示 記事一覧編集

はてなブログ スマホ表示 記事一覧編集

こんにちは。

4児パパです。

 

最近ブログデザインに注目して、記事を書きながらデザイン編集をしています。

はてなブログのデザインを開発して思ったのは、行き着く先は皆一緒かなと。簡単にいうと記事を書いているなかで、水面下では皆同じところでつまずいたりして、頭を使ったりしているという事。

 

 

実ははてなブログを自分のデザイン開発していくと、皆行き着くところが一緒と気づいてしましった。トップページ編集、記事一覧編集、グローバルにフッターリンク。そこらをクリアすると初心者感から一気にちょっとデザイナー経験のあるレベルまでいける。幸いにもそんなに難しい事ではない。

 

少しずつですが、ブログ初心者も一緒に経験者の背中をおって一緒に歩いて行こう。 

 

  

■目次

1.アクセスが増えて読者も増えるのでオシャレに

2.ブログ記事一覧は皆一緒なのでカスタマイズしよう

3.ブログ記事タイトルの日付も変更

4.ブログデザインは自分のペースで

5.最後に

 

1.アクセスが増えて読者も増えるのでオシャレに

はてなブログは簡単に細部を編集していくことができます。

 

はてなブログ同士の読者が強い繋がり 

はてなブログユーザー同士の繋がりが強いので、お互いに読者になり記事を参考にし合う度に、アクセスが増えるので、それがグーグルの評価に繋がります。

 

はてなブログのブログデザインは編集可能

残念なことがあって、一見オシャレなブログーテーマででもサイト見てみると、デフォルトと全然違う為、自分の求める部分は修正が必要になってきます。

 

部分的に徐々にカスタマイズを

例えば、

  • グローバルリンク
  • フッターリンク
  • サイドバー
  • 関連記事
  • 記事一覧
  • 見出しの枠の編集

 

実は皆同じ場所を通る。しかし多少のプログラミングを勉強しないといけないので、皆が皆同じ場所に立てるとは限らない。

 

 

2.ブログ記事一覧は皆一緒なのでカスタマイズしよう

ブログ記事一覧はそっけない部分もあります。たくさんの記事が並んでいるので、読者もなんども訪れるページなので、オシャレにしよう。

 

はてなブログトップページ記事一覧をカスタマイズ

記事一覧は本で例えると目次で大事なもの。オシャレに飾ろう。

 

記事一覧ののデフォルト

 デフォルトだとちょっと味気ないので、さりげなく編集していきます。

はてなブログ スマホ表示 記事一覧 デフォルト

はてなブログ スマホ表示 記事一覧 デフォルト

 

記事一覧の編集の仕方

編集していきましょう。

 

『管理画面』→『デザイン』→『スマホ』→『フッタ』→『ページャ下』

はてなブログ サムネイル画像 日付編集

はてなブログ サムネイル画像 日付編集

<!– トップページの記事一覧のサムネイルデザイン –>
<style type=”text/css”>

.list-entry-article .thumb-image
{
width: 100px; /*サムネイル画像の横幅*/
height: 100px; /*サムネイルが画像の縦幅*/
border-radius: 0em; /*サムネイル画像の角の丸みをなくす*/
border: solid 3px rgb(61, 61, 61); /*画像の枠線をつける*/
}
</style>
<!– トップページの記事一覧のサムネイルデザイン –>

<!– トップページの記事一覧のサムネイルデザイン –>
<style type=”text/css”>
.date
{
color: black; /*Dateの文字色 記事にも影響*/
background: yellow;/*日付の背景色*/
padding: 0px 10px;/*日付の文字まわりのスペース*/
}

</style>

 

 はてなブログ記事一覧編集後

日付のバックグラウンドは黄色くし、サムネイルも四角くして縁もつけました。 

はてなブログ スマホ表示 記事一覧 サムネイル編集

はてなブログ スマホ表示 記事一覧 サムネイル編集

 

 

 

3.ブログ記事タイトルの日付も変更

はてなブログのデザインを編集するときは少しずつ行いましょう。

 

ブログ記事タイトルの日付のデザインもカスタマイズ

先ほどのdateのCSS編集は記事のタイトルにも影響を受けます

 

ブログ記事記事タイトルデフォルト

BeforeとAfterを見比べてみましょう。

タイトル記事 日付 デザイン編集

タイトル記事 日付 デザイン編集

 

日付デザインの編集後 

日付をデザイン 編集後 はてなブログ

日付をデザイン 編集後 はてなブログ

そこまで大きく変わらないが、ちょっとだけ編集カスタマイズしていない人と差を付けれる。

 

 

 

4.ブログデザインは自分のペースで

 ブログデザインはプログラミングの知識を要します。

 

ブロガーは少なくともHTML/CSSの勉強をする

ブロガー実は学ばなければならない事が沢山あります。その中でもHTML/CSSは最重要事項の一つ。その前に多少のうWeb知識が必要です。

 

やる事が多いので挫折するのは当たり前です

記事を沢山稼がないといけないのにも関わらず、やる事が沢山あります。

はっきり言って、挫折は当たり前の世界です。

絶望なんていうのもしょっちゅうなので、当たり前として受け取りましょう。

 

www.papa-programing.jp

 

 

挫折した回数が多いほどマジで成長できます

私も沢山挫折しました。でもそれがあったからこそ成長できたのかなと思います。

しかもその中で励みのコメントを頂けると本当に嬉しい。頑張れる気が増します。

www.papa-programing.jp

 

 

 

5.最後に

私もブログをやり始めてわからない事だらけです。 その当時はまだまたくさんの事を模索する必要がありましたが、今では先駆者がすでに情報をシェアしてくれています。

 

情報を上手く自分のものにして、前に進みたいものです。

 

人生伸びしろしかないですからね。

 

 4児パパ

 

コメントを残す

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