(2020/05/04更新)
※この記事は今後も何度か更新する場合あり。
このブログはテーマが「シンプル」で、サイドバー部分には以下3個の「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&f=live&q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索(通常)">
<input id="button2" onclick="window.open('https://twitter.com/search?f=tweets&src=typd&q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索(IE向け)">
</form>
そのHTMLコードは、当初は以下のように検索ボタンが1個だけ表示される仕様でした。
しかし
2019年8月あたりからWebブラウザが「Internet Explorer」(IE11を含む)以外の場合はTwitterでの検索結果表示の挙動が微妙に変わっていて、それにもっと配慮するため検索ボタンが横に2個並んで表示される上記の仕様に変更しました。
<form action="" method="get">
<input name="stext" size="40" type="text">
<input id="button1" onclick="window.open('https://twitter.com/search?f=tweets&src=typd&q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索">
</form>
その検索ボタンが1個だけ表示される仕様の旧HTMLコードを以下のように変更すると、Googleで普通に任意のキーワードを検索できる機能になります。
<input id="button1" onclick="window.open('https://twitter.com/search?f=tweets&src=typd&q=from%3Akrasiki78%20'+encodeURI(stext.value))" type="submit" value="検索">
↓
<input id="button1" onclick="window.open('https://www.google.com/search?lr=lang_ja&ie=UTF-8&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ドライブから直接ダウンロード可能。
それには以下3個のファイルが収録されているので、もし興味があれば一度御覧下さい。
詳細は以下の画像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
本ブログの使い方