カテゴリ: ライブドアブログ

ライブドアブログ_記事のURLを編集_メリット


記事個別のURL(パーマリンク)を編集・修正する方法と、その際に知っておくと有利なことについて説明します。


ライブドアブログで記事のURLを変更したりカスタマイズする方法


記事のURL(パーマリンク)を変更する方法は2つあります。

  1. 管理画面 >ブログURLのページ > URL形式 で修正

  2. 記事を投稿するエディターの下にある「オプション設定」の「記事URL設定」から直接入力する


1の方法はコチラのページに詳しくまとまっているのでこっちで確認してください。どちらかというと2つ目の方法のほうがオススメです。

ライブドアブログ_記事のURLを編集

この上の画像の「記事URL設定」のボックスに、毎回、直接自分で記事の内容に関係ある文字列を入力する方法です。例えば今回の記事ならlivedoor-blog/article-url-custom.htmlと入力します。


なぜURLを編集するほうがいいのか?URLを直接入力するメリットは?

ライブドアブログ_URLの編集_メリット

結論からいうと、毎回記事の内容に関連したURLを直接入力するほうがユーザービリティやSEOの面で有利になるからです。GoogleやYahoo!の検索結果でより上位に表示されやすくなります。

サイトの URL 構造はできる限りシンプルにします。論理的かつ人間が理解できる方法で(可能な場合は ID ではなく意味のある単語を使用して)URL を構成できるよう、コンテンツを分類します。

たとえば、航空機(aviation)に関する情報を探している場合http://en.wikipedia.org/wiki/Aviation のような URL であれば、見ただけで必要な情報であるかどうかを判断できます。

http://www.example.com/index.php?id_sezione=360&sid=3a5ebc944f41daa6f849f730f1 のような URL 自体は、ユーザーの関心を引くことはほとんどありません。
シンプルな URL 構造を維持する/ Googleより引用

実際にGoogleもこのように推奨しています。

※「webwriter」よりも「web-writer」のように「 - 」を利用することも推奨されています。ちなみに「_(アンダースコア)」よりも「-(ハイフン)」のほうがいいです。



現状残念なことにライブドアブログの個別記事ページのURLは、


http://blog.livedoor.jp/archives/0924587.html



このような形式になっていて、Googleが推奨するようなURLになっていません。自分でURLを修正しないと損をしてしまうわけです。


具体的にどういうURLが理想的なのか


ここまでの内容を整理すると、


意味のある単語を使ったURL:https://blog.com/food/shibuya-cafe-pasta.html



× 特に意味のないIDや数字の羅列によるURL:https://blog.com/41daa6fffaaa333.html



こんな感じで整理できます。

ただSEOやコンテンツマーケティング会社として有名なバズ部によると、上の例のように「food」のようなカテゴリーを間に挟まず


https://blog.com/shibuya-cafe-pasta.html



このように記載するほうがいいとされています。

理由は将来的にカテゴリーが変更になる可能性があるからです。

もしそれでURLが変更になると、それまでのSNSのシェア数などのカウントが0にリセットされてしまって、ドメインパワーが弱くなってしまいます。



ただし、カテゴリーやURLを絶対に変更しない場合は、一番最初に紹介した


意味のある単語を使ったURL:https://blog.com/food/shibuya-cafe-pasta.html



間に 「food」のようなカテゴリーを挟む、このような記載方法が一番ベストです。毎回入力するのが面倒に感じるかもしれませんが簡単にサクッとできるので出来るだけ対応するようにしましょう。

WordPressのSEO面で最適なパーマリンクの設定方法 / バズ部

job_programmer

今回はライブドアブログで文字の大きさやデザインなどを変更したいけど、どうやればいいか分からないという人のためのまとめです。HTMLとかCSSの知識を持っていなくてもそのまま真似すればOKです。

というわけで今回は

  1. ブログの背景色を変更する
  2. タイトルの文字サイズを変更する
  3. 本文の文字サイズを変更する
  4. 見出しのデザインを変更する
  5. リンクの文字色を変更する


こういったそれぞれの方法について説明していきます。

ちなみにHTMLやCSSをカスタマイズすると表示が崩れてしまう可能性があるので、HTMLやCSSをいじる前にバックアップをとるようにしてください。

あとデザインのテンプレートそのものを変える場合は、既にまとまっているのでこちらを参照してください。

ライブドアブログのヘルプ



スクリーンショット 2018-12-03 18.28.18

なお、デザインを変更する際はこの上の画面の「ブログ設定」の「デザイン / ブログパーツ設定」から変更します。

ちなみにスマホ版はコードをいじることができません。変更できるのはPCの方だけです。

変更する際は「PC」の「カスタマイズ」のタブをクリックして、

スクリーンショット 2018-12-03 18.35.09

こちらの上の画面のCSSの部分を編集してデザインを変更していきます。 



1. 背景色を変更したい

スクリーンショット 2018-12-03 18.34.34

例えば背景色がグレーっぽいのでこれを白に変更したいとします。 

スクリーンショット 2018-12-03 18.35.39


この中の

body {background-color: #fdfdfc;}

body {background-color: #fff;}

変更すると

スクリーンショット 2018-12-03 18.43.26

こんな感じで白に変わってくれます。WEBだと白は「#fff(#FFFFFF)」で表すルールになっています。



もちろん他の色にも変更可能で、

スクリーンショット 2018-12-03 18.52.59


こんな感じで緑に変更する事も可能です。

他の色を選ぶ際は以下のページから選んで設定してください。

原色大辞典



2. タイトルの文字サイズを変更する

スクリーンショット 2018-12-03 19.04.01


タイトルの文字サイズを変更する際は上の画像の、

#blog-title {color: #fff; font-size: 18px;の中の

font-size: 18px の数字の部分を変更します。例えばここを41pxとかに設定すると、

スクリーンショット 2018-12-03 18.43.26

これが、

スクリーンショット 2018-12-03 19.21.05


こんな感じで大きくなります。

もしタイトルの文字色も変えたい場合は color:#fff;の部分を先ほどのカラーコードを見ながら修正すればOKです。



3. 本文の文字サイズを変更する

スクリーンショット 2018-12-03 19.31.08


本文の文字サイズを変更したい場合はCSSの中の「/* 記事本文 */」の箇所にある

.article-body {color: #555555; font-size: 14px;}

「font-size: 14px;」の数字を変更すればOKです。



4. 本文の見出しのデザインを変更する

スクリーンショット 2018-12-03 19.37.28


こちらのCSSの「/* 記事本文 */」の箇所に、

スクリーンショット 2018-12-03 19.41.38


こんな感じで

h2 { padding: 0.5em;/*文字周りの余白*/ color: #494949;/*文字色*/ background: #fffaf4;/*背景色*/ border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/ }


CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選より引用


CSSを記述すると、

スクリーンショット 2018-12-03 19.43.08


これが

スクリーンショット 2018-12-03 20.03.03


こんな感じのデザインになります。

ちなみに色は「background: #fffaf4;」の箇所をいじれば、他の色に変更できます。



5.リンクの文字色を変更する

スクリーンショット 2018-12-03 22.19.40

リンクの文字色を変える場合は/* 全体の文字色、リンク色 */

a:hover {color: #3366cc;#3366ccの部分を変更します。

例えばこれを#e7609eに変更すると、

スクリーンショット 2018-12-03 22.16.51

青から、

スクリーンショット 2018-12-03 22.24.51


ピンクに色が変わります

独自ドメインのライブドアブログが表示されない


ライブドアブログに独自ドメインを設定する場合、サブドメインあり(URLの前にwwwがつくやつ)とサブドメインなしの場合とで設定方法が変わります。


具体的には、それぞれDNSレコードの設定が以下のように変わります。



サブドメインなしの場合:Aレコード
サブドメインありの場合:CNAMEレコード


AレコードPC/スマートフォン版:203.104.130.159
携帯版:125.6.146.9
CNAMEレコードPC/スマートフォン版:blog-01.livedoor.jp
携帯版:mobile-blog-01.livedoor.jp




自分の場合は「サブドメインなし」だったので、Aレコードで設定したわけですが、PC/スマホ版と携帯版


PC/スマートフォン版:203.104.130.159
携帯版:125.6.146.9


こんな風にどちらもAレコードを設定してしまったおかげで、ページが表示されなくなってしまいました。



結果正しいURLを入力しても携帯版のURL:mobile.livedoor.com にリダイレクトされて「このサイトにアクセスできません」と表示されました。



なのでライブドアブログで独自ドメイン(サブドメインなし)を使ってブログをやる場合は、両方設定しないように気をつけてください。


PC/スマートフォン版:203.104.130.159



こっちだけで大丈夫です。



もしAレコードで設定して、上の画像のようにブログが表示されない場合は、独自ドメインを設定したサービス(お名前.comとかムームードメインなど)にログインして、管理画面から、


Aレコード 携帯版:125.6.146.9



を削除すればOKです。



ちなみにAレコードを設定する際「TTL」という項目を「3600」と入力している場合、削除が反映されるまでに3600秒(60分= 1時間)かかるのでご注意を!







↑このページのトップヘ