雑記blogパラダイス

ただの日記です。 特にテーマもなく書いていきます。 スロット、ブログカスタマイズについての記事が多めです。

空からの川の風景


ライブドアブログのカスタマイズ



あいかわらず、いろいろいじっています。
実はライブドアブログの運営のなかで、ずっと気になっていたことがあるんです。
それをどうにかしようとして、(たぶん)成功しました。
かなり時間がかかりました。
カテゴリ別のアーカイブページのカスタマイズです。

何をしたのか



見ていただければわかるのですが、かなりシンプルになりました。
これは使っているテーマにもよると思うのですが、もともとはカテゴリ別アーカイブのページに、記事の本文が全部載っていたのです。
ずらっと並んでいるので、記事を探し難かったのですね。

本文を全部載せる必要はないんじゃないかと思っていました。
どうにかならないかと、ずっと思っていて、今回やってみました。

HTMLとかコードとかいうのをどうにかしたんだと思うのですが、検索して出てきたものを切り貼りして作ったので、あまり理解はしていないです。
結局どうなったのかというと、
  • 日付
  • 記事のタイトル
  • アイキャッチ
  • 本文の概要
がアーカイブに表示されるようになりました。
ほかは表示されていないですね。
もとのアーカイブページとはかなり変わりました。
シンプルです。

どういうふうになっているの?



こちらが実際のコードです。

<IfArticleFirstImage>
<SetVar ThumbnailWidth>180</SetVar>
<SetVar ThumbnailHeight>160</SetVar>
<div class="ArticleFirstImageThumbnail">
<a href="<$ArticlePermalink$>">
<img src="<$ArticleFirstImageThumbnail$>" align="left" 
 alt="<$ArticleTitle ESCAPE$>"  hspace="50px" vspace="10px" />
</a></div>
</IfArticleFirstImage>
<div class="article-body">
<div class="article-body-inner">
<$ArticleDescription$>
</div>
</div>

こういう感じです。
これを、カスタマイズの月間アーカイブと、カテゴリアーカイブのコードのなかの、記事本文の表示のところに書いてあるコードと置き換えます。
あとはソーシャルボタンとかのコードを削除しました。
これで、思っていたようなシンプルなアーカイブページが完成しました。

色がついている数字をいじると、表示が調整できるんじゃないかと思います。
「見てみたけど表示がおかしいよ」とか、「このコードじゃなくて、こうしたほうがいいんだよ」とかわかる方がいたら、教えてください。
とりあえず初心者が検索を駆使してやってみたらこういう感じになりました。

どういうふうにやったの?



あとから、自分で修正したりするときのために、何をしたのかを書いていこうと思います。
だいたいはネットで見つけた解説記事の切り貼りでできています。

アイキャッチ画像を表示する



まず、最初のほうにあるのはアイキャッチ画像を取得して、表示するコードです。
そんなことができるのか? と思うかもしれません。
はい、できるんです。

ギャラリーモードについて - ライブドアブログのヘルプ

こちらに書いてあるコードを参考にしてみました。
3. <$ArticleFirstImageThumbnail$> について、というところにあるコードですね。

画像位置の調整



それから、画像の位置を調整しました。
これもネットで検索しましたよ。
何の知識もないですからね。

画像の表示位置を指定する -HTMLタグ辞典-

HTMLタグ/要素一覧/img 要素 - TAG index Webサイト

こちらの記事を見て、見よう見まねで、align、hspace、vspace というタグを使ってみて調整しました。

記事の概要



それから、下のほうのコードは、記事の概要を表示するものです。

独自タグ一覧(変数) - ライブドアブログのヘルプ

こちらの記事から、ArticleDescription という独自タグを見つけて、それを使いました。
なんか<div class="article-body">とかいうのの中に入っているんですけど、これはもとのコードにもあったもので、記事本文を取得する独自タグがこのなかに入っていたんですね。

なので、記事概要のタグもこれのなかに入れたほうがいいのかな、と思って入れています。
全然理屈はわかりませんが、とりあえずうまくいっているのでいいんじゃないかと思います。

まとめとその後



プログラムがわかる方は一瞬で書けるようなものだと思うんですけど(そもそもこれでいいのかもわからないですが)、初心者が検索しながら書くとなるとけっこう時間がかかりました。
でもうまくいってよかったです。
シンプルな表示になったので満足しています。

そして、その後検索するうちに、こんな記事を見かけました。
ライブドアブログの公式ヘルプです。

アーカイブページで本文を省略してタイトルだけにする - ライブドアブログのヘルプ

タイトルだけで十分なら、こちらのコードを貼ればいいのですね。
いちおう、本文の概要と、サムネイルが表示されるので、がんばって作ったコードも無駄ではなかったです……。
よかったです。

パンくずリスト



このブログではパンくずリストを使っています。
こちらのサイトに書いてあったコードを使わせていただきました。

記事の最上部に「パンくずリスト」を追加する:ライブドアブログ

ちょっとしたことなのですが、パンくずリストがあると、読むときにわかりやすいんじゃないかと思います。
ライブドアブログでは、カテゴリがふたつあります。
そのふたつともを表示できるパンくずリストですね。

ブログを確認すると……ちゃんと表示されていますね。
こういうふうにコードまで説明してある記事があると、初心者としてはありがたいですね。

ところで検索しても……?



パンくずリストというのは、グーグルの検索結果にも表示されるんです。
ときどき見かけますよね?
それで、このブログのパンくずリストが表示されるのも、待っていたのです。
でも、いっこうに表示されません。

まあ、反映されるには時間がかかるものなのかなあと思っていたのです。
そう思いながら、2ヶ月くらいたっても変化はありません。
さすがに遅すぎますよね。
これはどういうことなのでしょう。

構造化データでマークアップがどうのこうの



いくつかのサイトを見てまわって、なんとなくわかりました。
パンくずリストを設置するだけではダメなんです。
構造化データをマークアップして、どうにかしないといけないようです。
(わかってない……)
とりあえず、グーグルさんがこういうツールを用意しているようです。

構造化データ マークアップ支援ツール

これを使ってどうにかするようです。
はい、よくわかりませんね。

それでもどうにかする



まあ、表示されないならされないでいいです。
そう思いながらも、構造化データについての記事をしばらく読んでいました。
おかげで、多少は理解が深まりましたよ。

マークアップというのはブログにコードみたいなものを書き込むことみたいです……?
コードを書き込んで、グーグルに「これは画像ですよ」とか「この単語は人間の名前ですよ」とか教えるのが、構造化データのマークアップということのようです。
個別の記事のHTMLに書き込んでも、構造化データを設置することもできるようなのです。
でも、いちいちそんなことをするのは面倒くさいです。
ブログ設定のカスタマイズのコードを書き込むところで、一気にやっつけたいです。
そういう記事を探していました。

ついに見つける



はい、そういうことが書いてある記事が見つかりました。
こちらです。

リッチスニペット-検索結果に表示される構造化データの書き方

Googleの検索結果にパンくずリストを表示させる方法!

Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応

この三つの記事をよく読みました。
もちろん、一度では理解できません。
でも、コードの例文があります。
とりあえず例文と同じようにやってみました。
それが、こちらです。

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$BlogUrl$>" itemprop="url">
<span itemprop="title">トップページ</span>
</a>>
</span>
<IfArticleCategory1>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$ArticleCategory1Url$>" itemprop="url">
<span itemprop="title"><$ArticleCategory1$></span>
</a>
</span>
</IfArticleCategory1>
<IfArticleCategory2>
『<a href="<$ArticleCategory2Url$>" >
<$ArticleCategory2$></a>』
</IfArticleCategory2>>
<$ArticleTitle ESCAPE$>

もとのコードにいろいろなものが付け足されています。
これがマークアップだか構造化データだかいうもののようです。
itemなんとかという部分ですね。
カテゴリ2については、このマークアップからはずしておきました。

これを設置して、グーグルサーチコンソールの構造化データテストツールでチェックしてみました。
無事に認識してくれているようですよ。
Breadcrumbという表示が出ています。
Breadcrumb=パンくずリストですね。
どうやらうまくいったようです。
検索結果にも、徐々に反映されているようですね。

ほかにもいろいろあるらしい



グーグルが用意した、パンくずリスト・マークアップの例文もあるんですね。
いろいろ検索するうちに見つけました。
こちらですね。

Breadcrumbs | Structured Data | Google Developers

でも、グーグルの例文のようにやってみてもうまくいかないんですよね。
そもそもパンくずリストが、グーグルの用意したものだと、うまく表示されません。
そこらへんの仕組みはわかりません。
もう少し調べていこうと思います。
パンくずリストは今のままでいいでしょう。
うまくいっていますし。

ほかには、イメージの構造化データは、ある程度の大きさの画像でないと受け付けてくれないらしいということがわかりました。
あとは「websiteの情報」と「ブログを書いているひと」について、マークアップしました。
簡単にできそうなところは、これでだいたい済ませたようです。

ライブドアブログのちょっとしたカスタマイズ



ホームと歩道橋


ライブドアブログを使っていて、気になる部分が出てきました。
なので、ちょこっとカスタマイズしてみました。
プログラムとかは全然わかりません。
本当にちょっとしたことだけです。

トラックバック欄の削除



個別記事の下にあった、トラックバック欄を消しました。
これは気になっていたんです。

トラックバックって、使わないですよね。
昔は流行っていたような気がします。

これが必要になることは、ないんじゃないかと思います。
こちらから送るのはブログ村くらいです。
送られてくることは無いでしょう。

ということで削除です。
個別記事のところのコードを消しました。
表示を確認すると、消えています。
たぶんこれでOKでしょう

メッセージボードを移動させる



メッセージボードって、移動させられるんですよね。
コードを表示したい位置に貼り直せばいいんです。
とりあえず、個別記事のメッセージボードをソーシャルボタンのあたりに持っていきました。
消してもいいんですけど、いつか必要になるかもしれませんので移動だけです。
とりあえず、いまはメッセージを表示しています。

パンくずリストの位置を変えました。



パンくずリストの位置をちょっとだけ変えました。
日付とかと一緒になって、ごちゃごちゃしていたので……。
タイトルの下のところに表示させると、いい感じですね。

ところで、このパンくずリスト、グーグルの検索結果には反映されてないんですよね。
設置してしばらくたつので、もう反映されてもいいと思うのですが。
何か設定を失敗したのかもしれません。
そのうちに、そこらへんも調べてみましょう。

そのほか



ほかにもいじったところがあるんです。
すごく気になっていたので、がんばってカスタマイズしたのです。
カスタマイズというか、ブログの書き方でしょうか。
それもまとめて書いておこうと思います。
調べっぱなしだと忘れてしまうかもしれませんからね。

余計な空白を消したい



普通に読んでいるだけではなかなか気づかないことです。
ブログの記事の編集画面を見ていると、文の途中に余計な空白が挿入されていることがあります。
これはわりと多いです。

HTMLタグ編集画面で確認してみると、「&nbsp;」という表示が、やたらあるんですよね。
これが余計な空白の原因です。
気になるので消したいのですが、HTMLタグ編集画面からいちいち探すのも面倒です。

ライブドアブログには置換機能というものがあります。
この置換機能を使うと楽に消すことができますよ。

実際にやってみる



検索文字ボックスに「&nbsp;」を入れて、置換文字は空白のままにします。
これで置換をすると、余計な空白が削除されてなくなります。
全部探して、削除してくれるんです。
一発です。

簡単ですね。
これに限らず置換機能は便利ですよ。

枠で囲みたい文章



これは検索していて見つけました。
文章を枠で囲む方法です。

ブログの文章を枠で囲む方法
(HTMLのdivタグstyle属性で色、太さ、線種など自由自在に)


こちらの記事が参考になりますね。
基本的に書いてあることをそのまま実行すれば、文章を枠で囲むことができます。
枠で囲うというのはどういうことなのかというと、

こういうことです。

こういうものをときどき使うと、ブログが見やすくなるんじゃないかと思います。
そんなの知っているよ、ということかもしれません。
まあ、知らないひともいるんです。
(僕です……。)
これから使っていこうと思います。

HTMLについて気をつけなければならないこと



こうして編集してきたわけですが、もう少し確認してみましょう。
HTMLの書き方にはルールがあるようです。
こちらの記事を読んで知りました。

犯してはいけないHTMLタグの過ち10個

いろいろ気をつけることが書いてありますね。
なかでも特に参考になったのはこちらです。

<br />タグ



改行をするための<br />タグがあります。
これを何個も続けて使わないほうがいいんですね。
2個までにしたほうがいいそうです。

見やすいかなと思って、かなり使ってしまっていました。
削除して、減らそうと思います。

<b>タグと<strong>タグ



それから、ライブドアブログでは文字を太字にすると<b>タグになるんですよね。
これも<strong>タグのほうがいいみたいですね。
見た目は同じなのですが、検索エンジンからすると、違うらしいです。

気がついたものは、置換機能で置き換えていこうと思います。
知らないこともいろいろあるものですね。
これからも検索して調べていこうと思います。

続きを読むで記事を書く



ブログの記事を書くときに、「続きを読む」で記事を分割する書き方がありますよね。
トップページやアーカイブページなどでは本文を全部表示させずに、「続きを読む」のリンク先ですべて表示する、という書き方です。
ライブドアブログでは、これが簡単にできるんですよね。
編集画面にタブがあるので、「続きを読む」タブのところに文字を書けば、自動的に分割されます。

「続きを読む」を書く

公式ページでも紹介されていますね。
でも、ちょっと気になることも書いてありますよ。
クリックしないと全文を読むことができないので、読まれなくなることもあると……。
うーん、いわれてみるとそんな気もしますね。
そういうことは考えていませんでした。

実際どう思われているのか



あんまり気にしたことはなかったのですが、続きを読むってどう思われているのでしょうか。
関連記事を探してみました。

多くの回答求む! ブログの「続きを読む」について - ブログ | 【OKWAVE】

ブログ巡回するときに、「続きを読む」を押すのが面倒なんです。 - ... - Yahoo!知恵袋

そうなんですね。
読んでみると、あまり好きではないひとも結構いるようです。
記事を読むまでに1回クリックが増えるだけですが、面倒といえば面倒ですね……。
そもそも分割する必要があるのかというと、そんなに必要もないですよね。
分割することでアクセス数を稼ぐという使い方もあるみたいですが、それは別にやる必要はないですし……。
映画などの感想を書くときにネタバレを防ぐという使い方は良さそうですが。

使い方の方針



いままで何も考えずに使っていたのですが、「続きを読む」は必要なときにだけ使おうと思います。
書いてしまった記事は、ぼちぼち直していきます。
ちょっとしたことですけど、読む側にとってはストレスだったりするんですね。
こういうことは、なかなかわからないものです。
気をつけようと思います。

グーグルアナリティクスのリファラスパムについて。



赤い夕焼け


謎のURLからのアクセス



グーグルアナリティクスでは、アクセスがどこから来ているのか確認することができるんですよね。
これをみていると、謎のURLからアクセスがきていることがあります。
そこそこのアクセス数でも、そこのURLからの平均滞在時間が0秒なんですよね。

そんなことってあるんでしょうか。
1秒も見ていないって、なにかおかしくないですか。
平均ですよ?
ちょっと調べてみましょう。

検索すると……



あやしいURLをコピペして検索してみると、このURLについて説明してある記事が出てきました。
これはリファラスパムというものらしいです。
こちらの記事に、対処の方法が書いてありますね。

これ何?アナリティクスのReferralに「adf.ly」

こちらに書いてあるとおり、フィルターを設定すると、リファラスパムが表示されなくなるようです。
このリファラスパムって、なんかへんなURLが多いんですよね。

URLが自動で生成した文字列っぽいというか、不自然な感じがするんです。
見慣れない言語のURLだったりするときもあります。
滞在時間が0ですし、見つけやすいです。

あやしいなあと思ったら検索して確認しましょう。
こちらの記事に書かれているように表示されない設定にしたら、対処できますね。
ひとつずつフィルターを設定するのはちょっと大変ですが。

さらに対処法を調べる



こんな記事も見つけましたよ。

Googleアナリティクスで98%以上のスパム記録を除外する方法!

こちらの記事に書いてある方法なら、ひとつずつフィルターを設定する必要はないんですね。
簡単に除外できます。
これは楽です。

参考になりますね。
これでほとんどのリファラスパムが表示されなくなりましたよ。
良かったです。

なぜ表示したくないのか



いちおう、アナリティクスを使って、分析したりもするんです。
どういう経路のアクセスが多いのかとか、直帰率はどれくらいなのかとか……。
本格的なデータ分析とかはできないのです。
まあ、それらしいことをやってみたい気分になることがあるんですよ。

そのときに、リファラスパムがあると邪魔なんですよね。
データがおかしくなってしまいます。

なにより、なんか気になるんですよね。
滞在時間0は目立ちますから。
対策をして、見えなくなってすっきりしました。

どうしてこんなことをするのか



そもそも、リファラスパムはなにが目的でこんなことをしているのかよくわかりません。
アナリティクスをみて、これはなんだと調べるためにアクセスを返してくる人を狙ってアクセス数稼ぎをしているという話を見かけたのです。
でも、それってかなり効率が悪いですよね……。

もちろんプログラムでやっていることなんでしょうけど。
相手がアナリティクスを使っていて、表示に気づいて、さらにアクセスを返す。
そんな人、ほとんどいない気がします……。

グーグルの対応



グーグルもこのリファラスパムを問題視しているようです。
対応してくれる予定のようです。

【アクセス解析】Googleアナリティクス全体でリファラスパムを除外する仕組みが導入されます

時期は決まっていないみたいですが、そのうちに除外する仕組みが導入されるようですね。
こちらのグーグルの対応を待ってもいいかもしれませんね。
アクセスされるだけなら実害はないわけですからね。
あやしいURLにはアクセスを返さないようにしましょう。

謎のサイトを見つける



さらにグーグルアナリティクスを見ていたら、謎のサイトからのアクセスが見つかりました。
HAO123というサイトです。
リファラスパムかなと思ったのですが、そうではないようです。
滞在時間があるので、ブログを読んでいるっぽいんです。
スパムじゃないなら、別にいいんですが、ちょっと気になりますね。
これっていったいどういうサイトなんでしょうか?

HAO123とは



もちろん、このサイトに直接アクセスすることはありません。
なにが起こるかわかりませんからね……。
サイト名で検索すると、解説してくれている記事が見つかりましたよ。
こちらです。

最近よく見かける謎のサービス「HAO123」てなんだ?

よくわかりました。
ようするに、検索サイトのようです。
いろんなサイトのアイコンが並んでいて、ワンクリックでアクセスできるようなサイト構成でもあるらしいです。

問題点



これだけならまあ、普通のサイトっぽいですが、問題点もあります。

  • フリーソフトなどに紛れ込んで勝手にダウンロードされる。
  • ブラウザのトップページを乗っ取る。
  • 削除しにくい。

とのことらしいです。
なんというか、地味に迷惑ですね……。

削除方法を探してみる



アンインストールの方法を検索してみると、いろいろな記事が見つかります。
この様子だと、困っている人も多いんでしょうね。

[迷惑]hao123が削除できない!? アンインストール方法はこちら | ヨッセンス


hao123 を完全削除する方法!


こういった手順で削除できるようです。
レジストリまでいじるとか、面倒くさいんですね……。
ダウンロードしてしまわないように気をつけなければなりません。

感想



うっかりインストールしないように、気をつけたいと思います。
ウイルスとかではないようですが、ほかのソフトに紛れこんでトップページを乗っ取るとか、ちょっと嫌ですよね。
昔、キングソフトもそんな感じのことをやっていませんでしたっけ?
あれもあんまり好きではありませんでした。

検索してみたところ、特に害はないみたいですけどね……。
このサイトからアクセスしているひとはたぶん普通にアクセスしているだけなのでしょうね。
ワンクリックでよく使うサイトに移動できるのは、まあ便利ですよね。

↑このページのトップヘ