サイトのデザインを一部変更しました。

Wordpress
Image by krzysztof-m from Pixabay

最近(1~2か月程にかけて)、サイトのデザインを複数箇所、変更しました。

この記事は、ブログの”ログ”がコンピューターの操作記録 *を意味することに立ち返って、このサイト(ブログ)の過去のデザインの主要な変更を記録することを目的としています。

また、この記事のコメント欄などを通して、ご訪問者の方(今、この記事を読まれている方)から、サイトのデザイン変更に対するご意見を頂くことも目的と考えています。

注釈

以下において、モバイルは、操作をタッチパネル主体で行う端末を指し、PCはマウスとキーボード主体での操作を行う端末を指します。

引用元URL(外部ページ)*https://dictionary.goo.ne.jp/word/%E3%83%AD%E3%82%B0/#jn-236384

記事の内容、および以下で紹介したサイトのデザインは予告なく変更する場合があります。

スポンサーリンク

モバイル・PC共通の変更

以下は、モバイルでもPCでも確認できると想定している変更点です。

投稿日アイコンの変更

トップページや、記事のページのSNSシェアボタン(上)の下に表示されている投稿日アイコンを変更しました。(7/31)

変更前
変更後

SNSシェア・フォローボタンのデザイン

SNSシェア・フォローボタンを本文上・下、どちらもボタンの上下に線が入ったデザインに変更しました。

本文上のボタンは黒の上下線、本文下のボタンは各サービスのイメージカラーの上下線となっています。

変更前は、本文上のボタンが黒背景に白文字、本文下のボタンが白背景に文字色が各サービスのイメージカラーで細い四角形で囲まれたデザインとなっていました。

トップへ戻るボタンの挙動

トップへ戻るボタン(ページを下へスクロールした際に右下に表示される)がフッターの著作権表示の文と重なった際、裏に隠れるように設定しました。

変更前は、トップへ戻るボタンが著作権表示の文と重なった際、ボタンが文の上に重なっている状態でした。

これは、トップへ戻るボタンによって、フッターの著作権表示が隠れることを防ぐことを目的とした変更です。

カテゴリーラベルの色

一番左のラベルがカテゴリラベルです。

本文下のカテゴリーラベルの色を変更しました。変更前は色が黒となっていました。

コメント欄の見出しの装飾

シェア・フォローボタン下の”あわせてご覧ください”欄の下にある、コメント欄の見出し”コメント”に下線を表示するように設定しました。

変更前は、下線は表示されていませんでした。

これは、”あわせてご覧ください”欄の見出しの下線とデザインを一致させることを目的とした変更です。

リンクのアニメーション

記事のシェア・フォローボタン下の”あわせてご覧ください”欄内のリンクの下にある、次の記事、前の記事へのリンクをクリック・ホバーした際に、リンク部分の背景色が変化し、影がつくように設定しました。

また、矢印の色が変化し、矢印の向きに向かって、わずかに動くように設定しました。

変更前は、リンクはホバー時の背景色のアニメーションのみ設定されていました。

アイコンボックスのアイコン変更

左の列が変更前のアイコンで、右の列が変更後のアイコンです。

左に”?”や”!”などのアイコンが配置されている、アイコンボックスのアイコンが一部、変更されました。

PC向けの変更

以下は、PC向けに行った変更点です。

ヘッダーサブメニューのアニメーション

ヘッダーメニューにおいて、サブメニュー表示の際、縦に広がる形でメニューが展開されるアニメーションを設定しました。

変更前はアニメーションを設定していませんでした。

“あわせてご覧ください”欄のアニメーション

本文下の”あわせてご覧ください”欄に表示されている記事へのリンクをホバーした際のアニメーションを変更しました。

変更後は、リンクをホバーした際にリンクの部分が画面の縦の長さに対して2%下降するアニメーションに設定しました。

変更前は、リンクの部分が僅かに大きくなるアニメーションでした。

サイドバー内での目次の表示

“ゲーム”と”FreeCAD”、”レビュー”のカテゴリーに属する記事、および本記事において、サイドバーの末尾に目次が表示されるように設定しました。

この目次はページを下にスクロールしても追いかけてきます。

この機能は長い文章の記事を読んでいる際、少し前の見出しの箇所を見返したい場面を想定して設定しました。

カテゴリー・タブラベルのアニメーション

本文下のカテゴリー・タブラベルをホバーした際に、色が変化するように設定を変更しました。

変更前は、カテゴリーラベルはホバー時に色の変化がなく、タブラベルは薄い青に変化するアニメーションでした。

モバイル向けの変更

モバイル向けの変更では、サイト内のリンクをタッチした際の反応(アニメーション)や小さいスクリーンでの見やすさ、操作のしやすさを考慮しました。

ヘッダーメニューのアニメーション

モバイルのヘッダーメニューでも、PCと同じようにカテゴリーのリンクを操作時にアニメーションが表示されるようになりました。

この変更でPCと異なる点はホバー時ではなく、クリック時にアニメーションが表示される点です。

変更前はアニメーションは表示されていませんでした。

フッターメニューのリンク

変更後のフッターメニュー
変更前のフッターメニュー

リンクを押し間違えにくくするため、フッターメニューのリンク同士の間隔を広げ、リンクに下線を表示させるように設定しました。

リンクのアニメーション

トップページの各記事へのリンク、記事のシェア・フォローボタン下の“あわせてご覧ください”欄内のリンク、その下にある次の記事、前の記事へのリンクをクリックした際に、リンク部分の背景色が変化し、影がつくように設定しました。

また、矢印の色が変化し、矢印の向きに向かって、少し動くように設定しました。

変更前は、リンクのクリック時のアニメーションは設定していませんでした。

モバイルヘッダーメニュー(280px以下)

横幅280px以下の端末でのモバイルヘッダーメニューの表示
横幅281px以上の端末でのモバイルヘッダーメニューの表示

ディスプレイの横幅が280px以下の端末で閲覧した場合に、モバイルヘッダーメニューの左右のアイコンのキャプション(メニュー、検索など)が表示されなくなるように設定しました。

変更前は、280px以下の端末でもキャプションが表示されていましたが、改行が発生していました。

主な変更点は以上となります。最後までお読みくださり、ありがとうございました。

コメント

タイトルとURLをコピーしました