写真だけじゃない、サイト作りという趣味もある! 実際にカテゴリー追加作業を公開

最近、ブログの記事が撮影記ばかりになってしまっております。外に出ていることのほうが刺激的な記事が書けるので自然とそうなってしまっているのですが、引きこもり気質の私は本来「サイト作り」がメイン趣味でした。サイト作りといったら大げさではあるのですが、自分のホームページ(ブログ)を更新して、時にはサイトデザインをいじったり、新たなページを作ったりなどです。

 

今日はそんなサイトをいじる趣味について、実際にこのブログをいじっていきながらご紹介したいと思います。

 

実はこのブログ、パソコンからアクセスがあった時のデザインと、スマートフォン(タブレットも)からアクセスされた時のデザインと2種類存在します。

 

 

 

上がパソコンからアクセスがあった時に表示されるレイアウトで、下がスマホです。今このブログを読んでくださっている方はどちらかのデザインになっているかと思います。今日は下のスマホ用のレイアウトをいじります。何をいじるかというと、右上のメニューです。

 

 

この赤字で囲まれた通称「ハンバーガーアイコン」をクリックすると、横からにょろっとメニューが現れますよね。

 

 

はい。出ました。SHIGEFIKAグループサイト全体を巡回しやすいようにメニューを作っておりますが、このメニューに「ブログカテゴリー」を表示する作業をしていきます。大晦日にパソコン版レイアウトでカテゴリー分け作業をしたと記事にもしましたが、それをスマホ版にも実装しようということです。

 

 

パソコン版のレイアウトのサイドバーについております。これをクリックすることで過去記事を探したり、見ることが少し楽になりますね。カテゴリーは「日常」「写真」「旅」「サイト制作」「雑記」の5つ。

 

HTMLをいじる

 

サイトのデザインは基本的に「HTML」と「CSS」という二つのものをいじっていきます。うまく説明できませんが、家で例えるとHTMLは柱や基礎を打ち立てて、CSSは壁の色を決めたり、窓枠を変えたりとか、そんなイメージでいいんじゃないでしょうか(笑)。

 

 

今日いじるHTMLファイルはこちらです。初めて見た方にとったらめちゃくちゃメンドくさそうと思われるかもしれませんが、慣れている人からしたらほんの数分で終わるめちゃくちゃ簡単な作業です。

 

トップページの下にカテゴリーを入れる作業をしていきます。

 

 

<li>というのは、「リスト」を作る時に使うタグです。<li>と打つとリストを作り始めたよという意味になります。そして</li>といって/を入れてあげるとここで終わりという意味になります。このリストタグのなかに、カテゴリー別のリンクを貼っていきます。

 

 

<a>タグはリンクを作るために使います。aタグの中に挟まれた文字をクリックすれば、指定したURLに飛ばします。今日の作業はたったこれだけです。実に簡単。リストのなかに、この指定のURLのリンクを貼るという作業が行われました。早速しっかり機能しているかチェックです。

 

 

完璧ですね。これでスマホ版レイアウトにもカテゴリー機能を実装できました。こんな感じで、いつもちまちまとサイトをいじったりしております。

 

なにが面白いって、自分の思い通りにデザインをいじれることですよね。マイホームを作ったり、マイカーを持って自分なりにカスタマイズするのと同じ感覚だと思います。そして、こんな意味不明な文字の羅列を書くだけで、レイアウトが変幻自在にできるってすごくないですか。なんで文字書いてこんなに変わるんだっていう感覚。最初やりはじめたころは驚きましたね。きっとプログラミングでもそうだと思いますけど。

 

今はもうツイッターなりSNSってデザイン固定されてて、ユーザー側がちょっと色変えられるだけじゃないですか。でもやっぱり一人一人個性のでる個人サイトってもっと増えてくれたらいいのにって本当思います。皆さんも興味あったらはじめてみてください。私でよければちょっとなら教えられるかもしれません。以上、もう一つの趣味のご紹介でしたっ。


FavoriteLoadingこの記事をクリップリストに追加する 

衣田 史景

元ローカル新聞社報道部記者見習い。街のイベント、お店などを中心に取材をし、時には市役所、警察など遊軍も経験。学生時代に写真部だった経験を買われ、カメラマンとして先輩記者の取材に同伴することも。現在は引きこもりで、記者を目指しながら、オピニオンサイト「SHIGEFIKA」などを運営。

最近の投稿
カテゴリー
Twitter