WordPressブログを書く人のためのプログラミング(HTML・CSS)入門

WordPressでブログをやるにあたって、プログラムについても知っておいた方がいいです。
必要最低限のことをまとめてみました。
(画面はWordPressについて書いていますが、WordPress以外でブログを書いている方にも通じる部分があります)
DSC03857
※オフィスにて。DSC-RX100M3

WordPressブログ記事の[ビジュアル]と[テキスト]

WordPressの管理画面の[投稿]は、次のようなものです。

EX IT SS 2

ここで記事を書いている方も多いかと思います。
(私はMarsEditというMac用ソフトで書いています)

この画面をよく見ると右上に[ビジュアル]というタブと[テキスト]というタブがあり、通常は[ビジュアル]タブが選択されています。
ネット上のHPやブログなどは、HTMLやCSSというプログラム言語で書かれています。

[ビジュアル]なら、これを気にしなくてもいいのです。
プログラム言語というと、敷居が高く難しいイメージがあります。
それをわかりやすくしてくれているのがブログサービスなのです。

[テキスト]タブをクリックすると、
このような表示になり、HTMLの一部が表示されます。
ブログを書く上ではこれをある程度理解しておくと便利です。
EX IT SS 3

知っておいた方がいいHTML

HTMLは、Hyper Text Markup Languageの略で、マークアップ言語といわれるものです。
マークアップとは、マーク(記号や文字)で囲むことにより、機械(PC)に命令を伝えることをいい、このマークは「タグ」と呼ばれます。

画像

たとえば、画像を表示して欲しいと言うときに、■という命令をするなら、

■画像■


------※この記事は、投稿日現在の状況、心境、法律に基づいて書いています。---------

と書きます。

人間には、画像だけが表示されるわけです。
ただし、その画像はインターネット上にありますので、その場所を指示しなければいけません。
インターネット上の場所は、URLという形で表現されます。
たとえば、このブログだと、http://www.ex-it-blog.com/です。

この写真は、
疲労回復薬膳カレー

https://www.ex-it-blog.com/wp-content/uploads/633a426bc188891df7382941309d7bde.jpg
という場所にあります。

管理画面で画像を入れると、自動的に自分のブログが置いてあるサーバーに保存されるのです。

これを画像として表示するなら、imgというタグを使います。
imageの略です。

<img alt=”” />
と書き、○○には、src(source:ソース。画像の場所を指示)=画像の場所を入れます。
<と>できちんと囲むことも大事です。

さらに、
・画像の大きさを指定したいときは、width(横)、height(縦)
・画像の説明 alt Title
・外枠 border 0に指定すると、枠が非表示
といったオプションがあります。

前述の画像は、こう書かれています。

<img title=”疲労回復薬膳カレー.jpg” src=”https://www.ex-it-blog.com/wp-content/uploads/633a426bc188891df7382941309d7bde.jpg” alt=”疲労回復薬膳カレー” width=”550″ height=”345″ border=”0″ />

当ブログの画像の設定は、幅(width)が550です。
(ソフトの設定で自動的にやっているため549や551になることもあります)

リンク

リンクをはるときは、aというタグを使います。
anchorの略で、碇の意味です。

リンクを張る=碇をおろすというイメージでしょうね。

たとえば、プロフィールというリンクは、

<a href=”http://www.ex-it-blog.com/profile/”>プロフィール</a>

と書きます。

hrefは、hypertext referenceの略で、ハイパーテキスト、つまりネット上のURLの意味です。
imgのときは、<img ○○>という形式でしたが、aの場合は、で囲みます。

表示名

という形式です。
前述の例では、表示名は、プロフィールとなっています。

引用

引用をしたときは、

引用

と表現され、これは、

<blockquote>引用</blockquote>
と書かれています。

見出し

見出しは、この記事の場合、見出しの1つめが、

<h2>知っておいた方がいいHTML</h2>

見出しの2つめが、

<h3>画像</h3>

と書いています。

h2、h3というのが見出しのタグです。
<h2>と</h2>
で囲みます。
なお、h1はブログ記事タイトルで使っているので、h2からつけるものです。

この見出しは、Google検索上も重要ですので、必ず使いましょう。

他にも多くのHTMLがありますが、ひとまずはこれくらい知っておけば大丈夫です。
このHTMLで設定したものの見た目は、スタイルシート(CSS)で設定します。

見た目はスタイルシート(CSS)で設定

上記のHTMLで設定したものが、どんな見た目(色、フォントなど)は、テーマによって決められています。
それを好きなように変えるのはスタイルシートを編集しなければいけません。

スタイルシートは、WordPressの管理画面の[外観]→[テーマの編集]の[スタイルシート]にあります。

EX IT SS 4

たとえば、この中にh2やh3のデザインに関する記述があるはずで、この記述がCSS(Cascading Style Sheets)という言語です。
EX IT SS 5

この部分を編集するか、スタイルシートの一番下に、CSSを追加すれば、変更できます。
(下に追加した方が無難です。壊してしまうとブログの表示がおかしくなるので、かならずテキストファイルなどに元のスタイルシートを貼り付けてからやりましょう)

当ブログの見出しはこのように設定しています。

h2 {
color: #b94047;/*フォントの色*/
font-size: 20px;/*フォントのサイズ*/
font-weight: bold;/*フォントの太字*/

border-color: #b94047;/*線の色*/
border-style: solid;/*線のスタイル*/
border-width: 0 0 2px 16px;/*線の太さ:上右下左 */

padding: 0px 0 5px 10px;/*内側の余白:上右下左 */
margin:70px 0 50px 0 ;/*外側の余白:上右下左 */

}

フォントの色は、こういったサイトで色のコードを探しましょう。

私はえんじ色の b94047を使っています。
サイズは、pxで設定します。
boldは太字という意味です。

線のスタイルで、Solidは1本線。
線の太さは、上が0、右が0、下が2 左が16と設定しています。
すべて1にすると、線で囲めます。

余白は内側のものがpadding、外側がmarginです。

見出しの前後は行をあけた方がいいので、これもCSSで設定しています。
EX IT SS 8

HTMLでこれらを設定することもできますが、CSSで設定しておいた方が、一括してすべての記事のデザインを変更できるため、この方法が主流です。

まずは、WordPressの投稿画面の[テキスト]を見て、自分の記事がどう表現されているかを確認してみましょう。
その上で、少しずつ覚えていけばいいかと思います。





35年の信頼、大地宅配のお試し野菜セットが送料無料で980円から

【編集後記】

昨日、右足首に若干違和感があったので、ランは休み。
冷やしつつ、ちょっと休みます。

今シーズンのレース予定は、
・11/15 埼玉マラソン
・12/6 湘南マラソン
・12/13 青島(宮崎)マラソン
・1/31 新宿ハーフマラソン

今回は軒並み抽選に外れたので、少なめです。
もう1レース、来年こそ、3月のバルセロナマラソンを狙っています。

【昨日の1日1新】
※詳細は→「1日1新」

銀座カフェビストロ

■スポンサードリンク

【1日1節】
時間術の本を1日1節書く。12月22日完了予定。
22/84

■スポンサードリンク



■ブログEX-ITの購読 →feedlyを使って無料で読む
→Twtterで読む
Facebookで読む

■1日1新 Instagram
@1day1new
井ノ上陽一のVALU
■著書
ひとり税理士のIT仕事術―ITに強くなれば、ひとり税理士の真価を発揮できる!!
フリーランスとひとり社長のための 経理をエクセルでトコトン楽にする本
新版 ひとり社長の経理の基本
毎日定時で帰っても給料が上がる時間のつかい方をお金のプロに聞いてみた!
『ひとり税理士の仕事術』
『フリーランスのための一生仕事に困らない本』
『社長!「経理」がわからないと、あなたの会社潰れますよ』
『そのまま使える経理&会計のためのExcel入門』