2017-09-12

【はてなブログ】ブログタイトル下にランダムで文言表示

はてなブログ javascript

f:id:ejoun:20170912214521j:plain

忙しいときほど余計なことをしたくなるもので、

本日は、はてなブログのタイトルの下のブログ説明に

ランダムで文字を追加しようと思います。

◆手順

1.ブログの「デザイン」設定ページへ行きます。

2.ブログテーマの設定が表示されますが、

　ひるまずに下図赤枠内の「カスタマイズ」アイコンをクリックします。

f:id:ejoun:20170912214953j:plain

3.上図赤枠内の「+モジュールを追加」をクリックし「HTML」を選択

4.下記コードを記述

var a = ['aaa','bbb','ccc'];

var b = document.getElementById('blog-description');

b.innerHTML += '<br><br>' + a[Math.floor(Math.random()*(a.length))];

</script>

5.表示確認

上記の配列「a」内の要素 ['aaa','bbb','ccc']のいずれかが表示されていれば、完成です。

配列内の要素　'aaa','bbb','ccc'　は内容の入れ替え、追加が可能です。

6.左上の「変更を保存する」で保存します。

◆結論

ユーザースクリプトを許可している、

はてなブログはユーザーに優しいですね。

2017-09-12

Windowsの游ゴシック体が細くて見づらい原因

css

Windows 10のブラウザ上で游ゴシック体が細くて見づらい原因は

cssでfont-weightを正しく設定していないためでした。

font-weightを無指定、つまり

font-weight:normalだと

最も細いウェイト、

「游ゴシック Light」

が表示される模様。

▼具体的な対策

「游ゴシック Medium」
が表示されるようにする。

■cssの書式　その１

font-weight:500;

とする。

■cssの書式　その2

font-family: "游ゴシック Medium", "Yu Gothic Medium";

とする。

font-weight:500;なんて

昔は使ってなかったのに…

頭を現代に戻す作業がたびたび発生しますね。

2017-09-07

javascriptで月齢計算

javascript

サイト内に月齢を表示するために、

下記を参考にさせていただきました。

https://news.local-group.jp/moonage/moonage.js.txt

f:id:ejoun:20170907224615p:plain

今のところ、順調に表示されています。

月の画像は月齢に合わせて

「0.png」～「29.png」を用意すれば

大丈夫だと思います。

アースリバー【 EARTH RIVER 】厳選クリスタルブランド

1998年にほぼ完成されていたのが趣深いといいますか、

インターネットも時代を重ねてきたかも……という

気持ちになりました。

2017-09-04

中国語（繁体字）のページです。日本語に翻訳しますか？

HTML

AndroidのChromeで現象確認。（2017年9月）

「中国語（繁体字）のページです。日本語に翻訳しますか？」

と突然、Chromeが翻訳を提案してきました。

いやいやいやいや。

これ日本語のページですから！

ワタシ　ニホンジン　デス！

というときの対策メモです。

■　対策　■

<head></head>　内に下記1行を追加して下さい。

<meta http-equiv="content-language" content="ja">

■　原因　■

漢字が多いページで発生する模様です（都道府県一覧など）。

■　おまけ　■

翻訳してみました。

ちょっとよく分からないですね……

f:id:ejoun:20170904235326p:plain

2017-09-04

【忘】スマホでPCページ表示になってしまう場合に確認すること

HTML

htmlページをスマホで閲覧した際に小さく表示される場合に確認する備忘録です。

<meta name="viewport" content="width=device-width, initial-scale=1" />

上の1行を忘れると、スマホで小さく表示されます。

この1行を書くと、スマホ対応ページ風になります。

＃浦島太郎状態なので、色々忘れてますね。

2017-09-04

検索結果にパンくずを追加したい

schema.org

f:id:ejoun:20170904214132p:plain

検索結果にパンくずを追加したいと思ったときのメモです。

おおよそ下記のような形でいけました。

具体的には文書内にschema.orgのbreadcrumbを追加します。

■HTML

■cssはおおよそこのようなかんじで

.breadscumb ol {
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
}
.breadscumb li {
display: inline-block;
}
.breadscumb li:after {
content:' > ';
}
.breadscumb li:nth-last-child(1):after {
content: "";
}

書式が正しいかの確認は下記にて。

構造化データテストツール

早めに反映してほしいときは「Search Console」から「Fetch as Google」する。

＃本当は左端のWebSite部分もschemaで変更したかったのですが、

　参考サイトを見つつ書いても反映されませんでした。（2017年9月）

2017-09-04

【ミス】自身をコピーすると中身が消える（ESTK）

ESTK

f:id:ejoun:20170904194204p:plain

なにこれ怖いと思ったのでメモ。

記述をミスしたため、

ファイルの中身が消えた

【ご注意】絶対に真似しないでください。

当サイトのご利用に際して生じたトラブルについては、

一切責任を負いかねます。

var copyFile = new File(fileURI);

copyFile.copy(copyFile);

0Byteのファイルがかんたんに作成できますね！

f:id:ejoun:20170904220011p:plain

ファイルの形だけは残って、中身がなくなるので焦りました。

殻だけの状態って言うんですかね、こういうの。。

アースリバー開発記

アースリバーというサイトを開発するにあたってのメモです。

【はてなブログ】ブログタイトル下にランダムで文言表示

Windowsの游ゴシック体が細くて見づらい原因

javascriptで月齢計算