読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

人生、なすがママ、きゅうりがパパ

あぁ今日は母親の誕生日だった

さっき電話で話したけど「おめでとう」言うの忘れてた。

でも言うときっと「もうこの歳になると『めでたくない』」というんだ。

毎年そうなんだ。

そういえば先日
goisan.hatenablog.com
と言った記事を読んだ時に「誕生日にケーキでも買って行ってやるか」なんて思ってたけどすっかり忘れてた。

まぁ、来年な・・・来年。それまでは元気でいてくれるだろう。

今年になってブログに巨額マネーを投資をした結果、財布が凍死した模様。

今年になってやたらとお金の減りが大きい。

人気アフィリエイトブロガーなら「へっちゃらさ」と笑っていられるところであるが、おじさんはそうはいかない。

PV激減りブロガーだからだ。

お金が急速に減って行った理由を考えるとどうやら今年になってブログに湯水のように巨額のマネーを投資した結果、財布が凍死したことが判明した。

今年になってブログに投資した金額は

早速調べてサクッと一覧表にしてみた。
ツールアフィンガー45,500円
アフィリエイトタグ管理プラグイン4,800円
検索順位チェックツールGRC4,930円
参考書籍沈黙のWebライティング Webマーケッターボーンの激闘SEOのためのライティング教本〉2,160円
SEOに強い Webライティング 売れる書き方の成功法則642,138円
独自ドメインお名前.com1,123円
1,253円
755円
レンタルサーバロリポップ!648円
さくらのレンタルサーバ515円
MixHost11,760円
合  計35,582円

今年になって「WordPressの方がいいじゃん」なんて思い、いくつかサイトを立ち上げた結果こんなにもお金使っていた。

総額:35,582円

アフィンガー4買って関連のプラグイン買って、ついでに「GRC」まで買って・・・。
SEOやライティングも重要とか言いながら本買って、やっぱり「専門性のあるサイト作らんと」と言いながら独自ドメイン3つも取って(ほぼ放置)。

アクセス増えないのはWordPressサイトの表示が遅いからやなと、自分の記事の品質の低さにも目を向けず「速いサーバーがいいやん」と「MixHost」・・・あほやん。@(・●・)@

そりゃお金無くなって財布、凍死するわ。

この巨額マネーを回収するのには天文学的な年月が必要かもしれん。
あ、最近買った本「宇宙に「終わり」はあるのか 最新宇宙論が描く、誕生から「10の100乗年」後まで」いいですよ。

ということで早く春になって温かくならないと本当に凍死してしまいそう。
そういやこんなんも作って放置してるわ。
amateur-investment.hatenablog.com

会社辞めるって言ったらカウンターオファー受けてみたり

前々から考えていたこと。

会社を辞める。

ついに会社に「会社辞めまーす」みたいなことを言いました。

理由は「やることないし、ヒマだし、それにプログラムをゴリゴリ作る歳じゃないし」。
(それなのにブログはサボり気味。)

ありがたい事に「あ、そう」という話にはならず「じゃあ今度は○○なことしないか?」といわゆるカウンターオファーを受けるわけです。

カウンターオファーとは

ってことです。

まぁ「あ、そう。それじゃ、さいなら。」では寂しいですけど一旦下がったモチベーションは再度あげるのも難しい。
「次、決まってない」という漠然とした(いやかなり大きなウエイトを占めた)不安もある。

さてどうする?おっさん・・・。
宝くじでも当たらんかのう・・・10億円でええわ。

アフィンガー4でWordPressプラグイン「Autoptimize」を有効化すると読み込まれるCSSがなくなる。

先日購入して絶賛使用中の「アフィンガー4」。
使いやすくて本当によい。

金曜日に運用中のサーバーが遅くて表示に時間がかかっていたのでWordPressを高速化しようということでWordPressプラグイン「Autoptimize」を導入しました。

WordPressプラグイン「Autoptimize」は「HTML」「CSS」「Javascript」のファイルなどを圧縮してくれるプラグイン。

実際は速くなったのか実感はなかったのですが、そのままにしてましたが今日ちょっとしたトラブルに気が付きました。
(※アフィンガー4が悪いわけではないです。)


アフィンガー4でプラグイン「Autoptimize」を有効化すると
H3タグのチェックマークが出ない。
原因は読み込まれるCSSから「Font Awesome」が外れるから!!

アフィンガー4でAutoptimizeを有効化するとチェックマークが出ない

アフィンガー4をお使いの方はご存知かもしれませんがアフィンガー4の設定に「h3タグにチェックマークを一括適応する」というのがあります。
これをチェックするとH3タグに全部に「Font Awesome」のフォントでチェックマークが付きます。
こんなやつね

でもね、つかなくなったんですよ突然。

原因はWordPressプラグイン「Autoptimize」

最初は原因がわからなかったのですが、とある自分の記事をみてるとおかしなことが。
どうやら「Font Awesome」のフォントで書いている部分が消えてる(表示されてない)。

で、ソースをみると確かに「Font Awesome」の読み込みがない。

あれ、アフィンガーに変えた時に読み込み部分も消してしまったかな?なんて思いながら、他で運用しているアフィンガー4のサイトをみると、そこではちゃんと表示している。

違いは金曜日にした「高速化」。

早速調査すると「Autoptimize」を有効化すると表示されなくなる。

CSSを読み込んでるソース部分を停止した状態と有効化した状態で確認すると
WordPressプラグイン「Autoptimize」を停止

  1. affinger4/css/normalize.css
  2. affinger4/css/fontawesome/css/font-awesome.min.css
  3. affinger4-child/style.css
  4. affinger4/st-kanricss.php
  5. affinger4/st-rankcss.php
  6. affinger4/st-themecss-loader.php

WordPressプラグイン「Autoptimize」を有効化

  1. affinger4/st-kanricss.php
  2. affinger4/st-rankcss.php
  3. affinger4/st-themecss-loader.php

って、読み込まれてへんやん「Font Awesome」。

そりゃあかんわ。ということで「Autoptimize」は停止。
無事表示された

「Autoptimize」のソースを見たわけではないので読み込まない原因はわかりませんが、無効化することで解決です。

はてなブログで独自のWEBフォントを利用する方法

昨日書いた記事
www.fair-skinned-monster.com
のブクマに

PV激減でブログ書く気がしないあなたに朗報。GRCでブログを書くモチベーションを上げる方法を伝授。 - 攻めは飛車角銀桂守りは金銀三枚

人気キーワードなら勝てないしニッチなら人が来ないしジレンマですよね/黒板いいね

2017/02/23 23:10
b.hatena.ne.jp
と「黒板いいね」褒められたので調子に乗って今日はその「黒板」の中を手書き風フォントにしてました。

実はこの「黒板風CSS」はどなたかがされてて「おお、かっこいい」ということで勝手にオマージュして使わせて頂きました。
リンクを貼ろうと思ったのですが、元が見つかりませんでした。
作者の方すみません、お許しください。

そのままではなんなので「ここがポイント!!」なんて付けたりしてます。

で、今日はそのフォントもできればチョーク風に、と思ってフォントをさがしたのですが、なかなか漢字が表示できて無料で自由に使えるフォントなかったのです。
今回は
tanukifont.com
を利用させていただきました。


  1. フォントをダウンロードする。
  2. フォントの形式を変換する。
  3. フォントをサーバにアップロードする。
  4. CSSに反映する。
  5. クロスドメイン対応をごにょごにょする。

では早速始めましょう。

まずフォントをダウンロードします。
今回ダウンロードした「たぬき油性マジック」は「ttf」形式のフォントなので、このままでも使えるのですが、InternetExploreでは反映されませんでした。

「WOFFコンバーター」というソフトを使って形式を「WOFF」「WOFF2」「EOT」という形式に変換して使います。
(ツールの使い方は簡単で「tff」ファイルを選択して「EOTを作る」にチェックを入れて変換するだけなので省略。)

できたフォントファイルをサーバーにアップします・・・そう、サーバーが必要です。
はてなブログはファイル管理できないのでどうしても他のサーバーにアップロードする必要があります。

この際お安いサーバー借りましょう。

はい、借りましたか?

あ、独自ドメインも取っておいた方がいいかな。お任せします。

では次です。FTPツールでサーバーに適当なフォルダー作成してできたフォントファイルごっそりアップロードしましょう。

できましたか?

それではCSSに反映します。
CSSに以下の文を追加します。

@font-face {
    font-family: 'tanuki-pen-font';   /*この名前はなんでもいい。好きにつけて*/
    src:url("http://あんたのドメイン名/TanukiMagic.woff2") format("woff2"),
        url("http://あんたのドメイン名/TanukiMagic.eot?#iefix") format("embedded-opentype"),
        url("http://あんたのドメイン名/TanukiMagic.woff") format("woff"),
        url("http://あんたのドメイン名/TanukiMagic.ttf") format("truetype");
}

あとは実際に黒板CSSを作ってフォントを利用するだけです。

.blackboard{
    font-family: 'tanuki-pen-font';   /*付けたフォントの名前を指定*/
    padding: 1em;
    color: #ffffff;
    background-color: #006600;
    box-shadow: 2px 2px 2px #000000, 2px 2px 2px #000000 inset;
    border: 10px solid #996600;
    font-size: 18px;
}
.blackboard::before {
  font-family: 'tanuki-pen-font';  /*付けたフォントの名前を指定*/
  top: -12px;
  left: 10px;
  padding: 0 10px 0 13px;
  content: "ここがポイント!!";
  background-color: #ff80bf;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
}

でテスト表示・・・で反映されず。

しばり原因調査するとどうやら「クロスドメイン問題」の模様。

はい、これです。

う〜ん、困った。でもこんな時はGoogle先生に聞けば・・・ということで情報ありました。
どうやら「.htaccess」ファイルに「クロスドメイン許しちゃうよ」みたいな設定ができると。

Header set Access-Control-Allow-Origin: "*"

この1行を追加すると、あ〜ら不思議。クロスドメイン問題通り越してちゃんとフォントが読めるようになった。
(実際は「*」はどんなURLからでもという意味らしいので「自分のはてなブログのトップURL」を設定してます。)
注意事項としては「フォントをアップロードしたフォルダーに「.htaccess」作ること。

これで見えてるでしょ?新しいフォント。

<div class="blackboard">
<ol>
<li>まずはレンタルサーバ借りな!!</li>
<li>独自ドメインも獲りな!!</li>
</ol>
話はそれからだ。
</div>

って書くと下のようになるはず。


  1. まずはレンタルサーバ借りな!!
  2. 独自ドメインも獲りな!!
話はそれからだ。

せっかくサーバ借りたのに「できない」などの苦情、質問は面倒なので受け付けませんwww。
なんか問題起きても責任はとれませんので自己責任でお願いします。