読者です 読者をやめる 読者になる 読者になる

syu blog

写真とか色んなこと。日常。

HTMLと私。

ブログランキング・にほんブログ村へ
にほんブログ村

こんばんは!

今回タイトル、「ブログいじり」か「HTML奮闘記」かで迷って

結果今のタイトルになりました。

特に意味はありません。(笑)

 

 

f:id:s-j0430j:20160824230924j:plain

 

本日は外で4時間ほど作業をしておりました。

何をしていたか

というのをこちらの方で書いていきたいなと思います。

 

 

 

タイトル見てもらえれば分かる通りなのですが

今回はブログをちょっといじってみました。

過去記事を少々変えただけなんですけどね。。。

頑張ってHTMLを触ってみましたよ!

 

 

 

今回変更した記事はこちら

 

 

s-blog.hatenablog.com

 

 

どう変わったの??

当然そうなると思います。

なのでこれから解説に入っていきたいと思います。

 

先に変更点を言っておきますと

  • メンバー紹介の挿入
  • Best3の紹介の仕方変更

 をしてみました!

 (※PCで見たときの表示を解説しています

 

 

メンバー紹介の挿入

 

 

まずこちらを見ていただきます。

 

f:id:s-j0430j:20160824231300p:plain

 

 

直す前のブログですね。

これだけしか書いてません。(笑)

 

やはり何か寂しい感じがありますね。もっと紹介しろと。はい、ごめんなさい。

 

HTMLはこうなっておりますね。

 

f:id:s-j0430j:20160824233911p:plain

 

 

私は基本、編集見たままモードにて書いているので

大文字小文字、色つけなどもぱぱっと選択するだけしかしていないので

そのへんのタグはよくわかっていません(笑)

 

で、今回このように弄りました。

 

出来上がりがこちら

f:id:s-j0430j:20160824234209p:plain

 

これは設定しているブログデザインのせいもあるんですが

可愛くなりましたね!!はい!

メンバーの手前のリボンとか勝手につきました!

タグいじってません!(笑)

下の点線は自分でやりました。

 

HTMLはこうなってます。

f:id:s-j0430j:20160824234921p:plain

 

<h2 style=">~</table>の部分を今回自分で打ち込んでやってみました。

同じタグを使うので割と簡単にできますよ。

 

 

Best3の紹介の仕方変更

 

 

お次はこちら

f:id:s-j0430j:20160824235253p:plain

 

f:id:s-j0430j:20160824235823p:plain

今見ると寂しいランキング発表。(笑)

 HTMLの方も改行タグのみ。

 

 

こちらをこうしました!

 

f:id:s-j0430j:20160824235910p:plain

 

いらない改行を省き、ランキングをコンパクトに!

 

HTMLはこうなってます。

 

f:id:s-j0430j:20160825000042p:plain

 

<ol></ol>

というタグは箇条書き+勝手に数字がついてくれます。

なのでわざわざ数字を書く必要がないので楽ですね!

上でも書いていないのがわかりますね。

 

ただの箇条書き、だけにしたい場合のタグは

<ul></ul>

というタグを使います。

 

 

ちなみに今の記事でも冒頭で使っています、気づいていましたか?

 

 

 

はい、こんな感じで4時間作業しました。

これだけに4時間?!と思いますよね。すみません。

昼食をとったり、誘惑に負けていたり

休憩を挟みつつやっていました。

 

f:id:s-j0430j:20160825000937j:plain

f:id:s-j0430j:20160825000938j:plain

 

(最後にお店紹介しています)

 

 

 

HTMLは専門学校の時に触ったくらいで、その時もわけわからずやっていました。

すごく苦手だった思い出もあって、手こずっていたりして、

いい思い出はなかったので触らず嫌いというかやらず嫌いだったのですが

今回やってみて結構面白いなってなりました。

プレビューで見たときにちゃんとなっていると嬉しいですね。

 

 

また今後も触れる時にさわってみたいなと思います~!

 

 

 

 

今回お邪魔したお店はこちら

 

tabelog.com

 

 

 

それでは