こんにちは。リーナです。
Bloggerのテーマをカスタムしたので、その記録を一部残します。
テーマ
シンプルで見やすかったので、これを選びました。
標準にないカスタム
テーマ導入後に追加した機能は以下のとおり。多分。
- 記事の冒頭の目次
- ハンバーガーメニュー (モバイル)
- ナビゲーションバー上の記事検索アイテム
- 一覧にある記事のサムネイルのアスペクト比 (2:1 -> 16:9)
- 一覧にある記事の標準のサムネイル
追記: 記事一覧の見た目が整うように調整しました。
- .list-itemの最大の横幅を#listの49.5%に (幅の矯正)
- .list-item-titleの文字の折り返しをなくし、1行で表示をするように。また、はみ出した部分は表示せず、入りきらなかった文字は三点リーダーで表現。
具体的には、.list-itemにmax-width: 49.5%を、.list-item-titleにはwhite-space: nowrap; overflow: hidden; text-overflow: ellipsis; を追加しました。
標準サムネイルの実装
ここの記事の手順をそのままなぞりました。
元あるサムネイルのタグの後に
<b:else/>
<a expr:href='data:post.url'>
<img class='list-item-img-def' src='{画像のＵＲＬ}'/>
</a>
<a expr:href='data:post.url'>
<img class='list-item-img-def' src='{画像のＵＲＬ}'/>
</a>
これを貼り付けると標準のサムネイルを設定できるようです。
元々の設定では記事内の画像から一番初めのものを選択していたようで、追加したタグで記事内に画像が存在しない場合の動作を設定しています。事前に決めた画像をサムネイルに差し込むようにね。
おわり
最初の記事を除いて、初めてMinecraftに関わらない記事を書きました。リンク付きのメモだけど。
標準サムネイルの候補は今使われているもの以外にもいくつかあって、これからも追加されるかもね。ここに置いておくから見てもいいよ。
リンク
くうく堂:
くうく堂: blogger日本語テンプレート「QooQ」ダウンロードページ
勉強でもするか: 【Blogger/QooQ】トップページに表示させるサムネイル無し記事にデフォルト画像を表示させる
Zenn: 【CSS】文章の行数を制限＆語尾を3点リーダーにする
No comments:
Post a Comment