kamenokoki.com

【43日目】トップページを見やすくしてみた

Posted:  Last Update:

「line-clamp」の使い方は「文末を「…」で終わらせる!「-webkit-line-clamp」の使い方」で詳しく紹介しています。

サイトを作成し始めて43日目になりました。昨日は、記事と日記のそれぞれのトップページにある過去投稿一覧部分をスマホ対応にすることに成功しました。今日は記事/日記ページの見栄えを整えようと思っていたのですが…

ロードマップ

ロードマップで進捗を見ると下記の通りです。

  • 準備 - サイトの全体像を決める
  • 使用するプログラミング言語を決めて環境を整える
  • サイトの基本構造を作って公開する
  • 収益化に最適なサイトにアップグレードする
    • コンテンツを充実させる(他の作業と同時進行)
    • サイトを見てもらえるようにサーチエンジンに登録する
    • sitemap.xmlとRSSを作成する
    • コンテンツに合わせてサイトを修正、スマホにも対応する ←今ここ
    • お問い合わせページを作る
    • 検索ボックスを作る
    • サイトマップページを作る
    • 個人情報に関するページを作る
    • SEOとセキュリティについて調べ、対応する
  • GoogleアドセンスとAmazonアソシエイトの申し込みをする
  • ローカルで簡単に入力ができるようにフォームを作る
  • フォローアップ - より収益化に向いたサイト構造に変更する

やっぱり最新情報に記事の詳細が欲しい

昨日の後半で、最新情報に記事の詳細を入れてみたのですが、バランスが悪いので中止したんですよね。その時の画像がこちら
2020.10.11 最新投稿に説明を入れたら画面が情報過多になった

一度は外してしまった「詳細」部分。あれからいろいろ考えて、やっぱり記事の詳細を入れたいな、と思うようになりました。昨日は、文章の長さが違うのせいでデザインの統一感が出ない、と思ってやめたのですが、デザインに統一感を持たせればいいだけの話。HTMLを駆使すれば、たぶんできます!他の人もやってるし!やってみよう!

記事の詳細を入れてみる

昨日の敗因は、詳細部分を文字数で呼び出していたことだと思います。詳細部分を「文字数」ではなく「指定エリアに収まる範囲」にしてしまえば、同じ大きさになるはず。なにか使えるものがあるか検索してみると、「overflow」という便利なスタイルシートを見つけました。エリアに収まりきらない内容の処理を決めてくれるらしい。overflowをhiddenにすると、エリアに収まらない部分は非表示になるんだって!さっそく使ってみましょう。

「overflow」はすぐにうまくいったのですが、末尾に「…」を入れる方法を検索していたら30分ほどかかってしまいました。末尾に「…」をいれるのは、「-webkit-line-clamp」を使うといいらしいです。…高さをどうするのかまだ迷っておりますが、とりあえず4行で表示してみまみした。上の画像とは大違い!
2020.10.12 最新投稿に詳細を入れてみた

情報過多かなぁ…?横並びのボックスは2つくらいにした方がいいんでしょうか…。また後日ゆっくり考えよう。

記事の詳細はスマホ表示にしたときは隠れる

PCでは情報がたくさん表示されますが、スマホページでは詳細は隠れるようにしておきました。画面幅が640px以下の時には詳細を表示させないように「display: none;」を指定しています。「overflow」や「-webkit-line-clamp」も使ったスタイルシートがこちら。

#latestcdescription{
margin: 0;
padding: 0 0.3em 0.3em 0.3em;
height: 5.5em;
overflow: hidden;
font-size: 0.9em;
color:grey;
align-self: end;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
@media screen and (max-width:640px){
#latestcdescription{
display: none;
}
}

画面は、…一昨日とおんなじなので、一昨日の画像をサンプルに貼っておきます。
2020.10.10 スマホ画面での最新情報の見え方を変えてみた

今日やりたいこと

昨日の最後で、計画を変えて「ブログ/記事ページの見栄えを整える」作業に入ろうかと言っていました。でも、やっぱりサイト全体のトップページのお手入れを先に進めたいと思います。サイトの顔、トップページ。大事ですよね。ランキングサイトから来てくれている方はここを見ることが多いと思うので、やっぱり先にきれいにしてしまいたい!

ちなみに、こちらがロードマップの「コンテンツに合わせてサイトを修正、スマホにも対応する」の中でやっていきたいことのリストです。

  1. ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する ←完了
  2. ブログと記事の、それぞれのトップページを作る ←完了
  3. サイトのトップページを作り直す ←今ここ
  4. ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする
  5. 日記の「何日目」を自動で入れられるようにする
  6. ファビコンを作る
  7. 記事に目次を入れる

トップページに新着3件を表示

今現在のサイトトップページでは、【亀の工期(開発記事)】と【亀の子記(開発日記)】それぞれに新着記事を表示しています。これはこれで置いておきたいのですが、両方の新着記事をまとめて紹介する部分を一番上に置きたいです。

ブログと記事は別々のフォルダに入れてあるのですが、RSSを作ったときに、二つのフォルダにまたがって情報を引っ張ってくるPHPを作ったので使いまわします!箱は先ほどまで作っていた「最新投稿」の箱を使います。20分ほどかけて、作業完了。ふぅっ。日記なのか記事なのか分からないので箱の中のタイトルの前に種別を引っ張ってきたり、画面下のそれぞれのカテゴリの見出しをh1からh2に下げたり、細かいお手入れも終えて、完成しました!

最新3件を引っ張ってくるHTML+PHP。変数とかが多すぎて何をしているのかよく分からない上に長いのですが、頑張ったのでコードを自慢しておこう!

<div id="latestparent">
<?php
$urlfolder1s = array("article","blog");
date_default_timezone_set('Asia/Tokyo');
$today = date("Ymd");
$oldest=20200830;
$i = 1;
do {
$date = new datetime($today);
foreach ($urlfolder1s as $urlfolder1){
$filefolder1=$urlfolder1."s";
$filename = "$mypath/$filefolder1/$today.txt";
if (file_exists($filename)) {
require($filename);
echo '
<a href=', "$myurl/$urlfolder1/$today", '> <div id="latestchild"> <div id="latestcimg"><img src="',$articletimg,'" alt="',$date->format('Y.m.d'),'記事のイメージ画像"></div> <div id="latestctitle">';
require("$mypath/$filefolder1/welcome.txt");
echo '
<h4>'.$wtitle.'</h4>';
require($filename);
echo '
<b> ',$articletitle, '</b> </div> <div id="latestcdescription">',$articledescription, '</div> <div id="indexlinktime">', $date->format('Y.m.d') ,'</div> </div> </a>';
$i = $i+1;
if ($i>=3){break;}
}
}
$date->sub(new DateInterval('P0Y0M1D'));
$today = $date->format('Ymd');
} while ($i < 4);
?>
</div>

ここまでの成果です。
2020.10.12 サイトトップページに最新記事3件を引っ張って来た

いとしの亀

さて、今は仮に入れているタイトル「kamenokoki.com」をもう少しおしゃれにしていきます!亀が欲しいんです!ヘッダのアイコン以外に全く役に立っていない亀!ブログの顔なのに全く訳に立っていない亀!ここで活躍してもらいたい!

亀さんを入れてみました。サイトの説明文も入れました。スクショには映っていない、下の方の画面も配置などを微調整しました。なかなかいいのではないでしょうか?
2020.10.12 サイトトップページ完成!

記事の話など

上のスクショに写り込んでいますが、しばらくさぼっていた「コンテンツの充実」を再開しました。まずは1記事「PHP自作サイトに必須のローカル環境とは」を書いたので、ご興味があったらぜひ読んでみてください。少しずつ日本語が自然になって来た気がします(笑)。過去の記事も書き換えないと…。

日記だけだと面白くないので、記事を増やしていきたいのですが、サイトの構築に悪戦苦闘し過ぎているせいでなかなか時間が取れません。悪戦苦闘した分、書きたいことは溜まってるんだけど…。

今更だけどサイトのタイトルを変える

サイトを公開してからしばらく経ってしまっているのですが、サイトのヘッダ部分にあるタイトルが「kamenokoki」になっているのがずっと気になっています。本当は「kamenokoki.com」が良かったのに、「長過ぎるかなぁ」となんとなく削ってしまったんですよね(なんとなく、ってなんなんだ!過去の自分に説教をしたい…)。せっかくトップページのお手入れをしたので、ついでにタイトルも変えてしまえ!

ヘッダ部分のタイトルと、フッタにあるコピーライトを「kamenokoki」から「kamenokoki.com」に変えました。

今日はここまで

今日の作業はここまでにしたいと思います。のろのろですが、前には進んでいる(と思う)。明日は、ブログ/記事ページの見栄えを整える作業に入りたいと思います!

  1. ファイルの構成を修正し、関連するPHPの呼び出しなどを変更する ←完了
  2. ブログと記事の、それぞれのトップページを作る ←完了
  3. サイトのトップページを作り直す ←完了
  4. ブログ/記事ページの見栄えを整えつつ、記事画面もスマホ対応にする ←明日やる
  5. 日記の「何日目」を自動で入れられるようにする
  6. ファビコンを作る
  7. 記事に目次を入れる
記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告