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

Hold Fast that Which is Good

良きものをつかむために綴るブログです。皆様のレスポンスが何よりの活力になります。どうぞよろしく。

  follow us in feedly  


Assault Attack - はてなブログカスタマイズ記録4

雑記
このエントリーをはてなブックマークに追加
あとで読む

ブログを開設して3ヶ月

f:id:holdfast:20150801125315j:plain

おかげさまで、このブログを開設して3ヶ月となりました!
これも閲覧していただいている皆様のおかげです、本当にありがとうございます!
3ヶ月も経つと、何か一つの節目を越えられたかな、という感じがします。

7月は自分が予想した通り、カオスな月となりました。
海外移住を筆頭に、注目のブログに抜擢されたり、ゲームソフトのプレゼントに
当選したり等、今までにはあり得なかったことばかりが起こったので
実に充実した1ヶ月だったな、と思っています。

ちょっとばかり近況報告しますと、最近は現地で車の運転を実習しています。
現地は日本と真逆の【左ハンドル・右側通行】ですから、何もかもを逆に考えないと
運転出来ません。
しかも、ウインカーとワイパーの配置や、給油口も全部逆ですから混乱してくる!w
日本では10年以上の運転経験があるゴールド免許保持者の私でも、
実際に走ってみて、いつも緊張しっぱなしの毎日です。
教習所での実習時とは比べものにならない程、怖さあふれる異様な空間ですw
何せここでは日本とは違って、
一般道で高速並みのスピード(80km/h以上)を出してもいいことになっているのでw

とまあそんなこんなでタフな生活が続いていますが、
今回は2ヶ月ぶりに、このブログに施したカスタマイズを報告していこうと思います。
この報告はもう4回目となりますが、今回は今までになく複雑なことをしていますので
中身の濃い内容になるかと思います。
自分への備忘録としても活用する作りにしますが、参考になるものがあれば幸いです。

 

Assault Attack

Assault Attack

  • マイケル・シェンカー・グループ
  • ロック
  • ¥250

 

Assault Attack (2009 Remastered Version)

Assault Attack (2009 Remastered Version)

 

 

 

カスタマイズ編(前編)

まずはもちろん、カスタマイズからご報告させていただきますが、
先程も書いた通り、今回はかなり複雑なものを実装したりしていますので、
意味のわからないものは素通りしていただいてもよろしいかと思います。
「素人があれやこれややっとるわ」という感じでご覧ください。

ちなみに、今回はカスタマイズした項目が多く、文章も長めになることが
予想されるので、前後編と2つに分けてご報告いたします。

 

 

1.Amazon Publisher Studioの導入

f:id:holdfast:20150801161012j:plain

このブログでは画像を多用してビジュアルとしてもお楽しみいただける作りに
していますが、そんなブログにうってつけのツールがAmazonより
リリースされていたことを今更ながら知ったので、早速導入することにしました。

それが、ブログの画像から直接アフィリエイトの商品リンクを作成出来る
Amazon Publisher Studio*1です。

 

皆さんもこのブログをご覧になった際、各画像に【a|今すぐ購入する】という
ひっそりと存在しているオブジェクトを見かけたことと思いますが、
それがPublisher Studioによるアマゾン・アソシエイトの商品リンクです。
Amazonアカウントと、アマゾン・アソシエイトの審査に通ったご自身のブログや
Webサイトをお持ちであればすぐに使えます。

こちらは自力で導入したので、私が1から詳しく説明してもいいのですが、
別に説明する必要はない程、導入は結構簡単です。

 

f:id:holdfast:20150730234157j:plain

Publisher Studioの登録ページに遷移すると、下側に画像のような登録スペースが
ありまして、そこのテキストボックスにご自身のブログやWebサイトのアドレスを
入力してJavaScriptを生成すると、コードが表示されますので、それをコピーして、
はてなブログの場合は【フッタ】に貼り付ければそれで導入完了です。

 

f:id:holdfast:20150731190313j:plain


なお、貼り付けた後にPublisher Studioの登録ページからツールバーを有効にする】
をクリックするのを忘れないよう注意が必要です。

「それだけではよくわからん!」という方は、
導入の大いに参考になるものとして、私も読者になって以降、毎回興味深く読ませて
いただいている、りゅうのすけさんのブログから、こちらの記事をご紹介いたします。

 

この記事は画像付きで詳細に手順が書かれてある上、アソシエイトの申請方法から
始まっているので、大変わかりやすいです!
私のザルな説明では何の解決にもならなかった方は、ぜひ参考にしてみてください。
りゅうのすけさん、本当にありがとうございます。
該当のページにははてブさせていただいております。

 

f:id:holdfast:20150801180425j:plain

ちなみに、画像ならば何でもタグ付け出来るPublisher Studioですが、
初期設定のままでは、はてなブログの【Amazon商品紹介】のリンク画像にも
タグ付けの対象になってしまうので、上の画像のように設定値を変更すると
使いやすくなるかな、と思います。
特に【シアターモード】でタグ付けされる方にはかなりオススメです!

 

 

2.目次を追加

f:id:holdfast:20150730235640j:plain

今更ながら、各記事に目次を追加しました。
【h3】の見出しに対応しており、リンクからその見出しに一気に遷移出来ます。

本当はこの目次、実装には消極的でした。
何故なら、目次を見ることで大体の内容が判明するため、最悪目次だけで見切られる
可能性があると思ったからです。
しかし、利便性は間違いなくあることと、見切られたのならばそれはそれなりの
記事しか書けなかった自分のせいに他ならないという考えから
実装に踏み切りました。

この設定には、こちらの記事を参考にさせていただきました。
番地さん、本当にありがとうございます。
該当のページには、はてブさせていただいております。

 

 

3.ブログの幅を広くし、カスタム検索を刷新

f:id:holdfast:20150731000805j:plain

これはついに念願が叶った大改良と言うべきものです!
以前から、このブログの2カラムの幅が気に食わないと思っていた私にとって
これは何が何でも実装しなければならない急務と言えるものでした。

 

前にWebデザインについての記事を書いていた時は途方に暮れていて、
いつか解決する旨を書いた覚えがありますが、
この幅変更により、大方の問題が解決しました!
さすがにブラウザのウィンドウサイズ変更による問題までは解決とはなりません
でしたが、カスタム検索の強制改行がなくなり、プロフィール紹介文も見栄えが
良くなりと大満足です!

 

f:id:holdfast:20150731152320j:plain

そのカスタム検索ですが、アドセンス内にある【カスタム検索エンジンでは
どうも性能が悪いようなので、カスタム検索エンジン設定ページ内の一番下にある
【その他の検索オプション機能】をクリックし、カスタム検索から詳細に
検索ボックスを作成出来る所からコードを引っ張って来ました。

 

f:id:holdfast:20150731152515j:plain

こちらがカスタム検索の画面です。
私はここで、テーマを【シンプル】、検索ボタンの色を【#357AE8】に変更して
設定しました。

そして、このブログの全体幅(#container)を1118pxに、
メインカラム(#main)を768pxサイドバーの右カラム(#box2)を300px
広げて設定しました。
CSSで書くとこうなります。
管理画面から、【デザイン】→【デザインCSS】内に書けばOKです。

#container {
width: 1118px;
}

#main{
width: 768px;
}

#box2 {
width: 300px;
}

こうすることで、記事内にビッグバナー(728×90px)が完全に収まり、
サイドバーにレクタングル(300×250px)アドセンス
違和感なく貼れるからです。
(ちなみに、全体からカラムの総数【1068px】を差し引いた50pxは、
メインカラムと右カラムの間にある空白スペースとなります)

なお、幅を広げたことに基づき、記事内の文字サイズを18pxに拡大しました。
【見たまま編集モード】の1行の長さと完全に一致するようにしているので
こっちは書きやすく、閲覧側もよりはっきりと読みやすくなったかと思います。

この設定には、こちらの記事を参考にさせていただきました。
この記事は【2カラムのブログデザインを採用しているブログ】に絶大な効果を
発揮するものなので、大いに役立つこととなりました。
うさもふさん、本当にありがとうございます!
今回の中では紛れもなく最強のカスタマイズです!
該当の記事ページには、はてブさせていただいております。

 

前編は以上です。

よくわかるHTML5+CSS3の教科書【第2版】

よくわかるHTML5+CSS3の教科書【第2版】

 

 

 

カスタマイズ編(後編)

ここからは後編となります。最後の7.に注目!

 

 

4.【あわせて読みたいG】を追加

f:id:holdfast:20150731003010j:plain

こちらは記事下に、設定したカテゴリーと同カテゴリーの他記事を3件紹介する
という機能です。
「こんな記事もありますよ~」というやつですね。
関連記事としてブログカードが3つ表示されます。

実装当初は5件分表示させていたんですが、それだとコメントボタンがはるか下まで
移動してしまって、個人的に望ましくない状況になるので、3件にしています。

この設定には、こちらの記事を参考にさせていただきました。
池田仮名さんはこれでこのブログのカスタマイズで3回もお世話になっております。
本当にありがとうございます。
該当のページには、はてブさせていただいております。

 

 

5.【あとで読む】を追加

f:id:holdfast:20150731150426j:plain

こちらも利便性向上のために実装したものです。
はてなブックマークブックマークレットを利用したもので、
「今ちょっと読む暇ないから後で読む」といった使い方が出来るようにしました。

とは言え、この機能は記事上にある【B!ブックマーク】のソーシャルボタンと
やっていることは同じです。
どちらを使用しても構いませんのでお好きなのをどうぞ。

なお、ここで使用している色は【#008fde】としています。

この設定には、こちらの記事を参考にさせていただきました。
またまた池田仮名さんの制作物で、これで4回採用と完全にカスタマイズの先生と
なっている次第です。本当にありがとうございます。
該当のページには、はてブさせていただいております。

 

 

6.引用のデザインを変更

f:id:holdfast:20150731204712j:plain

引用を使用時、左上と右下にアポストロフィーの模様をつけたデザイン
採用しています。
実はこれは以前から採用しているものだったんですが、何せ過去に引用は
1回しか使っていなかったため、失礼ながら自分でも忘れていました。

この設定には、こちらの記事を参考にさせていただきました。
tasukujpさん、本当にありがとうございます。
該当のページには、はてブさせていただいております。

ところではてなさん、Amazon商品紹介のAndroidアプリの不具合、
いつ修正していただけるんでしょうか?ずっと待ってるんですが。 

 

 

7.Webフォント【Google Noto Sans Japanese】にフォントを変更

f:id:holdfast:20150801162029j:plain

さて、このブログを以前からご覧になっていた方には、ぱっと見で急激な変化に
驚かれた方もいらっしゃるかもしれません。

先程、【文字サイズを18pxに変更した】というのがありましたが、それと同時に
この度、このブログのフォントを一新し、Webフォントとして完全無料かつ
商用利用も可能Google Noto Sans Japanese】を採用することを決断しました!

 

上に載せた画像は比較画像で、左側が今までのはてなブログ標準のフォント
右側がNoto Sans Japaneseのフォントとなっています。
実は私、これまでの標準のフォントがどうしても気に入らず、文字が潰れ気味の上に
文字間隔が窮屈な体裁が、自分で書いていても読みにくいとずっと思っていました。

それをこのWebフォントが解決してくれました!
画像を見ればお分かりのように、文字がスマートで文字間隔もはっきり分かれていて
実に見やすくなったと(自分では)思います!
こんな素晴らしいWebフォントが完全無料で改変も出来る上に商用利用も可能とは
いい時代になったものです。

でもWebフォントはいいことばかりでもありません。
そもそもWebフォントとは【サーバーに存在しているフォント】というものなので、
自分自身がそのフォントファイルを持ってなくても使えるというメリットがある一方、
そのフォントを使用するには、決して軽くはないサイズのフォントファイルがある
サーバーに接続しなければならないのです。

つまり、Webフォントを使っているWebサイトは、読み込み時間が長くなるという
デメリットが存在します。
これは完全に利便性を損ねる弊害以外の何物でもないですが、私はここでは
利便性より見やすさを重視することにしました。
というかあの標準のフォントが嫌で嫌で仕方がなかったので、こんな素晴らしいのを
見つけた以上、戻すつもりなど毛頭ないのが嘘偽らざる本心です。

 

さて、このNoto Sans Japaneseの実装方法ですが、実装自体は非常に簡単です。
まず、はてなブログの管理画面から【デザイン】→【ヘッダ】でheadタグ内に
以下のリンクを設定して下さい。

<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>

これだけで実装作業の半分は終了ですw
次に、適用したい部分へフォントを適用します。
「もうテキスト部分は全部あててまえ!」という場合は、【デザインCSS】にて
以下のように設定すればOKです。

body {
    font-family: 'Noto Sans Japanese', sans-serif;
}

これでご自身のブログやWebサイトに、Noto Sans Japaneseが適用されます。
ですが私の場合、記事タイトルと見出しを除くテキスト部分に適用したいと
思ったため、その場合は各idやclass属性にそれぞれ1つずつフォントを適用する
ようにしなければなりません。
つまりこういうことです。

.entry-content p {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight:300;
}

.entry-content ul {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight:300;
}

.entry-content ol {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight:300;
}

.entry-content li {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight:300;
}

.entry-content blockquote {
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight:300;
}

以下、まだまだあと10項目以上ありますが割愛します。
要は適用したい箇所にfont-familyです。

ちなみに、このフォントは文字の太さ(font-weight)が数多くあるという
凄まじき性能を有しています。
はてなブログでの場合は、100~900の9段階と、normal、boldの2種類の
計11パターンが存在しますが、この内normalは400、boldは700と同一です。

そして、このフォントはフォントファイルをダウンロードして
自分で軽量化したフォントファイルをファイルサーバーにアップロードして
使うことも出来ます。
ただ、私は自前でサーバーを用意していないのでこれはやっていません。
フォントファイルのダウンロードはこちらからどうぞ。

Google Fonts : Early Access

皆さんも、もしこのWebフォントを使いたい場合は
参考にしてみてはいかがでしょうか。

 

2016年11月12日追記:Webフォント情報を更新! 

Webフォントの情報を更新した記事を書きました!
よろしければご覧ください!


 

カスタマイズ編は以上です。

改訂6版 TrueTypeフォントパーフェクトコレクション (デジタルBOOK)

改訂6版 TrueTypeフォントパーフェクトコレクション (デジタルBOOK)

 

 

 

SEO

さて、久しぶりにSEO編を書こうと思います。
正直、SEOについては大方対策してきたと思っているので、
これ以上出来ることはあまりないんじゃないかと思っています。

ですが、前回もしなかったのに今回もしないでは格好がつかないということで
今回は1つだけ、それも我ながら意味のわからない苦業に挑戦してみました。
その前にまずは7月のアクセス推移を見ていきましょう。

 

1.7月のアクセス推移

7月は2,982PVと、わずかに3,000の大台には届かなかったものの
6月よりもアクセス数は増加しました!
皆様本当にありがとうございます。

最初に書いたように、私が海外へ移住した関係上、長い間記事更新の間隔が
空いた時もあったのですが、その割には堅調な結果となっていて、私としても
ホッとしています。

 

f:id:holdfast:20150801130441j:plain

こちらが、はてなブログアクセス解析のグラフですが、実はここで1つ
わからないことがあるんですよね。
それは7月17日(金)に162人の訪問があり、さりげに1日の訪問者数過去最高を更新
しているんですが、この日このブログに何かあったんでしょうか?

と言いますのも、この時期はまさに私が現地へ移った真っ只中の時期で、
当然ながらブログを書いている暇なんて1秒たりとも存在せず、
更新が長いこと止まっていた時なのですが、そんな時に過去最高を更新というのは
何だか微妙な気持ちになりますw

まあいずれにせよアクセスしていただいたこと自体は大歓迎です!
これからもマイペースですが書いていきますので、ごひいきの程よろしくです。

さて、次のSEO対策は今回実装した中で
ブッチ切りに複雑で手間暇も半端じゃないものになっております。

 

 

2.2つのブログランキングサイトにpingを自動送信

f:id:holdfast:20150731211717j:plain

先日から、このブログはブログランキングに参加することになりました。
右サイドバーにどのブログランキングに参加しているか載せていますので、
よろしければクリックしてご協力いただけると幸いです。

このランキングサイト参加により、更なるアクセスアップに臨む次第なのですが、
1つ問題がありました。
それは、ランキングサイトに新しい記事を投稿したことを反映させるために
ping】というものを送信しなければならないのですが、
はてなブログにはpingを自動で送信してくれる機能が存在せず、このままでは
記事を投稿する度にランキングサイトに行って手動でpingを送信するという、
非常に面倒なことを強いられてしまいます。

それを自動送信するために、大掛かりな自動化ツールを導入することとしました。
ただし、これを導入するには、自動化Webサービスとして有名な【IFTTT】
GoogleドライブGoogleスプレッドシートが必要です。

 

この設定には、以下の3つの記事を参考にすることを強くオススメします!
そもそもこれらの記事を熟読してもかなりハードルの高い業ですが、
成功したのはまさにこの御三方のおかげです!
fukuihiさん、ikikkoさん、ぷっちょさん、本当にありがとうございます!
該当のページにははてブさせていただいております。

ちなみに私の場合、【人気ブログランキングブログ村の2つを
GoogleスプレッドシートGoogle Apps Script】を利用し、
トリガーを使用してバックグラウンドでping送信*2しています。
自動送信のタイミングは、【新しい記事を投稿した時から30分以内】です。

 

f:id:holdfast:20150731220003j:plain

これはスプレッドシートping自動送信が【成功】した画面の一部です。
ここまでこぎつけるのにかなりの手間がかかりましたが、もう後はお任せなので
気分は楽ですw

この自動化ツール導入手順を1から説明するとなると、
それだけで膨大な長文は不可避の1記事が作れる格好となりますので、
コメント等でリクエストをいくつか頂いた時のみ対応を予定しています。

 

SEO編は以上です。

Google クラウドスクリプティング Google Apps ScriptによるGoogleパワーアップ活用ガイド

Google クラウドスクリプティング Google Apps ScriptによるGoogleパワーアップ活用ガイド

 

 

 

まとめ

f:id:holdfast:20150731233313j:plain

いかがでしたでしょうか。
今回は今までとは比較にならない程ブログをブラッシュアップしています。
最初の頃を思い返すと、もはや笑うしかないくらいですw

今回カスタマイズしてはっきりと思ったのは、
もはやこれからはプログレッシブ・エンハンスメント】でブログを書いていこう
ということでした。

もうWindows 10まで発売され、新し目の環境でWebサイトを閲覧するのが
一般化した今、古いブラウザや環境を考慮しながらブログを作るのはナンセンスだ
結論づけてもいい頃だと思います。

今回実装したものの中には、古いブラウザ(IE8等)や低解像度(640×480等)
環境では、読めないことはないが、リッチな形式になっていない等の
不都合が見受けられるかもしれません。
しかし、そのようなブラウザや環境には
「読めるようにはするが、それなりの表示にしかならないのでご了承下さい」という
方針で今後はブログを更新していきたいと思います。

なお、この方針はPC版のみの話で、
スマートフォン版のこのブログは相変わらず初期と同様の貧相なままですので、
急激な変化を遂げたPC版に違和感を感じた方もご安心下さい。

長くなりまして恐縮ですが、最後までお読みいただきありがとうございました!
これからもこのブログをどうぞよろしくお願いします! 

黙示録  <FOREVER YOUNG CAMPAIGN 2015>対象商品

黙示録 【forever young campaign 2015対象商品】

 
Assault Attack [2009 Digital Remaster + Bonus Track]

Assault Attack [2009 Digital Remaster + Bonus Track]

 
Assault Attack (Bonus Track Version)

Assault Attack (Bonus Track Version)

  • マイケル・シェンカー・グループ
  • ロック
  • ¥1300

 

 

 

バックナンバー

以下はカスタマイズ記事のバックナンバーです。よろしければご覧ください。 

*1:PC版のみ適用。スマホには表示されない

*2:openById()を使用

広告を非表示にする

【DESIRE remaster.ver】応援中!

長編アニメーション映画【planetarian】応援中!