当ブログも開設2週間がいつの間にか経過していました。
はてなブログ始めて、気に入ったのでこのブログを有料プランで運営していこうと決め、12月に入ったのを機にはてなPROにしました。独自ドメインは…まあいいかなという感じです今のところ。
※結局、2018年1月に独自ドメインに移行しました。内部リンクの整理等面倒なので最初からやった方が良いと思います
アクセス数？そんなもん公開しません。読んでくださっている方ありがとうございます。本当に感謝しております。
アドセンスのアカウントは持ってるけど広告は無料版で自動で入るやつ以外、いままで別段貼っていなかったです。メンドクサイし、自分の広告とはてなの広告が混じって表示されるのがどうしても嫌だったし。
で、別に目的はマネタイズがどうのこうのではなく（ちょっとはありますが、PRO代をペイできれば最高でそれ以上はべつに…です）、せっかくだからカスタマイズしてみたいし、興味があったのではてなPROを試してみようということです。
ここでは主に、PROに移行してから行った変更点を、参考になった記事などを貼りながら、自分でコードいじった部分も(ほとんどないけど)書いていこうと思います。
私は他にもwebサイトを運営していますがHTMLもCSSもど素人ですので、コードを公開されている方や、そこに導いてくれる検索エンジンには感謝してもしきれませんね。
ど素人でもブログやwebサイトの運営がなんとかできてしまう、良い世の中になったものです。
こういったものに限らず、勉強をきっちりしてきた人がこういう物を積み上げてくれているからその恩恵で生きていけるのであります。
例えばコンピュータを動かすには電子回路はもちろん、そこに使われる電子部品もその材料から、その他色々の知識が必要ですし、それを設計するには複素関数や量子力学その他色々の理解が不可欠なわけで、それらの基礎を辿れば学校で習うような数学や物理や化学です。（習わなくたって、自分でももちろん学べます。）
パソコン一つで稼げるから勉強なんて意味ねー、役に立たねー、というのは、暴論なのですよ。あなたがするかどうかは別にして、役に立っているから、そうやって簡単にできるんですよ。
話がそれましたね。これはいつものことです。それでは私が行った変更点についてみて行きましょう。
目次
スポンサーリンク
設定→詳細設定にて色々設定と、スマホ版デザインいじり
まずはPROじゃないとできないと書いてある部分が多かった、詳細設定をいじりました。最初はチェックをつけたり外したりするだけのもの。
自動キーワードリンクのオフ
はてなによる広告の非表示
PC版のヘッダとフッタの非表示
くらいですね。
広告とか、単語がぶつ切りにされて関係ないキーワードでリンクがつくのがないとすっきりです、でもこの後広告に関しては貼ってしまうんですけどね。
スマホページはこの詳細設定ページで、「headに要素を追加」覧を利用して色々なものを非表示にしました。
これは以下の記事を参考にさせていただきました。
ここで参考にさせていただいて実行したのは以下です。
プロフィールの非表示
はてなブログ関係のリンクの非表示
powered by～の非表示
円形アイコンの非表示
検索ボックスの非表示
フッターメニューの非表示
すっきりしました！本当にありがとうございます！このいくつかは有料プランでない人はやらないほうが良いようです。今後規約が変わったりするかもしれませんし、仕様変更で効かなくなったりする可能性もあるので、注意しましょう。
デザイン設定にてPC版デザインを変更
まずはLiterally Web Magazine様のブログテーマ「DUDE」を使わせていただくことにしました。それでも、私のブログは私のセンスがなさ過ぎてオシャレになっていませんが(笑)
テーマをお借りしただけで、記事に書かれたデザインカスタマイズは、他の記事を参考にしました。すみません、せっかくの素晴らしいテーマでこんなダサいブログを…謝罪しておきます。
で、まず、ヘッダー画像を横幅いっぱいに広げます。これ、ちょっと憧れてました。参考にさせていただいたのは下のブログです。
この記事のコードをお借りしてデザイン設定の下にあるCSSの覧にぶち込んで、ヘッダーに設定していた画像を消去し、コード内に画像URLを入れてみました。
おお、画像がいっぱいに広がった！は良かったんですが、私が何かまずいことをしたのでしょう、ブログタイトルとブログ説明が画像の下端に張り付いています。
コード内の数字は色々いじってみましたが結局うまくいかず。文字の位置を指定する値も親切に書いていただいているのですが、それをいじると画像の大きさが変わってしまって…私にはちんぷんかんぷんでした。
しかし、これは「#title」の部分だけコードを削除したら、今度は上に張り付いてくれました。私のヘッダ写真だとこれで都合がいいので、これで良しとしました。本当は良くないかもしれません。横着ですみません。タイトルと説明文の文字の大きさもいじりました。
そして、写真のどの部分を表示するかを示す
「background-position: center center;」
の部分は、私の写真できれいにタイトルと説明文が読める位置にするため、変更しました。「center」を「○○%」に置き換えると、画像を切り取る窓の中心座標が指定できます。（で、合ってるよね？）
あと、自分でやったのは以下です。
記事下部に読者になるボタン設置（詳細設定からコードが取得できます）
ソーシャルボタンを記事上下に表示（チェックつけるだけ）
サイドバーに写真付き最新記事と注目記事を設置（デザイン設定でいじるだけ）
サイドバー順番入れ替え（デザイン設定でいじるだけ）
これくらいですかね。ソーシャルボタンを記事上にも置いたのは、あとで読もうと思ってブックマーク、というのに便利だなと私が勝手に思ったからです。
PC版にアドセンスを設置
ここからはアドセンスの設置です。まずはPC版から。初めにリンクユニットです。おまじないみたいなものですね。気分が変わったら外します。
ひとつはヘッダー下、もう一つはサイドバーです。ヘッダー下のものは、
<p><center>
（アドセンスコード）
</center></p>
をヘッダー下のHTML覧に書いただけです。
サイドバーのほうは、サイドバーの追加からHTMLを選択して名前を広告ラベルに変更し、
<p>
（アドセンスコード）
<br></p>
と書きました。簡単ですね。
次は記事上にコンテンツユニット。レスポンシブにしました。以下のブログを参考にさせていただいて、ラベル付きのコードを「記事上」のHTML欄に入れました。
affiliate-hatekun.hatenablog.com
本当にありがとうございます。頭が上がりません。上記記事にて公開いただいているラベル付きコードに、自分で改行タグを足しました。改行するのは、コンテンツと距離をとるのが目的です。
続いて記事下コンテンツユニット。これもレスポンシブです。これはソーシャルボタンの上に置きたかったのですが自分では全然うまくいかず、以下の記事を参考にさせていただきました。
これは素晴らしいですね…難しいことをやっているのでコードを見てもわかりませんでしたが、非常に助かりました。ありがとうございます！このコードにはラベルだけセンタリングために、ラベル回りに<center>（ラベル）</center>と追記しました。
ここでは大きい広告を出すために、アドセンスコード内の
「data-ad-format="auto"」の部分を「data-ad-format="rectangle"」と書き換えました。これはアドセンスコードの書きかえですが、規約違反にならないそうです。（この方法は他のwebサイト運営で知っていました）
でも、アドセンスは規約がときどき変わるので、気をつけましょう。
スマホ版デザインにアドセンス追加
これはコンテンツ向けだけです。
まずは記事上。ファーストビューでコンテンツが隠れてしまわないように、320×100のバナーを貼りました、以下のコードを、スマホ記事上のHTML覧に貼っただけです。
<p style="text-align: center;"><font color="#000000"><span style="font-size: 85%;">（ラベル）</font></span><br >
（アドセンスコード）
<br >
</p>
次は記事下ですね。こっちはファーストビューでコンテンツを押しのけては入りえないので、デカい広告を出します。レスポンシブです。貼ったコードは以下。広告タイプをかえただけなので、やることは記事上と同じです。
<p style="text-align: center;"><font color="#000000"><span style="font-size: 85%;">（ラベル）</font></span><br >
（アドセンスコード）
<br>
</p>
いまは4つ以上アドセンス貼っていいようになりましたが、これに加えてPC版で記事中に入れるレクタングル中が表示されるので、3つの広告で運用です。
楽しくやれました
基本的にブログのカスタマイズとしてやったのは以上です。そうだ、プライバシーポリシーも書きましたね。
記事中に自動で広告を入れるのもやってみたくて調べたんですが、なんか怖い（情報弱者特有のやつです）のでレクタングル中を手動で入れています。
しんどかったですが、結構楽しんで色々いじることができました。役に立てば幸いですが、それが目的ではなくて、この記事は私の備忘録としての性質が強いです。
オカシイところとかアドバイスあればコメントいただけたらなと。