晴れ時々曇り

スマホページのトップページにプロフィールを表示しました。

アイキャッチ画像は借り物です。
こんなにヒゲ濃くありませんから。
ついでにバナー画像も秋らしく衣替えしました。

スマホページにプロフィールを入れる方法

プロフィールは元々ブログにもあるのですが、アイキャッチ画像とか表示されないので(スマホは)
無理やり投稿記事の一番上に常に表示されるようにしました。
その記事はPCページでは表示されません。(一瞬だけ見えます)

常に記事のトップに乗せる裏技はひづけを未来にして投稿することです。2030/12/29になっています。

それとPCページには表示されない様にゴソゴソゴソとCSSを記事の中に入れてあります。Google先生に教えてもらいました。

それとトップページの罫線もドット線から実線に変更。

個別ページもタイトルを枠で囲ったり色を着けたりしました。(ちょっと今風に)

それといいねボタンも個別記事の一番下に設置しました。(気軽にポチッとお願いします。)
いいねボタンと日時・カテゴリーを横一列に並べるのが大変でした。(Google先生お疲れさまでした)

カスタマイズはこんなところです。

PCページに横型カレンダーを設置しました。
かなり以前に一度教えていただいて、横型カレンダーを設置していたことがあるあります。

その後、風ログはシックスアパート㈱のType Padを使っている為、仕様が変わって表示が出来なくなりました。
前回は詳しい方に教えていただいて設置出来ていました。感謝しています。m(_ _)m

その後も投稿日のリンク日付に赤丸が、メインブログになっていたりしました。

現在は大丈夫だと思います。多分

皆さんお気づきだと思いますが昨今ではスマホから見てる方が多いいと思って調べてみました。

先日設置したブログタイトルにNEW!!の表示をスタートしましたが１週間(7日)は長いのでは?
忘れた頃に投稿しているのでいいと言えばいいのかも知れませんが。
続けて真面目に投稿しようと心を入れ替えたので・・・。

7日では7つブログにNEW!!が表示されてありがたみが無いです。

そこで３日間に変更しました。

あれれーPC版は表示されないぞー。

翌日やっと直りました。多分ね

見ているみんなはブログタイトルにNEW!が付いていることにどう思っているのか調べてみました。

スマホページの投稿記事タイトルにNewを表示出来るようになりました。
投稿日から２週間はNewが表示されます。

風ログはシックスアパート株式会社のType Padを利用しています。
なのでType Pad系のブログなら設置が可能だと思います。たぶん...

※自己責任でお願いします。

投稿記事タイトルにNewを表示方法

①ジャバスクリプトをjsで簡単に設置する方法
まずは「new.js」を下からダウンロードして、②の<script src・・・></script>を自分様に変更してカスタムHTMLのモジュール内に書き込んで保存するれば完成です。

②<script src="あなたのファイルの保存先URL/new.js"></script>

それでは設置方法を説明します。
まずは以下から「new.js」をダウンロードしてデスクトップに保存します。(名前を変えない様に)

次にダウンロードした「new.js」ファイルをブログサーバーにアップします。

ファイルをブログサーバーにアップ

コントロールパネル→ファイル→ファイルをアップロードの下のファイルを選択をクリックして、ダウンロードした「new.js」を選んでアップロードボタンをクリックします。

ファイルのURLの調べ方

アップロードしたら「new.js」の場所を探して、右クリックします。表示の中からリンクのアドレスをコピーを選んで「new.js」のアドレス取得します。

取得した「new.js」のアドレスを先ほどの②の「あなたのファイルの保存先URL/new.js」にコピーしてカスタムHTMLへの書き込みの準備は出来ました。

<script src="あなたのファイルの保存先URL/new.js"></script>

カスタムHTMLへの書き込み方法

ホーム→デザイン→スマートフォン→表示項目→カスタムHTMLのモジュールを追加クリックしてモジュールを開くと名前とHTMLがあります。

名前は「なんでもOKですが例えば newとか書きます」→下のHTMLの枠内に②を記入→保存します。
保存するとカスタムHTMLに先ほど作成した「new」が現れます。「new」モジュールにチェックを入れて変更を保存して完成のはず。

※ここからnew.jsをダウンロードできます。→　new.js

Newの表示機関の変更方法

設定は２週間Newを表示する設定になっていますが、１週間にしたい場合はnew.jsをメモ帳などで開いて以下の様に変更してください。

ブログにいいねボタンを設置してみました。
以前から設置したいと思っていましたがなかなか難しいやっと設置出来ました。
ハートボタンを星などにも出来るようです。
スマートフォンサイトにも設置してみました。
気軽にいいねボタンを押しい見てください。

参考にさせていただいたサイト

いいねボタン for WordPress

WordPressサイトにいいねボタンを設置するプラグインです。 いいねボタンを押した後、お礼メッセージやイラストを表示できます。 コメントを受け付けることもでき、WEB拍手のような使い方も可能です。

https://do.gt-gt.org/product/iine-for-wp/

スマホのサイトでたまに「この記事は約〇分で読めます」と言うのが表示されることがあります。
最近はあんまり見かけないかな?

最近はブログをPCではなくスマートフォンで閲覧することが多いと思います。
ちょっとの時間とかにわざわざPCを開いてみることは大変です。

ある調査結果にスマートフォン(68.5%) PC(48.1%) と言う調査結果があります。
やっぱりスマホの時代ですね。
と言うことで「この記事は約〇分で読めます」を設置してみませんか?
設置方法は簡単です。
以下のJavascriptの記述をブログ内に書き込むだけです。
私は実際に読んでみて1分で500文字くらいだったので500にしています。

※「この記事は約〇分で読めます」の記述は以下の通りです。

<script type="text/javascript">

addEventListener('DOMContentLoaded', function() {

var wpm = 500;　 //1分間に読める文字数

var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;

var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';

$('.entry-content').prepend(message);

}, false);

</script>

※参考にさせて頂いたサイト

【Random Life Blog 日々のあれこれ】

はてなブログで読了時間(この記事は何分で読めます)を表示する方法 人は1分でどのくらいの文字が読めるのか?

https://randamlife.hatenablog.com/entry/20190621/reading-time

いつの間にか晴れ時々曇りのファビコンが元の風邪ログの物に代わっていました。
不思議ですねー。
今回ＰＣ用のファビコンの設定についてお話します。
ファビコン favicon (ブックアイコン)はアドレスバーのブログタイトルの前に表示されている下の物［晴］です。

ファビコンはブログ等のウェブサイトの印象を左右する重要で、ブランドイメージの魅力を表現するのに最適です。
そこまで言わなくても、人と違ったものが付いていればなんだか気分が良いと思いませんか？

通常ファビコンは下の記述をHTML内の<head> ～ </head>の間に入力する必要があります。

<LINK REL="SHORTCUT ICON" href="https://アドレス.kazelog.jp/〇〇〇/favicon.ico">

しかし、風ログは違うらしんです。上のようにやっても良いのでしょうが、多分これから説明するやり方で簡単に出来ると思います。

右のサイドメニューに日月出没計算する日月出没計算を設置しました。
観測地点へ調べたい地域を選択して計算するをクリックすると日の出・日の入及び月の出・月の入などが計算されて表示されます。
このjavascriptは菊地さんの工作室よりお借りしました。

サイト:菊地さんの工作室 http://kikuchisan.net/

ちなみに前橋市の今日 2025年4月6日を調べてみました。

【あわせて読みたい】

WebDev Techさん
JSとCSSで桜を降らせるエフェクトを実装する方法【コピペOK】

https://web-dev.tech/front-end/javascript/cherry-blossom-petal-falling-effect/

最近ではホームページのSSL化が進んでGoogl Chromeはもとより、FirefoxやMicrosoft EdgeなどでもSSLかしてないホームページやブログはレイアウトが壊れた表示になってしまいます。
それを防ぐには常時SSL化が必要です。

当然、風ログも同じですが風ろぐは簡単に常時SSL化が出来ます。

ブログに検索窓を設置してみました。

自分の過去のブログを探すことがたまにあるのでいちいちブログの修正から検索を掛けるのが面倒なので設置しました。

ブログにサイト内検索を設置する方法

Google カスタム検索を利用します。
上記アドレスからカスタム検索エンジンにログインして必要事項を入力して作成します。

①検索するサイト
サイト内検索で検索対象とするサイト(自分のサイト)の URL を入力する。

②言語
「日本語」を選択する。

③検索エンジンの名前
任意の名称を設定する。例えば (ブログ内検索)

④[コードを取得] ボタンをクリックするとコピーできます。

⑤自分のブログのデザイン→表示項目を選択→カスタムHTMLのモジュールを追加→名前・HTML入力→保存→四角にチェック→下の変更を保存→ブログを確認すると検索窓が表示されます。

⑥あとは並べ方を変更で好きな場所に移動して保存で終了。

※私のは上に画像を入れています。
　上の四角にチェックする時に名前をサイドバーに表示にチェックするとそこで入力した名前が表示されます。例えばサイト内検索

※現在、ブログ内検索が使えません。このブログだけかも。

先日hapicom's blogさんでHTML CSS JavaScript でアナログ時計を作るのを参考に当ブログにアナログ時計を設置してみました。(右上)

サーバーの時間を表しているのでミッションクリティカル（mission critical）では使えません。
どこからアクセスしても日本の時間になります。

～あわせて読みたい～

HTMLとCSSとJavaScriptでレスポンシブなアナログ時計を作る

https://blog.hapicom.jp/entry/2024/04/05/150832

気象庁のjsonを取得して天気予報を表示します。
天気予報のブログパーツが無くなって探していたのですが、Qiitaさんのところで「JavaScriptで気象庁から1週間の天気予報を取得してwebサイトに表示する」を紹介されていたいたのでお借りしました。
私の設置した天気予報は少しデザインを変えてあります。

～あわせて読みたい～

avaScriptで気象庁から1週間の天気予報を取得してwebサイトに表示する

https://qiita.com/LookUP/items/a934482a054444687439

やっとスマートフォン用バナーの変更が出来ました。
良かった良かった(^^)
やり方は自分ブログの(CSS) スタイルシートに以下をプラスするだけです。
※やる場合は自己責任でお願いします。

****方法の説明****

①バナーにしたい画像を用意します。(サイズはお好みで・・・)
②画像をブログのコントロールパネル → ファイル → banner (フォルダー作成・生宇は何でも可)　但しローマ字
③画像をアップしたらアドレスをコピーしておく
④(CSS) スタイルシートに以下を記述する

⑤スタイルシートをコントロールパネル → ファイル → (mystyles 名前は何でもOK)へアップ
⑥スマートフォンで確認する(たぶん出来ていると思います)

あわせて読みたい

自分の風ろぐへアクセスランキングに番号を付ける方法の中で(mystyles.css)マイスタイルシートを使ってブログをカスタマイズする方法を説明しています。

https://tarou.kazelog.jp/win/2024/04/post-e0df.html

久しぶりにブログのカスタマイズをやってみました。
PC用はいいのですがスマートフォン用のバナーが変更できません。
なんか頭痛くなってきました。
PCのバナーは気に入っているんですけど。

ブログカードなるものがあるのを最近知りました。ブログの中にカード型のリンクを貼り付けるものです。アイキャッチも入っていて名刺みたいです。下の物はアイキャッチが無い場合のブログカードの例です。No image用の画像のアドレスを入れればOKです。
以下はボックス付コメントの方法の自分のブログのカードになります。

ボックス付コメントの方法

ボックスの上にタイトルを入れることが出来る。これが出来るとブログにメリハリが出ていいです。この方法は「サルワカさん」に教えていただきました。

https://tarou.kazelog.jp/win/2025/01/post-42ba.html

以下のサイトで作成できます。バグ取りの日々さんありがとうございます。

バグ取りの日々

ブログカードジェネレータ
https://www.bugbugnow.net/p/app-blogcard-generator.html

これは内容の最後に入れた方がデザインが崩れなくて無難です。
ボックス付コメントの方法はまずスタイルシート(mystyles.css)を作成してください。windowsのメモ帳で以下を記入します。枠と題名の色は各々で指定してください。
ピンク　#FF00FF　オレンジ　#FF9966　ブラック　#000000 など。

記入が出来たらmystyles.cssとか名前を付けて保存してください。(メモ帳だと.txtになってしまうので.txtファイルをミギクリックして名前の変更から.cssに変更してもOKです)
次にできたmystyles.cssをコントロールパネルからファイルに入れます。この時にフォルダーをmycssなどの名前にしておきましょう。この時にmystyles.cssのアドレスを記入しておく。
次にmystyles.cssを読み込ませなくてはならないので名前の変更(風ろぐの場合)副題を開いて以下を記入します。

<link rel="stylesheet" href="https://先ほどの自分のアドレス.kazelog.jp/mycss/mystyles.css" type="text/css" />

あとはブログを書く時にボックス付コメントを入れたい場所で□HTMLの編集にチェックを入れて以下を入力します。

<div class="box26">
<span class="box-title">題名</span>
<p>内容をここに記入します。</p>
</div>

ブログを公開して出来上がりです。
公開してからブログを確認すれば枠が表れています。

風ろぐの自分のページにアクセスランキングを表示出来ることは知っていると思いますがそのランキングに順位をつけることができます。方法はいたって簡単です。スタイルシートを作って読み込ませるだけです。スタイルシートて難しそうですが簡単です。

①メモ帳に以下の記述を記入して名前を付けて保存する時にファイル種類をすべてのファイルにして名前を「mystyles.css」にして保存します。



.module-content #access-ranking-container ul li{
background:none;
display:list-item;
list-style-type:decimal;
margin: 0 5px 4px 25px;
padding: 0;
}

②「mystyles.css」をコントロール→ファイルからふ「mystyles.css」を参照から選択しアップロードします。どこでもOK但し「mystyles.css」までのアドレスは書き出しておきます。ここではcssのフォルダーを作成してそこへアップロードで説明しています。
③「mystyles.css」を読み込む記述を加えます。管理→名前や副題を変更をクリックしてブログの副題に以下の記述を加えれば完成。

※先ほど書き出したアドレスを記述します。
<link rel="stylesheet" href="http://〇〇〇.kazelog.jp/css/mystyles.css" type="text/css" />

※〇の部分はご自身のアドレスになります。

ブログをスマートフォン対応表示にしたのは良いのですが、CSSスタイルシートこれが曲者なかなか難しい。余白の取り方がよくわかりません。
もう少し勉強しなくちゃね。
せめてスマートフォンのCSSだけでも変更出来ればいいんだけどね。

久しぶりにブログを改造して好きな海外自動車メーカーのアンケートを設置してみました。(右サイドバー参照)
おひとり様一回投票をお願いします。
よろしくお願いします。
追伸・・・もっと自動車メーカーはあるんですけどねー。