スキップしてメイン コンテンツに移動

Imaginary theme

ラベル(デザイン)が付いた投稿を表示しています すべて表示

インデックスページのスニペットの本文の削除と項目の並び替えのカスタマイズ

イメージ イメージ

Imaginaryのインデックスページ:トップとアーカイブとラベルとブログ内検索では記事のスニペットが表示されますが、初期値では記事のタイトルと画像と抜粋と二つのリンク(アーカイブと続きを読む)が表示されます。 テンプレートのデザインのカスタマイズとしてスニペットの本文の削除と項目の並び替えについて紹介します。 スニペットの本文の削除 スニペットの項目の並び替え どちらもBloggerの管理画面のテーマの▼メニューの「HTMLを編集」か「バックアップ」と「復元」でテンプレートのソースコードを書き換えます。 スニペットの本文の削除 記事からタイトルと画像だけを取り込んで抜粋を表示しないようにする方法です。 データを読み込まないようにする Blog1のidのwidget内のpostBodySnippetのidのincludable内のsummaryのclassのpタグがインデックスページでスニペットの本文を…

読み込みボタン/無限スクロールの手動化のカスタマイズ

イメージ イメージ

Imaginaryのインデックスページ、つまりトップページとアーカイブページとラベルページとブログ内の検索結果ページではスクロールが画面下に達すると次のページを自動的に読む込むという無限スクロールが搭載されています。 本稿では画面スクロールによる動作を停止して読み込みボタンで無限スクロールを手動的に行うように変更するカスタマイズの方法を紹介します。 見た目は通常のリンクと同じですが、ボタンを押すと次のページへ移動するのではなく、次のページを読み込んで同じページで表示します。 カスタマイズはテンプレートのソースコードを編集しますので、Bloggerの管理画面のテーマのHTMLを編集かバックアップと元に戻すで、行って下さい。 読み込みボタン/無限スクロールの手動化へのの四つの手順 読み込みボタンを設置する フッターを表示する モバイルのサイドバーを下段に表示する デスクトップのサイドバーを外した後に下段に表…

投稿の日付表示を日本語の順番に変える方法

イメージ イメージ

Imaginaryの記事ページでは記事タイトルの下に投稿の公開日、本文の下に更新日が表示されます。 日付をどのように表示するかというフォーマット(形式)はBloggerの管理画面のタイムスタンプの形式で変えることができます、 設定| Blogger 公開日と更新日の両方とも共通のフォーマットで、表示されます。 BloggerがアメリカのWebサービスということで、日付のフォーマットが全て英語の順番(月日年か日月年)になってますので、日本語の順番(年月日)に変更するカスタマイズの方法を載せておきます。 Imaginaryの投稿の日付のカスタマイズはBloggerの管理画面のテーマのHTMLを編集かバックアップと元に戻すによってテンプレートのソースコードを書き換えることになります。 記事タイトルの下の公開日のカスタマイズ 例として「2022年5月10日 (火)」のように表示する場合を挙げます。 書き変え前のソ…

フォント変更のためのVariableタグの一覧表

イメージ イメージ

ブログの背景画像を全画面で表示する方法

イメージ イメージ

Imaginaryの通常の背景画像はおよそブログのヘッダーのみに表示されるように高さが指定されています。 背景画像の高さはBloggerの管理画面のテーマのカスタマイズの詳細設定の背景から一定の範囲内で調節することができます。 ブログの背景全体を覆い尽くすデザイン もう一つの背景画像の表示の仕方としてデバイスの全画面を対象にする、いい換えるとブログの背景全体を覆い尽くす方法について紹介します。 Imaginaryのソースコードを書き換える Bloggerの管理画面のテーマのメニュー(カスタマイズの右横のボタンから開く)の「HTMLを編集」、または「バックアップ」と「元に戻す」でテンプレートのXMLファイルを書き換えるかのどちらかで行います。 Imaginaryのソースコードのskin内のCSSを編集します。 書き換え前のCSS .bg-image-container {width:min(100vw, …

ブログの背景のヘッダー画像の付け方とサイズについて

イメージ イメージ

Bloggerでの背景のヘッダー画像の付け方 Imaginaryの背景のヘッダー画像はBloggerの管理画面のテーマのカスタマイズ(テーマデザイナー)の背景の背景画像の「背景を変更」からBloggerの既存のものを選択するか使用中のデバイスに保存してあるものをアップロードして付けられます。 テーマデザイナー|Blogger 使用可能な画像URLが分かる場合はBloggerの管理画面のテーマのHTML編集かバックアップと元に戻すによるオフラインのファイル編集からブログのテンプレートのソースコードに追加することもてきます。 <Variable name="body.background" description="Background"       color="$(blog.header.color)"       type=&q…

ブログの記事/追加ページのデザイン

イメージ イメージ

A woman running down a sunny mountain road by Sue Zeng on Unsplash 記事ページのヘッダー 著者名、公開日(設定の一つ目は旧式で無効です)の機能が使えます。 記事タイトルに記事ページのブックマークリンクが付きます。 Bloggerのユーザープロフィール(Bloggerの「設定」のユーザ設定から編集)があれば著者名にリンクが付いてアイコンがあれば著者名の前に表示されます。 投稿の公開日には公開日の年月のアーカイブのリンクが付きます。 記事ページの本文 文章のデザインのサンプルを示します。 本文 本文 本文 見出しのh1 見出しのh2 見出しのh3 見出しのh4(本文と同じ文字サイズ) 見出しのh5 見出しのh6 引用文 引用文 引用文 リンク名/アンカーテキスト リスト リスト リスト 記事ページのフッター 投稿をメールするリンク、ラベル、リアクション、投稿の下に投稿者のリン…

ブログのインデックスページのデザイン

イメージ イメージ

A woman stands on the beach quietly by Sue Zeng on Unsplash ブログのトップページと後続のページ、アーカイブ(日付毎)、ラベル、ブログ内の検索結果などのインデックスページに投稿された記事の抜粋のスニペットが表示されます。 記事のタイトルは全て、投稿画像は一枚目が横長のサムネイル――その他にYouTubeの埋め込み動画がある場合もサムネイルの対象になります――記事の本文は先頭から百四十文字までがスニペットに取り込まれます。 フッターの左端のアーカイブは投稿の公開日の年月のアーカイブへのリンク、右端の続きを読むはスニペットの記事ページへのリンクになっています。 ブログの記事/追加ページではヘッダーのリンクリストは省略されますが、インデックスページでは表示されます。 Bloggerの管理画面で設定された記事数を越えると自動的に次のインデックスペー…

ブログの全般的なデザイン

イメージ イメージ

A woman holding a child walking the pathway by Sue Zeng on Unsplash 全部で七つのセクションに大別されます。 ヘッダー ページリスト (先頭) Search (Top)/検索(先頭) ページの本文 サイドバー Page Sub/ページの補足 フッター Bloggerのレイアウトから編集できますが、5と6だけがウィジェットの入れ替えが可能です。 インデックスページの最初のスニペットと記事/追加ページの本文の上にフローティングバーが付いています。 スマホやタブレットなどの小画面のデバイスではフローティングバーの左端の三本線のハンバーガーメニューでサイドバーを開き、サイドバーの右上のバツ印でサイドバーを閉じます。 ブログの幅以上の大画面のパソコンなどのデバイスではサイドバーはブログの右端に最初から開いて表示されます。 モバイルのフローティングバーの左端…