[ライブドアブログカスタマイズ]ブログをカスタマイズしてみよう

先に書いておきますが、こういうの全然詳しくありませんｗ
HTMLやCSSなどチンプンカンプンな人が調べながらブログデザインを変えて楽しんでいますので、我が家でやっていることを一部ですが参考になりませんがｗ参考までに書いてみます。
詳しい方はご自身で調べてください。(笑)
ココのHTMLは・・・と質問されても答えれる知識は持ち合わせていません(笑)

はじめに

私はこのブログで初めてブログというものを始めました。
無料ブログはたくさんありますが、ライブドアブログを選んだ理由は特にありません。

ブログを始めてから色々な無料ブログの特徴などを調べましたが、とにかく簡単に始められるブログやデザインテンプレートが豊富なブログ、たくさんのカスタマイズができるブログ等特徴があります。

そんな中でもライブドアブログはそれなりのテンプレートもあり、それなりにカスタマイズでき、操作が簡単だと思います。
何より無料ブログですからね。

途中でブログ引越しも考えましたが、結局はライブドアブログが使い慣れてしまい、引越しせずに落ち着いています。

デザインテンプレートは登録しなくても見ることができますので色々なブログのテンプレートを見てみてから始めるのもいいかと思います。

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

こちらはライブドアブログの管理ページです。

＊アクセス数だけは消させて頂きました。

ライブドアブログはレスポンシブに対応していません。
(レスポンシブデザイン＝簡単に言うとPCでもスマホでも見やすい表示に自動で切り替える仕組みのデザイン。一つのHTMLで済む。)
よって、ライブドアブログではPC用とスマートフォン用でデザインの管理が異なります。
タイトル画像などもそれぞれ設定しなくてはいけません・・・

レスポンシブに対応したら最高なんですが、広告の関係ですかね・・・

ちなみに、ライブドアブログはhttpsにはまだ完全には対応できておらず、2020年6月～7月を目途に対応されているようです。



データ保存容量も無制限です。

無料ですので一度登録だけして触ってみるのも良いかもしれません。

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

ブログ設定画面よりデザイン/ブログ設定のPCを選択し、カスタマイズ画面に入ります。




PCデザイン設定画面


【デザイン選択】ではテンプレートの選択ができます。
【カスタマイズ】ではCSSやHTMLの編集ができます。
【タイトル/背景】では、タイトル画像の設定、背景画像の設定ができます。
＊ここの設定ではテンプレートに”かんたんタイトル画像対応”があるものしかタイトル画像が設定できません。
【メニューバー】では、テンプレートデザインでメニューバーに対応しているものだけメニューバーが設定できます。
【ブログパーツ】では、サイドカラムに表示させるパーツを選択、編集できます。


【保存】ではカスタムしたデザインを保存しておくことが出来ます



CSSを変更すればある程度のデザインは変更できますので、テンプレートを選び”背景色だけ変えれたら・・・”とか、”文字色だけ変えたい・・・”なんて時は弄ってみると面白いと思います。

CSSを弄ってデザインを変えてみる

CSS(スタイルシート)を弄ればデザインを色々と変更することができます。
＊失敗して元に戻せなくなったということがないように変更前の状態を保存しておくことをおすすめします。

慣れていないと少し難しいですが、背景色を変更するとか、文字色を変更、字体を変更する程度であれば簡単にできます。



例えば、ブログの背景色を変えたい場合。

カスタマイズ画面CSS内に全体のレイアウトを指定している部分がありますのでカラーコードを変更すれば変えることができます。

ほとんどのテンプレートに


その中の「background-color:」で背景色が指定されています。
background-color:#000000ココの英数字を変えると背景色が変わります。
この６桁のカラーコードは検索するとたくさん出てくると思いますので「カラーコード」で検索してみてください。



全ての変更箇所を書くと長くなりますのでやめますが、文字色・リンク色やサイズ、ブログの幅や字体なども変更できますので弄ってみると面白いです。



また、我が家はWebブラウザはGoogle Chromeを使用していますが、とても便利な機能があります。
Webページ上で右クリック【検証】よりCSSを確認・お試し変更ができるんです。


どこを変更すればどこが変わるのか？など、ブログ設定を弄らずにWeb上でお試し変更できますので全体の雰囲気を確認しながら変更してみることができ、とても便利です。

フリーエリアの使い方(データUP方法)

ライブドアブログにはフリーエリアが用意してありますが、うまく活用すれば色々なものを置くことができます。(他の無料ブログもほぼ同じだと思います)
我が家の管理表データや種親情報、Twitterタイムラインなどもフリーエリアを活用して表示させています。

エクセル管理表のUP方法は過去記事を参考にしてください。



Twitterタイムラインを表示させる方法は、以下のリンクから埋め込みコードを作成することができます。
設定にて高さやテーマもカスタマイズできるので作成後にフリーエリアに設置すれば表示させることができます。



また、固定ページを作成したいときにもフリーエリアは役に立ちます。
我が家は種親紹介を以下の方法で作成しフリーエリアを使用し設置しています。




他にも、少し手をかければPDFファイルの埋め込みもできます。
(参考過去記事)



スマホ普及によりPCより訪問くださる方が７割ですけどね(笑)