ブログのテーマ選択とカスタマイズ

f:id:mls-travel:20200508233507j:image

はてなブログをはじめるにあたって、迷ったのがテーマ

それぞれの希望はこんな感じ

  • カードで一覧表示したい (ヨウ)
  • オリジナル感だしたいからカスタムしやすい (ヨウ)
  • 携帯で見やすい (リリ)
  • サムネ表示される (リリ)

ヨウはPCでブログ管理

リリはスマホでブログ管理

 

はじめに使ってみたのはZENO-TEAL

blog.hatena.ne.jp

旅行記が増えたら、Navbarで地域とか分けれたらいいかもと思って

カスタマイズもしやすいみたいで、デモページにサンプル書いてくださってるし、カスタマイズ例を書いてくれてる方がたくさんいるようでした。

Web系あまり詳しくないので、サンプルをいじれるほうが助かる。

 

はじめはこのテーマで、全体的な色を変えたりタイトル部分の高さを変えたりしたけどテーマ変更しました。

理由は、サムネ画像を選べないっぽかったから。

一覧表示のサムネ画像は記事のトップに貼らないとダメらしくて、記事の間に入れてる画像から選べるのがいいなぁと思って。

 

それで変更したのが絢爛(KENRAN)

blog.hatena.ne.jp

現在このテーマで色々カスタマイズしつつ・・・

カスタマイズ例が少ないのではてなブログで使われてるid、クラスを調べながら無理やり設定してる感じかもしれないです。

環境によって画面崩れてる可能性もあるかも (^^;;

 

CSSの設定で必要だったクラスのメモ (更新すると思います)

.page-archive

記事の一覧とか。トップページと各カテゴリのページ(~/archive~) ってアーカイブページのクラス

はじめ.page-index で設定してたけど、これはアーカイブページには適用されないっぽい

/*トップページではてなスターを非表示にさせる例*/

.page-archive .social-buttons {
   display: none
}

って感じで使う

 

以下は各カード(記事)の設定、上の例みたいに.page-archiveを前に記載してる

.entry-thumb サムネイル

 .entry-title タイトル

 .entry-description 内容

 .categories カテゴリタグ

  

やってみたこと

 - 全体的な色変更 (公式にサンプルコードあり)

 - 一覧でスターを消す (公式にサンプルコードあり)

 - 一覧でカードの高さ変更、サムネ画像の表示高さ変更

    → 崩れるかも?注視する必要あり

 - 一覧で記事タイトルと内容の余白を詰める

 

やりたいこと

 - 記事のトップに誰が書いたか自動挿入

   → わかりやすいところに誰が記事書いたか表示させたい

 - タイトルとかリンクの高さ変更したいかも

 - navbarの検証

 

まだまだ実験中・・・

はてなブログ、共同管理可だし著者一覧の表示とかあるけど、プロフィールに2アカウント表示できないのかな?各自のプロフィールはとりあえずHTMLでID表示しました。

あとはどちらが書いた記事かを明確にしたいなぁと思っていますー