【リアイム】

タップ（クリック）で消す



よみこみ中…








閉じる
もくじ

リアイム

アウトプット&知識の共有

トップ > リアイム > ブログを自由にカスタマイズしよう！ html css イメージを掴む【はてなブログ】

ブログを自由にカスタマイズしよう！ html css イメージを掴む【はてなブログ】

リアイム プログラミング ブログ

f:id:a1t2s2u2:20211224191004p:plain

サイトを自由にカスタマイズする


ブログ運営では

  • 好きなデザインにしたい
  • 動的処理を追加したい！
  • もっとたくさんの色を使いたい！

というような場面があると思います。


あとがき：この記事を書いてて気づいたのですが、スカイブルー（skyblue）って綺麗ですね。最初は見にくいかな〜と思って避けていましたが、今回の記事で多用してしまうかもしれません。


もちろんテンプレートなどでデザインはとても質の良いものが揃えられていますが、個人のオリジナリティを実現することも大切です。



でも自由にカスタマイズを可能にするにはプログラミングが必要で大変そうですよね。今回の記事を通して、「どのようにカスタマイズするのか」を知ってみませんか？

少しでも知識があるとサイト運営がとても快適になります。。


この記事の目的

f:id:a1t2s2u2:20211223221125j:plain

「完全にコードを理解してもらうこと！」ではありません。

僕の記事よりも他の方が時間をかけて丁寧に説明されている記事はインターネット上に数多く存在します。そこで、今回の記事を通してまずは雰囲気を具体例から体感してもらう事を目標としています。


何事も最初の一歩って本当に重くて、そのきっかけを提供できたら嬉しい限りです。


全くわからない状態から少しでも動かせる事ができたのならそれで十分です！

デザインでどれだけのことが変わるのかを体感してみましょう。


それと、僕はデザイン力に自信がありません。そのためデザインが悪いといった苦情は受け付けておりませんので、ご了承ください。コードの雰囲気を味わう事が大切です。



ブログのテーマへの不満

f:id:a1t2s2u2:20211223220604j:plain

はてなブログではテーマストアでさまざまな用意されたデザインを使用することができます。数多くのテーマから自分好みを選択することができるのでとても便利ですよね。

blog.hatena.ne.jp

当ブログ「リアイム」ではHaruniを利用しています。

blog.hatena.ne.jp


しかし！


自由度が低く、決められたデザインのまま利用することには不満がある方も僕を含めていらっしゃるのではないでしょうか？例えばさっきのテーマでの不満はaタグを使う時に現れます。（htmlで説明します。）

通常、aタグは色が変更されません。デフォルトの色で表示されますが、テーマの影響でピンク色になったりと、リンク用にされていました。現在はcssでこれを阻止するようにはしていますが、テーマのせいで自分の思っていたデザインにならないのは嫌ですよね。


そんな悩みを解決するにはhtmlやcssといったマークアップ言語を学習する必要があります。とはいっても決して難しくはありませんん。まぁ文字だけだと伝わらない部分があるので、実際に具体例などを通してそれぞれの正体を見に行きましょう。

　　↓ ↓ ↓



html

f:id:a1t2s2u2:20200428120020j:plain

htmlとはマークアップ言語の一つで、プログラミング言語ではありません。

マークアップ言語は文章の構造などの情報をテキストファイルに記述するための言語と定義されています。


具体例

具体的な例を見てみましょう。

HTMLの例【 htmlコード 】

<p>「<strong>リアイム</strong>」へようこそ！</p>
<p>たくさんの新しい発見をしましょう。</p>


【 表示結果 】

「リアイム」へようこそ！

たくさんの新しい発見をしましょう。


＜〇〇＞ ← これをタグと呼びます。


どうでしょうか？

タグと文字を組み合わせることで表示する文章を記述していますよね。これがhtmlの役割です。タグには数多くの種類が存在し、それらを組み合わせることで自由な表現が可能になります。



もう少し複雑な例を提示します。

HTMLの例【 htmlコード 】

<fieldset>
  <legend>りんごについて</legend>
  <img src="りんご画像のパス">
  <ul>
    <li>美味しい</li>
    <li>甘い</li>
    <li>赤い</li>
  </ul>
  <p>りんごってめちゃくちゃ美味しいですよね！</p>
  <p>しかし、お高いのであまり手が出せません…</p>
  <p><strong>みかんも美味しいですよ！？</strong></p>
  <button>りんごを見に行く</button>
</fieldset>


【 表示結果 】


りんごについて
f:id:a1t2s2u2:20211224141250p:plain
  • 美味しい
  • 甘い
  • 赤い

りんごってめちゃくちゃ美味しいですよね！

しかし、お高いのであまり手が出せません…

みかんも美味しいですよ！？



この例ではfieldsetタグを用いています。これは枠作成し、legendを用いることでタイトル的な部分も追加できます。ちなみに、具体例の枠もfieldsetを利用しています。

すこし違う部分がありますけどね。



何か物足りない…

しかし！
さびしいですよね…


そうです、デザインがありません。


f:id:a1t2s2u2:20211224153056p:plain


イメージとしてはhtmlは骨組みを構成することが役割であって、デザインのために使うわけではありません。（組み合わせで使う）


ではデザインを担当する言語を見てみましょう。



css

cssもhtmlと同じくマークアップ言語ですが、その役割は大きく異なります。htmlがサイトの構造を担当するのに対してcssはデザインを担当します。基本的に２つの言語を組み合わせて使います。


文字だけでも次の項目以上に設定する事ができます。

  • 色
  • 太さ
  • 大きさ
  • 位置
  • 余白
  • 境界線
  • マージン
  • フォント
  • 境界線の色
  • 〇〇した時のデザイン

本当にたくさんあって自由度が広がりますね。


難しそう…？


全然そんなことありません。htmlよりも断然簡単ですし、暗記する必要もありません。こちらも具体例を用いてどのようなものかを理解してみましょう。※ 今回はhtmlコードのタグにcssを追加します。

具体例

CSSの例

【 html & cssコード 】

<span style="font-size: 130%;border-bottom: 2px dotted pink;padding: 5px;">
  こちらの文を<span style="color: pink;font-weight: 800;">デザイン</span>で変化させます。
</span>


【 表示結果 】

こちらの文をデザインで変化させます。



htmlのタグにstyle=""（style属性という）をつけます。

その中にcssコードを記述することでデザインを変化させることができます。他にもclassやid、タグ名などを用いて外部から設定することも可能ですが、最初はこの直接書く方法が理解しやすいと思います。


なんとなくでも、英単語の意味がわかるとデザインの理解が早いですね。


例えば、
font-size：文字の大きさを表し、今回は130%に拡大しています。
border-bottom：底（bottom）に点線（dotted）を2pxの大きさで表示します。

こんな感じで設定をします。
もちろん他にも数多くの設定項目があり、その分自由度も高まります。



Googleロゴを作ってみよう

Googleのロゴ今回の例ではグーグルのロゴを模写してみます！


【目標】
f:id:a1t2s2u2:20211214195553p:plain

こちらの画像的なものを作りましょう。
※ 見やすさを考慮して背景を黒く設定しています。


【 html & cssコード 】

<div style="font-family: 'Product Sans';font-size: 300%;font-weight: 800;background: rgb(45, 45, 45);padding: 30px;">
  <span style="color: #4285F4;">G</span>
  <span style="color: red;">o</span>
  <span style="color: yellow;">o</span>
  <span style="color: #4285F4;">g</span>
  <span style="color: green;">l</span>
  <span style="color: red;">e</span>
</div>

【 表示結果 】

Google

ちょっと色が違いますね笑
フォントは諦めました！

※ はてな記法なので実際の記述コードは次のようになっています。

<div style="font-family: 'Product Sans';font-size: 300%;font-weight: 800;background:rgb(45, 45, 45);padding: 30px;"><span style="color: #4285F4;">G</span><span style="color: red;">o</span><span style="color: yellow;">o</span><span style="color: #4285F4;">g</span><span style="color: green;">l</span><span style="color: red;">e</span></div>

色の設定は


のように英単語でもできますが、rgbaを用いるともっと細かく設定する事ができます。それぞれの色の強さを設定でき、a（0 <= a <=1）は透明度を表します。

f:id:a1t2s2u2:20211224144833p:plain

実際に僕が使用しているテキストエディタでは色の設定を簡単にしてくれます。

このソフトはVisual Studioです。（Microsoft）
エンジニアにはとても人気のテキストエディタで、拡張機能を導入することでより一層便利なものに変身します。僕はaboutページやhead要素を自分のローカル環境に保存してテキストエディタで編集しています。



JavaScript

f:id:a1t2s2u2:20211212213345j:plain

この言語を掲載するか少し迷いました。

html,cssがマークアップ言語だったのに対して、JavaScriptはプログラミング言語に分類されます。


つまり、プログラムの理解がそれらと比べると難しくなります。それゆえに初めての方の初めの一歩を重くしてしまいかねません。



全然わからないからといって心配しないでください。プログラミング言語は最初が理解するに一番苦労します。その後は１つわかると連鎖的に理解できるようになります。


今回はあくまでもどのようなことができるのかといった雰囲気だけでも味わってほしいので、お気軽にご覧ください。




JavaScriptの役割は動的処理です。

といってもイメージを持つことが難しいですよね。


【ボタン】

下のボタンをクリックしてみてください。

PUSH


ボタンを押すと、あらかじめ設定した処理が実行されます。


次のボタンは文字通り、絶対に押してはいけませんよ…？？？

絶対に
押さないで



【ロード画面】

当ブログ「リアイム」はサイトが読み込まれるまでロード画面を表示しています。この画面ではJavaScriptによって「どのタイミングで削除するか」などを管理されています。

非常に可能性が広がりますが、それだけプログラムを組むことが難しいかもしれません。
慣れると本当に簡単なんですけどね…



最初のボタンの処理はこのようになっています。

<a onclick="alert('サイトに来てくれてありがとう！');" class="button_a">PUSH</a>

htmlのonclick属性にjavascriptプログラムを記述しています。

要素（ボタン）がクリックされたらonclick内の処理を実行します

という意味ですね。

classではボタンのcssをまとめて外部で記述しているだけなので気にしないでください。




ちなみにさっきのボタン処理はこのように記述されています。（ネタバレ注意！）


if( window.confirm('ご使用のデバイスはおばけウイルスに感染したことが検出されました。\nクリーンアップを実行するためにお金をくれますか？') ){
    alert('こういうの詐欺なので払わないでくださいよ？？？');
}



ただ、JavaScriptはhtmlやcssを理解してからにしましょう。コードでhtmlの要素を扱うにしてもとても苦労します。



はてなブログを利用している方へのおすすめとしては「はてな記法」を利用することです。
完全にhtmlではありませんが、簡単にコードを実装することができ、プレビューもリアルタイムで確認できるためhtmlやcssの学習になります。

それにコードをサイト上に表示することも可能です。詳しくはこちら ↓

riaimu.hateblo.jp


僕も最近はずっとはてな記法を利用しています。
ある程度html,cssの知識があるととても便利です！


重く閉ざされた扉を開こう


f:id:a1t2s2u2:20211223220821j:plain
記事を読んでいただきありがとうございます。
この記事によって重く閉ざされていた扉の鍵を開けることができたならとても嬉しいです。その先ではわからないことや挫折してしまうような経験がもしかしたらあるかもしれません。その時は遠慮なくTwitterに質問しに来てくださいね！
　※ 画像の扉は見ため以上に重いのです…

Twitterへ


おすすめの参考書

<タグ名 class="cssの内容" id="id名" style="cssの内容"></タグ名>

といったように
htmlは文法構造さえわかれば大丈夫です。

なので安くて理解しやすい参考書をお勧めします。



もちろん、深いところまで自分は勉強がしたいんだ！
という方には専門的な本をお勧めしますけどね。


学生はお小遣いが辛いと思うので、安いものをお勧めします。
余裕のある方は参考書の質を優先して選びましょう。







【おすすめ記事】

riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp



【あまりおすすめできないけど…】
過去の記事なので文章が読みづらかったり、情報のまとまりがないことがあります。

riaimu.hateblo.jpriaimu.hateblo.jp
riaimu.hateblo.jp






記事の内容に間違いがあった場合は、Twitterもしくはお問い合わせフォームからお伝えください。