ブログにいいねボタンを設置しました。
ブログにいいねボタンを設置してみました。
以前から設置したいと思っていましたがなかなか難しいやっと設置出来ました。
ハートボタンを星などにも出来るようです。
スマートフォンサイトにも設置してみました。
気軽にいいねボタンを押しい見てください。
参考にさせていただいたサイト
いいねボタン for WordPress
晴れ時々曇り
<ｓｃｒｉｐｔ ｔｙｐｅ="ａｐｐｌｉｃａｔｉｏｎ/ｌｄ+ｊｓｏｎ">
{
"@context" : "https://schema.org",
"@type" : "WebSite",
"name" : "晴れ時々曇り",
"url" : "https://tarou.kazelog.jp/win/"
}
2025-04-09
2025-04-07
スマホサイトに「この記事は約何分で読めます」を付けてみました。
スマホのサイトでたまに「この記事は約〇分で読めます」と言うのが表示されることがあります。
最近はあんまり見かけないかな?
最近はブログを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 日々のあれこれ】
ファビコン favicon (ブックアイコン)の設定について (PC)
いつの間にか晴れ時々曇りのファビコンが元の風邪ログの物に代わっていました。
不思議ですねー。
今回ＰＣ用のファビコンの設定についてお話します。
ファビコン favicon (ブックアイコン)はアドレスバーのブログタイトルの前に表示されている下の物［晴］です。
ファビコンはブログ等のウェブサイトの印象を左右する重要で、ブランドイメージの魅力を表現するのに最適です。
そこまで言わなくても、人と違ったものが付いていればなんだか気分が良いと思いませんか？
通常ファビコンは下の記述をHTML内の<head> ～ </head>の間に入力する必要があります。
<LINK REL="SHORTCUT ICON" href="https://アドレス.kazelog.jp/〇〇〇/favicon.ico">
しかし、風ログは違うらしんです。上のようにやっても良いのでしょうが、多分これから説明するやり方で簡単に出来ると思います。
2025-04-06
菊地さんの工作室よりお借りして日月出没計算を設置しました。
右のサイドメニューに日月出没計算する日月出没計算を設置しました。
観測地点へ調べたい地域を選択して計算するをクリックすると日の出・日の入及び月の出・月の入などが計算されて表示されます。
このjavascriptは菊地さんの工作室よりお借りしました。
サイト:菊地さんの工作室 http://kikuchisan.net/
ちなみに前橋市の今日 2025年4月6日を調べてみました。
2025-03-20
花びらが散る と言うか花びらが散ります。
背景に桜の花びらが散ります。
Javascriptを利用したものです。
本当はバックに大きな桜の木が映るのですが私は画像が無いので映りません。
【あわせて読みたい】
2025-03-16
風ログの常時ＳＳＬ化をしましょう。ＳＳＬ化しないとブログが見れなくなります。
最近ではホームページのSSL化が進んでGoogl Chromeはもとより、FirefoxやMicrosoft EdgeなどでもSSLかしてないホームページやブログはレイアウトが壊れた表示になってしまいます。
それを防ぐには常時SSL化が必要です。
当然、風ログも同じですが風ろぐは簡単に常時SSL化が出来ます。
2025-03-15
ブログにサイト内検索を設置する方法
ブログに検索窓を設置してみました。
自分の過去のブログを探すことがたまにあるのでいちいちブログの修正から検索を掛けるのが面倒なので設置しました。
ブログにサイト内検索を設置する方法
Google カスタム検索を利用します。
上記アドレスからカスタム検索エンジンにログインして必要事項を入力して作成します。
①検索するサイト
サイト内検索で検索対象とするサイト(自分のサイト)の URL を入力する。
②言語
「日本語」を選択する。
③検索エンジンの名前
任意の名称を設定する。例えば (ブログ内検索)
④[コードを取得] ボタンをクリックするとコピーできます。
⑤自分のブログのデザイン→表示項目を選択→カスタムHTMLのモジュールを追加→名前・HTML入力→保存→四角にチェック→下の変更を保存→ブログを確認すると検索窓が表示されます。
⑥あとは並べ方を変更で好きな場所に移動して保存で終了。
※私のは上に画像を入れています。
上の四角にチェックする時に名前をサイドバーに表示にチェックするとそこで入力した名前が表示されます。例えばサイト内検索
※現在、ブログ内検索が使えません。このブログだけかも。
HTML CSS JavaScript でアナログ時計を設置してみた
先日hapicom's blogさんでHTML CSS JavaScript でアナログ時計を作るのを参考に当ブログにアナログ時計を設置してみました。(右上)
サーバーの時間を表しているのでミッションクリティカル（mission critical）では使えません。
どこからアクセスしても日本の時間になります。
～あわせて読みたい～
2025-03-11
天気予報を設置しました。
気象庁のjsonを取得して天気予報を表示します。
天気予報のブログパーツが無くなって探していたのですが、Qiitaさんのところで「JavaScriptで気象庁から1週間の天気予報を取得してwebサイトに表示する」を紹介されていたいたのでお借りしました。
私の設置した天気予報は少しデザインを変えてあります。
～あわせて読みたい～
2025-03-02
スマートフォン用バナーを自作画像に変更
やっとスマートフォン用バナーの変更が出来ました。
良かった良かった(^^)
やり方は自分ブログの(CSS) スタイルシートに以下をプラスするだけです。
※やる場合は自己責任でお願いします。
****方法の説明****
①バナーにしたい画像を用意します。(サイズはお好みで・・・)
②画像をブログのコントロールパネル → ファイル → banner (フォルダー作成・生宇は何でも可) 但しローマ字
③画像をアップしたらアドレスをコピーしておく
④(CSS) スタイルシートに以下を記述する
⑤スタイルシートをコントロールパネル → ファイル → (mystyles 名前は何でもOK)へアップ
⑥スマートフォンで確認する(たぶん出来ていると思います)
あわせて読みたい
2025-03-01
ブログのカスタマイズ
久しぶりにブログのカスタマイズをやってみました。
PC用はいいのですがスマートフォン用のバナーが変更できません。
なんか頭痛くなってきました。
PCのバナーは気に入っているんですけど。
2025-01-25
リンクカードを作ってみました。
ブログカードなるものがあるのを最近知りました。ブログの中にカード型のリンクを貼り付けるものです。アイキャッチも入っていて名刺みたいです。下の物はアイキャッチが無い場合のブログカードの例です。No image用の画像のアドレスを入れればOKです。
以下はボックス付コメントの方法の自分のブログのカードになります。
ボックス付コメントの方法
以下のサイトで作成できます。バグ取りの日々さんありがとうございます。
バグ取りの日々
2025-01-08
ボックス付コメントの方法
Point
ボックスの上にタイトルを入れることが出来る。これが出来るとブログにメリハリが出ていいです。この方法は「サルワカさん」に教えていただきました。
これは内容の最後に入れた方がデザインが崩れなくて無難です。
ボックス付コメントの方法はまずスタイルシート(mystyles.css)を作成してください。windowsのメモ帳で以下を記入します。枠と題名の色は各々で指定してください。
ピンク #FF00FF オレンジ #FF9966 ブラック #000000 など。
cssの内容
.box26 { position:relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #CCFF66;/***枠の色指定**/
border-radius: 8px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #CCFF66;/****題名の色指定***/
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}
記入が出来たら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>
ブログを公開して出来上がりです。
公開してからブログを確認すれば枠が表れています。
2024-04-07
自分の風ろぐへアクセスランキングに番号を付ける方法
風ろぐの自分のページにアクセスランキングを表示出来ることは知っていると思いますがそのランキングに順位をつけることができます。方法はいたって簡単です。スタイルシートを作って読み込ませるだけです。スタイルシートて難しそうですが簡単です。
①メモ帳に以下の記述を記入して名前を付けて保存する時にファイル種類をすべてのファイルにして名前を「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" />
※〇の部分はご自身のアドレスになります。
2024-03-25
CSSスタイルシートは難しい
ブログをスマートフォン対応表示にしたのは良いのですが、CSSスタイルシートこれが曲者なかなか難しい。余白の取り方がよくわかりません。
もう少し勉強しなくちゃね。
せめてスマートフォンのCSSだけでも変更出来ればいいんだけどね。
2022-11-06
好きな海外自動車メーカー
久しぶりにブログを改造して好きな海外自動車メーカーのアンケートを設置してみました。(右サイドバー参照)
おひとり様一回投票をお願いします。
よろしくお願いします。
追伸・・・もっと自動車メーカーはあるんですけどねー。
2015-04-08
ブログの仕様変更かなんかやってました？
ここ最近ブログの仕様の変更かなんかやっていて(システム側)スマートホンからの閲覧とかｊａｖａ(サイドバーの＋－のボタン)が反映されませんでした。
やっと先週あたりから直りました。ｃｓｓ(デザインの仕様)を変更しようかと思いましたが、変更しなくても良いみたいです。
このブログはホッタラカシ(笑)の様に不定期更新中ですが、取りあえず毎日覗いています(汗)
最近不定期更新になった理由について考えたのですが。
たぶんですねーiPhoneにしてしばらくしてから、投稿の画面がiPhoneから開くと化けたり書き込みエラーになってしまったのが最大の理由ですね。
iPhone用のアプリは出ているのですが風ログは仕様が違うみたいで残念！！
話は変わって
以前からデザインを変えようと思っているんですが、なかなか腰が重くて変えられずにいます(汗)
このブログのデザインはブログの初期のデザインですからねー(古)
腰をすえて手直しがしたいな～(汗)
2013-09-08
Twitterブログ設置で幅が合わない時の対処方
Ｔｗｉｔｔｅｒが３月から旧公式ウェジットのサポートが終了してブログで表示されなくなりました。
いつもスマホで見てたので気が付きませんでした(汗)
今日ようやく気が付いて変更しておきました。
私のブログはＷが220より狭いので通常のコピペでは端が切れてしまいます。
そこで色々調べてみたらスタイルシートの最後に以下を書き込むだけで出来ました。
.twitter-timeline {
min-width:180px!important;
}
私はスタイルシートを自分用の物を読み込ませていたので出来ました。
やり方はTypePad ベーシックでcssを変更するをご覧下さい。
もう一つの方法
Ｔｗｉｔｔｅｒのソースコード内に以下を書き込む
<a class="twitter-timeline" width="ｘｘｘ" height="ｘｘｘ"href="https://twitter.com・・・・
widtg="ｘｘｘ" height="ｘｘｘ" ｘｘｘは好きなサイズです。
2013-01-05
群馬県人度クイズ
群馬県人度クイズを再開しました。
ぜひ挑戦してください。
問題も新しく追加しましたよ～。
★サービス問題
上毛かるたで『ねぎと○○○○○下仁田名産』
○○○○○にあてはまる言葉は?
2012-09-15
スマートフォン対応ページへのリンク
スマートフォンページへのリンクを作りました。ページはMOBIFYを利用しています。
そのためコメントはkazelogページからしかコメント出来ません(汗)
よろしくお願いします。
Calendar
Well come!! 晴れ時々曇り
お勧めの本
奥野 宣之: 情報は1冊のノートにまとめなさい 100円でつくる万能「情報整理ノート」 (Nanaブックス)
トラベラーズノート風Ａ６ノートを作るきっかけになった一冊です。
(TT)戸田プロダクション: 清く正しい本棚の作り方
本を読んで本棚を作ってみようと思いました。思った以上に簡単で楽しい作業でした。自分で作った世界に一つだけの本棚です。
藤原 誠太: 日本ミツバチ―在来種養蜂の実際
日本蜜蜂に興味を持って手にした初めての本です。そこから蜜蜂を飼うことになりました。
ジョージア・サバス: 魔法の杖
かなり前からこの本は家にあったけど私だけ使い方を知りませんでした。使い方が解ればきっと欲しくなる一冊です。
いいねボタンJV
