ブログ設定に関する覚え書き

(2020/05/04更新)
※この記事は今後も何度か更新する場合あり。

このブログはテーマが「シンプル」で、サイドバー部分には以下３個の「HTML/JavaScript」ガジェットを埋め込んでいます。

タイトル：「Googleカレンダー」
(※埋め込みURL(Webアドレス)に「wkst=1&hl=ja&」が含まれているため、どのWebブラウザでもGoogleカレンダーが同じ書式で表示されるはず)
コンテンツ：
<iframe src="https://calendar.google.com/calendar/embed?wkst=1&hl=ja&src=ja.japanese%23holiday%40group.v.calendar.google.com&ctz=Asia%2FTokyo" style="border: 0" width="260" height="304" frameborder="0" scrolling="no"></iframe>

タイトル：「愛媛県防災危機管理課の公式Twitterアカウント」
(※2019年12月から、Webブラウザが「Internet Explorer」(IE11を含む)の場合だけ、正常に機能しなくなっているので注意)
コンテンツ：
<a class="twitter-timeline" data-lang="ja" data-width="250" data-height="480" data-theme="dark" href="https://twitter.com/EhimeBousai?ref_src=twsrc%5Etfw">Tweets by EhimeBousai</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

タイトル：「私が別名義で運用しているTwitterアカウント」
(※2019年12月から、Webブラウザが「Internet Explorer」(IE11を含む)の場合だけ、正常に機能しなくなっているので注意)
コンテンツ：
<a class="twitter-timeline" data-lang="ja" data-width="250" data-height="720" data-theme="dark" href="https://twitter.com/krasiki78?ref_src=twsrc%5Etfw">Tweets by krasiki78</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

◆━━◆

サイドバーにある「私の全ツイート」をクリックした際に表示される記事「Twitter：私の全ツイート」には、私が@krasiki78名義でTwitterに投稿した記事の中から任意のキーワードを検索した結果を別ウィンドウに表示するため、以下のHTMLコードを埋め込んでいます。

<form action="" method="get">
<input name="stext" size="40" type="text">
<input id="button1" onclick="window.open('https://twitter.com/search?src=typed_query&amp;f=live&amp;q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索(通常)">
<input id="button2" onclick="window.open('https://twitter.com/search?f=tweets&amp;src=typd&amp;q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索(IE向け)">
</form>

そのHTMLコードは、当初は以下のように検索ボタンが１個だけ表示される仕様でした。
しかし2019年8月あたりからWebブラウザが「Internet Explorer」(IE11を含む)以外の場合はTwitterでの検索結果表示の挙動が微妙に変わっていて、それにもっと配慮するため検索ボタンが横に２個並んで表示される上記の仕様に変更しました。

<form action="" method="get">
<input name="stext" size="40" type="text">
<input id="button1" onclick="window.open('https://twitter.com/search?f=tweets&amp;src=typd&amp;q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索">
</form>

その検索ボタンが１個だけ表示される仕様の旧HTMLコードを以下のように変更すると、Googleで普通に任意のキーワードを検索できる機能になります。

<input id="button1" onclick="window.open('https://twitter.com/search?f=tweets&amp;src=typd&amp;q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索">
　↓
<input id="button1" onclick="window.open('https://www.google.com/search?lr=lang_ja&amp;ie=UTF-8&amp;q='+encodeURI(stext.value))" type="submit" value="Google検索">

◆━━◆

2018/09/07、公式Bloggerヘルプ内の「ブログのデザインを変更する」→「HTML を使ってブログのデザインを変更する」に記された手順で、使用中ブログのテーマのHTML編集画面を表示。
　↓
当時その1560行目付近に1行だけ存在していた「<div class='post-footer-line post-footer-line-3'>」行の上に、「<a href="#">現在のWebページの上端へ戻る</a>」行を挿入。

これにより本ブログをウェブ バージョンで表示した場合のみ、「現在のWebページの上端へ移動」(クリック可)を、「Blogger テーマ デザイナー」( https://draft.blogger.com/template-editor.g?blogID=【ブログIDの値】)で言うところの「投稿のフッター」にも表示できました。
(モバイル バージョンで表示した場合は従来通り)
　↓
2018/09/08、それを更に修正してBlogger「シンプル」テーマ glovder15私用版1.1の完成とします。
この私用版1.1をそのまま他のBlogger利用者の方々にも適用できるようアレンジしたBlogger「シンプル」テーマ glovder15汎用版1.1も作成。これらを1個のzipファイルに纏めて自分のGoogleドライブへ投稿済。
こちらにアクセスすると、zipファイル"Blogger_backup_テーマ_20180908.zip"(386KB強)をGoogleドライブから直接ダウンロード可能。
それには以下３個のファイルが収録されているので、もし興味があれば一度御覧下さい。
詳細は以下の画像1を参照。

"「シンプル」テーマ glovder15私用版1.1；theme20180908per.xml" ←私以外に適用しても無意味
"「シンプル」テーマ glovder15汎用版1.1；theme20180908gen.xml" ←誰でも利用可
"「シンプル」テーマ glovder15汎用版1.1；サンプル画面.png" ←汎用版1.1適用例の画面コピー(こちらの画像と同じ内容)

◆━━◆

現在このブログではなく別途ポータル(玄関口)サイト側のメインページ内でのみやってる事ですが、HTMLタグの「 <a title="【補足情報】"> ～ </a> 」属性を利用して、パソコン向けの一般的なブラウザでマウスカーソルを重ね合わせる事によりツールチップで補足情報をポップアップ表示(突然飛び出すように出現)させる機能を組み込んでいます。
ただしtitle属性によるツールチップ表示機能はスマートフォンやタブレット端末などでは動作しない場合もあるため、HTML5の仕様書では「この属性に頼ることは推奨しない」とされているとの事。
これでも私はスマートフォン利用者をあまり軽視すべきじゃないとも考えているため、このブログではtitle属性を一切使わないつもりです。

◆━━◆

本ブログ内の関連記事：
2020/05/04 Googleドライブに関する覚え書き
2018/08/28 本ブログの使い方