雑記blogパラダイス

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

きれいな鳥


ブログに載せる画像が欲しい



ブログを書いていると、画像が欲しいときがあります。
記事のなかに画像があると見た目がいいですからね。
アイキャッチというやつですね。

自分で記事に関連するものを作るのが一番いいんだろうと思います。
ですが、いまのところはフリーの画像サイトの画像を利用させてもらっています。
使ってばかりでもあれなので、紹介してみようと思います。
それぞれのサイトの細かい規約は、ご自分で確認してみてください。

写真を無料で利用できるサイト



フリーの写真素材サイトはわりといろいろあります。
そのなかでも画像の数が多くて、会員登録不要のサイトを紹介します。
どちらもかなり有名なサイトです。

足成



写真素材 足成

日本語で利用できる写真素材サイトです。
このブログで使っている画像も、ほとんどがこちらのサイトからダウンロードしたものです。
写真のジャンルも細かく分かれていて、目的のものも探しやすいですね。

こちらのサイトにはいろいろな特集コーナーもあります。

Shuffle【写真素材 足成:特集】

人物画像を使うと肖像権の問題などがあって、ややこしいイメージがあったのですが、ある程度の範囲で利用できるように、サイトのほうで事前に許可をもらっている写真もあるそうです。
こちらのほうに詳しく説明されているので、人物画像を使いたい方は、確認してみるといいんじゃないかと思います。

写真素材 足成: 【利用ガイド】人物写真のご利用について

Pixaday



Pixaday

こちらは海外のサイトですね。
日本語にも対応していますので、なにを書いてあるかはわかると思います。
ここは写真の数が本当に多いんですよね。
ダウンロードするときにサイズをある程度指定することができます。

イラスト素材を無料で利用できるサイト



フリーのイラスト素材サイトはあまり見かけないですね。
探し方が足りないのかもしれません。
いまのところ利用させていただいているのはこちらです。

IMT



無料イラストのIMT

こちらは日本のサイトですね。
けっこうな数のイラストがあります。

こちらのサイトを利用するには、会員登録が必要です。
メールアドレスがあれば登録することができます。

そして、イラストを利用するには、ダウンロードしてから解凍ファイルで解凍しなければなりません。
ちょっと手間がかかりますが、かわいいイラストが多いです。
いい感じだと思います。

いらすとん



ゆるかわいい無料イラスト素材集 | いらすとん

こちらは会員登録不要です。
ゆるかわですね。
手書き風のイラストがたくさんあります。

Line illustration labo



商用フリーの線画イラスト素材集 Line illustration labo

こちらも会員登録不要ですね。
シンプルでカッコイイイラストが配布されています。
ほかのサイトでは見かけない雰囲気のイラストですね。

Flode illustration



花、植物イラスト Flode illustration (フロデイラスト)

こちらはシンプルな花や植物のイラストサイトです。
画像を右クリックするとウィンドウが出て、ダウンロード形式を選ぶことができます。
サイトのデザインもカッコイイですね。
関連サイトもイラストを配布しているようです。
うえのバーから探すことができます。

雑感



写真素材のほうは今回紹介した二つのサイトで十分だと思います。
イラストサイトはほかにも探してみようと思います。
ひとつで十分な気もしますが。

こういうサイトがあるとありがたいですよね。
自分で画像を作るとなるとかなり大変ですからね。
専用のソフトとかも買わないといけませんし……。
そういうのもweb上でできたりするんでしょうか。

簡単に画像を作る方法



ということでwebで簡単に画像を作る方法も探してみました。
こちらの記事で解説してあるサイトが便利そうです。

アイキャッチ画像の作り方。Photoshopとかじゃなくて他に簡単な方法はないですか?

canvaというサイトについてわかりやすく解説してある記事です。
海外のサイトなので、こうして説明を日本語でしていただけるとありがたいですね。

このサイト、かなりいろいろなことができます。
ブログ用の画像を作るには十分すぎるくらいの機能があります。
ウェブサイト上だけで画像を作成できるのもいいですよね。
自分で画像を作ってみたくなったときにはこちらを利用しようと思います。

イラスト素材をダウンロードするときの注意点



配布されているイラスト素材をダウンロードしたときに、イラストの背景が黒くなってしまうことがあります。
これは透過pngのファイルに対応していないプログラムでダウンロードしたときになるようです。
まあ、透過pngに対応しているフリーソフトを使ってダウンロードすればいいことなのですが、とりあえずはjpgファイルで配布しているイラストサイトを探してみています。
jpgなら黒くはならないようですよ。

うえで紹介したサイトは、イラストの背景が黒くならないサイトです。
これはなかなか見つからないんですね。
素材が足りなくなるようなら、pngに対応したソフトを使おうと思います。

空からの川の風景


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



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

何をしたのか



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

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

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回クリックが増えるだけですが、面倒といえば面倒ですね……。
そもそも分割する必要があるのかというと、そんなに必要もないですよね。
分割することでアクセス数を稼ぐという使い方もあるみたいですが、それは別にやる必要はないですし……。
映画などの感想を書くときにネタバレを防ぐという使い方は良さそうですが。

使い方の方針



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

↑このページのトップヘ