BloggerテンプレートLavelleのカスタマイズ（修正箇所控え）

-

ブログサービスは無償で広告表示のないGoogleのBloggerを利用しています。
テンプレートはデザインが好みのLavelle(無償)を選びました。
海外製のテンプレートです。
Author URL     : https://newbloggerthemes.com/
Theme URL      🚀: https://newbloggerthemes.com/lavelle-blogger-template/

スライダー画像も使え、シンプルなデザインなのですが、
日本語記事をスマホで表示する時に少し読みにくかったため、CSSを一部編集しました。

本記事は、後日メンテナンスできるための修正箇所の記録です。

修正手順
  1. PC（Chrome）でBlogを表示して、該当場所を右ボタンメニューの検証＞DevToolsを起動。
  2. DevToolsで、対象要素名と現在のstyleの設定を確認する。
  3. 変更したいstyleを、Bloggerの管理者メニューで、HTMLのCSSの最下部に追記する。

修正箇所の一覧

  • 投稿タイトルと見出しはh2になるが、 テキストがイタリックでサイズが大きすぎるので、font-styleを標準、font-sizeを調整。
  • 投稿タイトルのタグがh2で生成されるのでh1に変更。
    （投稿時の本文で見出しを選ぶとh2になるため、タイトルはh1にしたかった）
  • スマホ表示では投稿記事の左右のPaddingが広すぎて、表示文字が少なかったので、投稿記事の横のPaddingを0に変更。
  • 投稿記事の一覧で文章のサマリーが自動生成されるが、文字数が多すぎるので調整。
  • 投稿記事の一覧でRead More文字がめだたないので、fontをボールドの青に変更。
  • 人気の投稿のタイトルが本文と同じでめだたないので、ボールドに変更。
  • ulの左右のPaddingが40pxと広く見にくいため0pxに変更。
  • ヘッダータイトルロゴ画像差し替え。（Installationガイドに従う）
  • ヘッダーメニュー項目変更。（Installationガイドに従う）
  • スライダー画像と説明とリンク先変更。（Installationガイドに従う）
  • フッターのメニューは冗長なので削除。（Installationガイドに従う）
    クレジットは以下の通り削除禁止となっていたので残しました。
    <!-- Do not edit or remove credits without our permission: newbloggerthemes.com -->

追加したCSS

1642行目あたりの、</b:skin>の前に以下を追加。

/* T2-CSS begin */
div.col-md-8 {padding-left: 0px; padding-right:0px; }
.widget .post-body ul {padding: 0;}
h1{font-size:24px; font-style:normal; margin-bottom: 10px; margin-top:20px;}
h2{font-size:20px; font-style:normal; margin-bottom: 10px; margin-top:20px;}
h3{font-size:18px; font-style:normal; margin-bottom: 10px; margin-top:20px;}
.post-body.entry-content {font-size:16px; margin-top:0px; }
.readmorenbt {color:blue; font-weight:bold;}
.item-title{font-weight:bold;}
/* T2-CSS end*/

]]></b:skin>

文章のサマリー生成文字数変更

サマリーを生成するjavascriptの乗数を変更
summary_noimg = 400→200;
summary_img = 300→100;

オリジナルはスペースを考慮した処理を行っていたが、日本語だとうまく処理できないようで、サマリーが長文になったるするので、可変長処理をコメントアウトした。
/*    chop = (chop < strx.length-1) ? chop : strx.length-2;  */
/*    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; */

投稿タイトルのタグがh2で生成されるのでh1に変更

2338行あたり
<h2 class='post-title entry-title' itemprop='headline'>を
<h1 class='post-title entry-title' itemprop='headline'>に変更


サイトマップと問い合わせフォームの追加

サイトマップは固定ページSITEMAPを作成し、以下のコードを利用させていただきました。
出典：「Blogger 記事 を 一覧 表示 する ページ の 作成方法」
🚀　https://garafu.blogspot.com/2013/07/blogger.html
問い合わせは固定ページCONTACTを作成し「Googleフォーム」で作成しました。
Googleフォームの設定については、インターネット上に解説が多数公開されていました。


HTML要素に適用されたスタイルの調査は、Chrome組み込みDevToolsが便利でした。

PC（Chrome）でBlogを表示して、確認したい場所を右ボタンメニューの「検証」からDevToolsを起動します。


［Elements］パネルは、Webページの構成要素が確認できます。
右のパネルの［Computed］で選択した要素に、最終的に適用されたCSSのスタイルが確認できます。また値を変更して表示の変化も確認できます。

Webアプリ開発者じゃなくても便利に使えるツールです。興味のある方はChrome DevToolsで調べてみてください。


見栄えも大事ですが、まずは情報整理力の向上を目指します。




コメント

コメントを投稿

このブログの人気の投稿

分かりにくいAlexaコミュニケーション機能。呼びかけ・アナウンス・コール・メッセージの違いを整理した

-
イメージ
図：EchoShowの、ディスプレイの右外側から左方向へスライドして コミュニケーションを選択すると表示されるメニュー画面 Alexaのコミュニケーション機能は 呼びかけ・アナウンス・コール・メッセージ　と4つの機能があり（2020.9現在） 利用シーンがわかりにくいので、 既存の類似製品 と紐付けてみました。 また発信デバイス→受信デバイスの関係を整理しました。 機能 発信 → 受信 音声での利用例 アナウンス =　 宅内音声放送 Echo、スマホ → 全 Echo 全デバイスに強制音声放送する。 アレクサ、夕食だよって アナウンス して 呼びかけ =　 自動接続音声/ビデオ通話 相手の応答ボタンなしで自動で繋がる通話機能 Echo、スマホ →  指定 Echo 受信デバイスが EchoShowだと ビデオカメラ映像も自動で表示 される 。 アレクサ、リビングに 呼びかけ て コール（通話） =　 LINEの音声通話/ビデオ通話 通話するには相手が応答ボタンを押す必要がある Echo、スマホ→ 指定 Echo、連絡先 Alexaユーザー同士は互いに連絡先として登録が必要。 アレクサ、子供部屋に 電話して 、 かけて アレクサ、 電話にでて、電話を切って メッセージ 　 =　 LINEのボイスメッセージ Echo、スマホ → 連絡先 スマホではマイク入力または文字入力を、 相手には音声で伝える。 アレクサ、 メッセージ を送って 連絡先 =コールとメッセージの宛先 Alexaアプリで追加します。 アレクサ、 連絡先 を教えて スマホ は Alexaアプリ と Amazonアカウント が必要です。 全Echo＝同一アカウントで設定したEchoデバイス アナウンスと呼びかけは家にEchoが複数あれば便利 アナウンス は、使い方が簡単な...
続きを読む

ノートPCでバッテリー寿命を延ばす使い方の考察 (HP Spectre x360)

-
イメージ
リチウムイオンバッテリーバッテリーは100％まで充電したり、 逆に0％のまま放置すると劣化の原因になるといわれています。 バッテリー駆動のご使用が多い人は80％、 ACアダプターでの使用が多い人はさらに50%で、充電を止める運用ができれば寿命を延ばすのに効果的だそうです。 調べたら私のPＣではBIOSの設定で可能でしたのでレポートします。 BIOSのバッテリーの設定で充電量を変更する 機種： HP Spectre x360 Convertible 13-ap0xxx BIOSバージョン　（wmic bios get biosversion　管理者で実行） {"HPQOEM - 1072009", "F.34", "American Megatrends - 5000D"} BIOS起動手順　再起動後 esc キー＞Startup Memuが現れたら＞ f10 キーを押す BIOS > Coniguration > Battery Care Function で充電量を変更します。 ＡＣアダプター利用がメインの為、デフォルト100%から50%に変更しました。 ＡＣアダプターで利用するとでバッテリーは49%程度を維持して動作しています。 Battery Remaining Time を Enabled にすると バッテリー利用では、 バッテリーの残り時間を表示します。 50%運用ではモバイル利用でのバッテリ切れは早まりますが 付属の ACアダプターは65WのUSB-PDアダプターで 30分で50％の急速充電ができるのでこの運用を続けてみます。 バッテリー寿命の長持ち機能はブランドや機種で異なります。 他社参考 →　 「バッテリーいたわり充電モード」｜ VAIO お手元のＰＣの機能を調べてみてください。 バッテリの劣化の種類 リチウムイオンバッテリーの 劣化 は 「サイクル劣化」と「保存劣化」の2つです。 サイクル劣化 　→　 劣化は防げない バッテリーが充電と放電を繰り返すうちに、内部の化学反応などによって劣化が進むこと。 一般的には300～500回程度の充電と放電を繰り返すと容量が約半分になる。 保存劣化 　→　 改善が可能 　　　 使わずに放置したままでも劣化する現象。 温度の高い状態、満充電...
続きを読む

USB Type Cハブ 使用レビュー　dodocool 7in1とHP Spectre

-
イメージ
新しく買った薄型ノートＰＣはHDMIポートがないため、 HDMI外部ディスプレイを接続するために dodocool USB C ハブ 7in1 を購入しました。 \3500程度の廉価なハブですが、PowerPD100W対応で 特に不具合もなく、配線もすっきり使えているのでレビューします。 HDMI接続外部ディスプレイ PC： HP Spectre x360 外部ディスプレイ： I-O DATA EX-LDQ241D　(HDMI接続) 24インチのWQHDモニターですが WQHDの2560 x1440 を問題なく表示でき、当初の目的は達成しました。 ハブは 4K をサポートしていますが 4K 3840x2160モニターは持ってないので試していません。 PowerPD　100W 電源供給 PC付属のACアダプターは 65W のUSB-Cタイプ でした。 ハブが100 Wサポートなので、ACアダプター出力をハブに接続できて ACアダプター配線がすっきりしました。充電しながら利用できます。 USB 3.0とSD /Micro SD USB3.0は三つで外付けHDなどを接続使用できます。 最大転送速度は5Gbp/sです。 SD/Micro SDカードリーダーが付いています。 遭遇したUSB障害について PCを使っていて、はじめに障害に気づいたのは 外部ディスプレイが表示されなくなった 時です。 次に ACアダプター接続なのにバッテリーがどんどん減っていく のに気づきました。 PCを再起動しても、少し休ませても改善しませんでした。 ACアダプターをPCに直接接続しても、症状が同じなので 原因はUSB C ハブではないと判断。 PCのデバイスマネジャーを見てみると USBコネクターマネジャーにエラー が出ていました。 UCM-UCSI ACPIデバイスがエラーでメッセージは 問題が発生したのでこのデバイスは停止しました。(コード43) ネットを調べると、 Microsoft が提供する、組み込みコントローラーを備えた USB Type-C システム用のインボックス UCSI ドライバーのようです。 対策としてUSBドライバーをアップデートするとか、 バッテリをはずして再起動するとか情報が多く特定できません。 PCを連続稼働していて結構熱くなっていたので、 シャットダウンして明日症...
続きを読む