くべーら

昨年、株のみで400万稼いだたっちょと人材業界4年目のごうちゃんが株と転職の情報を提供する。

【ブログ/備忘録】勉強日記~ブログのオリジナルカスタマイズ~

こんにちは!ごうちゃんです!!

 

現在、ブログ初心者ということもあり本を読みながら勉強中です!!

今回は読んだ本の内容を備忘録として書いていきます!!

 

ブログのイラスト(ウェブサイト)

 

ブログカスタマイズができる!

ブログカスタマイズですが、自分でプログラミング(HTML、CSS)を活用することでオリジナルのカスタマイズができるそうです!

 

ブログの見た目ももちろんですが、メニューの設置やSNSボタンの変更などかなり凝った点までカスタマイズできます。

 

HTMLとは

HTMLとは[Hyper Text Markup Language]の略です。リンクや画像、改行やリストなどをHTMLを記載することで表示をすることが可能です。

 

HTMLはタグを利用して記載をしていきますが、その部分がどのような要素なのか記載をすることでブラウザに様々な文字、画像を表示することができます!!

 

例えば、、、

 

〈h1〉仕事中〈/h1〉

 

〈h1〉がタグです。

h1とは大見出しを意味します。

 

つまり、[仕事中]は大見出しであるということを意味しており、webサイト上では大見出しとしてこの文面が表示されます。

 

HTMLはタグを使って、文字や画像を表示するためのツールなのです。

 

CSSとは

CSSとは[Cascading Style Sheets]の略です。HTMLで表示した文字や画像の装飾やデザインをするのがCSSです。

 

〈h1〉仕事中〈/h1〉をCSSで装飾すると、、、

 

〈h1 style= ''color:blue;''〉仕事中〈/h1〉


とCSSである[style= ''color:blue;'']を記載することで、文字色が青くなります。

 

CSSには記載方法が2つあり、インラインスタイル外部スタイルと呼ばれる記載方法があります。

 

インラインスタイルは先程例で示したように、直接HTMLに記載をする方法です。分かりやすく書きやすいことが利点ですが、HTML要素が増えると工数がかさむのが難点です。

 

外部スタイルとは、一度の記述でHTML要素すべてをCSSで装飾する方法です。

 

例えば、

h1{

  color:blue;

 

と記載をすると、〈h1〉で囲まれた部分だけ、すべて青色になります。

 

つまり、この記述はh1の要素のHTMLは全て文字色を青にするといった意味になるのです。

 

どんなカスタマイズができるの?

HTMLとCSSを使えば色々なことができます。例えば、以下のことが可能です。

 

・ブログタイトルの色や文字の大きさの変更
・ブログタイトルの背景、位置カスタマイズ
・記事タイトル周辺のカスタマイズ
・記事の見出しカスタマイズ
・ボタンのデザインカスタマイズ
・サイドバーのカテゴリー表示のカスタマイズ
・グローバルナビゲーションの作成
・ソーシャルパーツのカスタマイズ

 

個人的には、グローバルナビゲーションの作成がいいなと思いました!

 

グローバルナビゲーションとはサイトやブログにおける共通メニューやコンテンツの案内リンクですが、ブログの先頭にあると見栄えやユーザーの使い勝手もよく感動しました笑

 

f:id:Tana35:20210131102536p:plain

ABC (id:webabc)さんのブログより引用。スタイリッシュな見た目のブログでした。

                                         URL:https://webabc.hatenablog.jp/

 

勉強したばかりなので、まだ手をつけれていませんが、少しずつ実装していきたいなと思っています!!

 

最後に

今回は読んだ本の内容を備忘録としてまとめさせていただきました。自分が学んだことのアウトプットによって少しでもお役に立てれば幸いです。

 

下記、今回読んでいる本です。初心者で色々と本屋で立ち読みをして一番とっつきやすい本を選びました笑

図解が多く、説明が丁寧な本であったこともあり、ド文系のごうちゃんでも読みやすかったです!!ご参考までに。

 

はてなブログ Perfect GuideBook 改訂第2版

はてなブログ Perfect GuideBook 改訂第2版

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: Kindle版
 

 

 

※以下バナーから同分野の人気ブロガーのランキングが見れます!!

にほんブログ村 株ブログへ
にほんブログ村

  

 ↓↓↓『 B!(はてブ)』ぽちっと応援も感謝致します!!↓↓↓