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

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

こんにちは。

4児パパです。

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

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

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

— ４児パパ (@ARTS_papa) 2019年8月10日

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

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

Follow @arts_papa

■目次

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

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

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

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

▶5.最後に

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

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

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

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

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

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

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

例えば、

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

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

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>