こんばんわ。底辺タクシー運転手の来栖あさひです。


 今このブログはライブドアブログで書いています。ブログや記事のレイアウトを編集してみようと思い、独自に情報を収集しながら編集してみました。


 これからライブドアブログで編集してみようという人の参考になればと思いますので、私がおこなってみた内容を紹介しておきます。他の無料ブログやwordpressなどは別のやり方になるかと思いますので、あくまでも参考のレベルでお願いします。








ブログのレイアウトを追加・変更する


 冒頭でも書きましたが、今回の記事を作る前に色々とデザインというかレイアウトを変更したり追加したりしてみています。


 私が変更・追加したのは
  1. ブログタイトル回り
  2. 見出しデザイン
  3. 目次
 大まかにこの3点になります。


 今回、初心者なりに初めてCSSなるHTMLの編集をドギマギしながらやってみました。紹介していくのは、ほぼこのHTML編集になりますが、中級者以上の方には必要ないレベルです。何せ私自身が初心者ですから。笑


 パソコン系機器の扱いにめっぽう弱い私でも何とかここまではできました。私が調べながらやってみた内容について書いていきますので、参考になればと思います。


 このHTML編集は、失敗してしまうとレイアウトが崩れたりリンクがうまく作動しなくなったり、ブログ運営に大きな被害を及ぼしてしまう可能性がありますので、作業前に必ずバックアップを取るようにしてからおこなってください。


 では、まず基本的な画面の出し方をまとめましたので、以下をご覧ください。


 ブログのマイページ(ブラウザ)の『ブログ設定』を選択し、次に『デザイン/ブログパーツ設定』『PC』を選択します。そこから『カスタマイズ』を選択すると、『CSS』という訳の分からない文字列が並んだ画面が出るので、目次以外についてはこの画面を編集していきます。


 後述しますが、目次については、記事を執筆する画面でHTML編集をしていますので、別の画面で作業することになります。ブログタイトルや見出しデザインなどブログ全体に影響を与える編集についてはこのCSS画面でHTML編集をします


 それでは、さっそく編集作業について見ていきましょう。




ブログタイトル回り


 これについては、実は大したことはしていません。見た目も大きくは変わっていないと思います。変更した箇所は大きく3つです。


 先ほどのCSS画面から『/* ブログのヘッダー、タイトル、説明』という部分を探します。ここではブログのタイトルや、その下に書かれている説明などのデザインが編集できます。


FullSizeRender



 変更点の1つ目はブログタイトルの文字のサイズです。『#blog-title{』を探すと、『font-size:24px;』となっている部分があります(細かい数値などは選択しているデザインなどによって違うかもしれません)。この『font-size』は、いわゆる文字サイズの数値を決めます。ここでは24pxが文字のサイズのようです。私はこの数値をおよそ2倍の52pxに変更しました。


 それから、2つ目の変更点ですが、ブログタイトルの文字の色。先ほど文字サイズを変更したときに見た『#blog-title{』の1つ下に『#blog-title a{』という文字があります。この中に『color:#000;』となっている部分があります。​『color』では文字色を決めますただ、この文字色は直接色の名前を書き込むかカラーコードを書き込むのですが、調べると色の種類は膨大でした。この場合、『#000』がカラーコードとなっています。以下に私が調べるのに利用させていただいた色の名前とカラーコードの見本がありますので、こちらを参照することもできます。ちなみに、私はこのコード(色)を#006400(darkgreen)に変更しました。

参照元:原色大辞典(https://www.colordic.org/


 最後は、ブログタイトルの下に出てくる説明文のようなものの文字の色ですね。上の『#blog-title a{』のセクションの1つ下に『#blog-description{』というセクションがあります。この中の『color:#979797』となっていた部分を変更します。変更の仕方は先ほどと同じく色の名前もしくはカラーコードを選んで入力することで変更されます。私はここを#000000(black)に変更しました。




見出しのデザイン


 見出しのデザインは、ここからはこの話題ですよ、ということを知ってもらう為に使っているのですが、SEOにも有利に働くそうです。


 また、元のデザインだとh2とh3が同じように見えてしまい、ややこしく見にくいので、変更しようと思いました。


 さて、この見出しのデザインですが、CSSの『/* 記事本文』から始まっている部分を見ていきます。


FullSizeRender



 この画像は変更後のものなのですが、『/* 記事本文』のセクションの中に『.article-body-inner h1、h2、h3、h4』の記述がそれぞれあります。


 h1は記事タイトルのようでしたので、特に触っていません。


 さて、ここからが変更点です。まず、今回の作業をするのに、見出しのデザインサンプルを探しました。私が参考にしたのは以下のサイトです。

参照元①:【目次・見出し・広告削除】ライブドアブログを開設したらまずやることまとめ(http://upupulife.blog.jp/livedoorblog-mazuyarukoto.html

参照元②:シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル50(https://www.nxworld.net/tips/50-css-heading-styling.html


 さて、では変更点ですが、『.article-body-inner h2,』となっていた部分。これを以下のように変更しました。

.article-body-inner h2{
    margin:0 0 1.5em;
    padding:0.8em;
    background:#164a84;
    color:#ffffff;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
.article-body-inner h3 {
    margin:0 0 1.5em;
    padding:0.8em;
    border-left:7px solid #164a84;
    border-bottom:2px solid #164a84;
}
.article-body-inner h4 {
    border-bottom:1px solid #164a84;
}

 このコードをコピペすれば、私のh2〜h4と同じものになります。この記事だと『ブログのレイアウトを追加・変更する』のタイトルがh2で、この『見出しのデザイン』などがh3になっていますね。具体的には以下の画像のようになります。


FullSizeRender



 意外と細かいところまでいじれるので、少し楽しめました。ちなみに、このデザインはパソコン版からのビューでこう見えるというもので、スマートフォンからの場合は変わっていません。


 見出しのデザインについての説明はこんなところでしょうか。

 

 

目次


 実は、目次は記事を書くページでHTMLタグ編集の画面に変えてコピペしたものを挿入するだけです。アプリの場合はソース編集となっています。


 以下にHTMLタグを貼り付けますので、ほぼそのまま貼り付けるだけで、目次が完成します。

<div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;">
<b>目次</b><br />
<a href="#1">見出し1</a><br />
<a href="#2">見出し2</a><br />
<a href="#3">見出し3</a><br />
<a href="#4">見出し4</a><br />
<a href="#5">見出し5</a><br />
</div>
<h2 id="1">見出し1</h2>
ここに文章を書く
<h2 id="2">見出し2</h2>
ここに文章を書く
<h2 id="3">見出し3</h2>
ここに文章を書く
<h2 id="4">見出し4</h2>
ここに文章を書く
<h2 id="5">見出し5</h2>
ここに文章を書く

 これをコピペしてHTMLタグ編集の画面に貼り付けて、プレビューを見ると、簡単にできあがっています。


 これをタイトルの文字に変えて、h2なのかh3なのか、などをちょこちょこ編集するだけでできると思いますので、ぜひやってみてください。






(最終更新日:2019年9月25日)


PVアクセスランキング にほんブログ村