【第5回】役に立つコンテンツであるための最低限の基本

少々HTMLの話からはそれますが、コンテンツとして「役に立つ」文書に最低限必要なものはなんだろう?と考えてみました。

それでは本日の日記です。

スクリーンショット 2016-02-13 23.45.50

企業サイトのコンテンツ、ブログのコンテンツ、いろいろあると思いますが、インターネット上に散らばる様々なコンテンツが有益であるかどうかは、ユーザーが何を探しているかによって異なり、ひとくくりに「これが有用である」と決めることは難しいです。クライアントさんに「こんな内容が有用だと思います」なんて滅多に断言できません。

ですが、確実に言えることがあります。文書について「いつ」書かれたものかを明記しておくことは、非常に重要であると。誰かにとってこのコンテンツが役に立つかどうかなんてわかりませんが、いつ書かれたのかがわからないとその文書の価値は落ちると思います。

続きを読む 【第5回】役に立つコンテンツであるための最低限の基本

[ssba]

【第4回】ハイパーリンクのタグについてもう少し詳しく知る

IMG_6015

<a>タグは当初は「アンカー(anchor)タグ」という名前でした。アンカーとは錨(いかり、船を止めておくもの)という意味です。ここでは詳しく書かないのですが、リンクの始点と終点も<a>タグの役目だった経緯があります。
現在ではハイパーリンクのためのタグ、とされています。リンクの終点としても役目は無くなりました。
続きを読む 【第4回】ハイパーリンクのタグについてもう少し詳しく知る

[ssba]

【第3回】HTML文書同士を「つないで」みよう

※今回の後半はほぼ本編に関係のない、書いた人の暴走が含まれております。

IMG_6014

3日続けてまいりました、ここで息切れないように続けていきたいと思います。

ハイパーテキストの醍醐味と言えるのが、この「文書同士をつなげる」ことです!と、個人的に思っています。

では、今日の文章を書きましょう。

スクリーンショット 2016-02-13 20.00.56

書いたら一旦保存します。20160215.htmlとしましょう。

続きを読む 【第3回】HTML文書同士を「つないで」みよう

[ssba]

【第2回】HTMLを書いてみましょう2

今日はマークアップを書いてみます。

その前に、今日の日記を書いておきましょう。
テキストエディタを開いて、新しい文章を作ります。適当で構いません。

スクリーンショット 2016-02-13 15.23.32

一旦、保存しましょう。「20160214.html」と名前をつけます。昨日と同じフォルダに保存しておきましょう。

マークアップのイメージは、蛍光ペンを持って、「ここから〜ここまで」と色をつけるようなイメージです。始まりと終わりがあります。そしてそれはセットになっています。マークアップに使うのは「HTMLタグ」です。「HTMLタグ」には始まりと終わりがあります。

続きを読む 【第2回】HTMLを書いてみましょう2

[ssba]

【第1回】HTMLを書いてみましょう1

では、HTMLを書いてみます。まず、用意するものがあります。

これからHTMLを書いていきます。書いたHTMLは拡張子が.htmlというテキストファイルになります。そのファイルをまとめておくために、場所を作りましょう。
ご自分のパソコン内に適当な名前でフォルダを作ってください。できれば半角英数のみで名前をつけてください。深い意味はありません、そんなもんだと思って慣れてください。

次に、HTMLを書くためのアプリケーションを用意します。Windowsの場合はメモ帳で大丈夫です。Macの場合は「mi」というテキストエディタのアプリケーションを使いますので、ダウンロードしてインストールしてください。これらのアプリケーションは「テキストエディタ」と呼ばれる種類のものです。Macにある「テキストエディット」というアプリケーションは名前が似ていますが違うものです。紛らわしいですね。

あとはブラウザがあればOKです。いつも使ってるものでいいですよ。

では、早速書きます。テキストエディタを開きます。まず、文章を書きましょう。なんでもいいですが、勉強のために後々わかりやすいので、日記を書いてみてください。
別に長くなくても構いません。

続きを読む 【第1回】HTMLを書いてみましょう1

[ssba]

【第0回】ウェブサイトを知りたい人向けにHTMLの話

IMG_6011

制作者としてウェブサイトを作りたい人や、発注者としてウェブサイトを作りたい人向けに、そもそもウェブサイトっていうものがどんな風にできているのかを知ってもらいたいと、思うような出来事が続いたので、少し書いてみようと思います。

ただ、私は物書きではないし、ウェブサイトについて全てを知っているわけでもないです。なので、だいぶ制作者よりの内容になってしまいますが、そこは気をつけて、なるべくわかりやすく書くようにします。

ウェブサイトのことを知りたかったら、使いましょう

これに尽きると思います。
例えば、ホームページという言葉の意味を検索して調べてみてください。
・・・・・やってみましたか?
するとたぶん、この記事の中で「ホームページ」という言葉を避けていることに気がついていただけると思います。
このお話の続きはまた最後に。

ウェブページは何でできているか?

ウェブページは、ざっくり言うと次の3つの要素でできています。

「HTML」・・・ウェブサイトのページを作る要
「CSS」・・・・色をつけたり、線をつけたり、最近では簡単な動きも実現
「Javascript」・・色を変えたり、動きをつけたり

ただし、これはフロントエンドの話で、最低限、この要素が関わっている、という話です。ウェブサイトの中にはデータベースと情報のやり取りをするプログラムやシステムなどの上記以外の要素との組み合わせでできているものが多くあります。

私はHTMLとCSSを特に重点的に取り扱っています。Javascriptはあまりよく分かりません。このように、ひとくちにウェブの制作者といってもよくわかる分野、わからない分野があります。ひとつひとつがとても深いものなので、ひとりで全てを深く理解するのはとてもハードルの高いことです。上記の要素はいずれも「言語」と呼ばれるものです。

HTMLは「HyperText Markup Language」という言葉の頭文字をとったものです。日本語訳すると「なんかすっごい文書のために意味付けをする言語」でしょうか、我ながら酷いですね。HTMLで何をしているかというと、そこにあるただの文書をハイパーにするためにテキストに印をつけて意味付けをしているのです。

何のこっちゃわかんないですよね(笑)

では、次回からは実際に書いてみましょう。

ということで、続きは次回。なるべく毎日更新いたします。

最後に、検索をした時の行動を振り返ってみましょう。

先に「ホームページという言葉の意味を調べてください」と書きました。その時、どんな風に行動しましたか?
・検索サイトまでどのようにたどり着きましたか?
・検索窓にどんな言葉を入力しましたか?
・結果を見て、「これは使えそうだ」と思ったサイトはありましたか?
・その判断の根拠は何でしたか?
・この意味がきっと正しいだろうと判断した根拠は何でしたか?
・その情報はいつのものでしたか?
・他の記事も探してみようと思いましたか?その理由は何ですか?

…..と、矢継ぎ早に聞きましたが、その行動ひとつひとつ、判断ひとつひとつが、あなたが作るサイトを訪れてくれるユーザーの行動であり、判断です。そして、これは確かなことですが、あなたと同じ行動をする人もいますが、全く別の行動をとる人もいます。何か気がつくことがありましたか?あればそれはとても重要なことかもしれません。是非とも心に留めて、この先もお付き合いください。

[ssba]

投稿の「この投稿を先頭に固定表示」を使ってみた

スクリーンショット 2016-02-11 22.18.09

そういえばこんな機能あったな、と思って使ってみた。
特別設定が必要なわけじゃないのかなー、という感じです。

スクリーンショット 2016-02-11 22.25.23

上記は投稿一覧のページです。特に設定した覚えはないんですが、投稿の一覧のページでは先頭に表示されていました(右サイドのRecentが本来の投稿順の記事の並びです)。メインクエリだと特に何も設定しなくても使えるのかなあ、という感じです。
先頭に固定した記事が複数あるとどうなんかな。

ですが、フロントページで、get_posts()とかで記事を呼び出すときとかは、先頭に固定したからといってそれが反映されるわけではないです。

なんかもうちょっといい方法があるような気がしますが、とりあえず、最初に「先頭固定表示の記事のみ」を表示して、そのあとに「先頭に固定表示の記事以外」の記事を呼び出している、という感じにしました。

		<ul class="front-news-list">
<?php
$sticked_posts = get_posts( array( 'post__in' => get_option( 'sticky_posts' ), 'posts_per_page' => -1 , 'post_type'=> 'post') );
foreach ( $sticked_posts as $post ) : setup_postdata( $post ); ?>
		<li class="list-item sticked-item"><time class="date"><?php the_time('Y-m-d');?></time><a href="<?php the_permalink();?>"><?php the_title(); ?></a></li>
<?php endforeach; wp_reset_postdata();?>
<?php
$args = array( 'post__not_in' => get_option( 'sticky_posts' ), 'posts_per_page' => 5 , 'post_type'=> 'post') ;
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
		<li class="list-item"><time class="date"><?php the_time('Y-m-d');?></time><a href="<?php the_permalink();?>"><?php the_title(); ?></a></li>
<?php endforeach; wp_reset_postdata();?>
		</ul>

実際の表示は下記の感じです。

スクリーンショット 2016-02-11 22.37.33

参考になればと〜。

[ssba]