KITAMULABO

ホームページ

"3件"の投稿があります

あたらしいホームページのデザイン2020

2020.1.21

しばらく更新が滞ってしまうと何故かサイトデザインからいじりたくなってしまします。サイトのでデザインが良いと、情報が伝わりやすいというのもそうですが、何より自分が更新しやすくなり、記事が増えればまた人に見てもらえるという好循環になるのでは、という仮説のもと、前々から気になってたところとやってみたいデザインを盛り込んでみました。そのポイントを解説。

スマホの表示に完全対応(のハズ)

現在、ホームページが閲覧されるのって、画面が大きいデスクトップPCではなく、スマホでどこかのスキマ時間でってのが多いですよね。僕自身は仕事中は会社のパソコンに向かってるし、家でなにかするにもPCを立ち上げてるんで大画面で見ることが多く、また結構前からHTMLはいじっていたのでこの変化にピンときていませんでした。

スマホだと1カラム

CSSをコーディングするにあたり、前回の変更の際はスマホのような“横幅の解像度が狭い場合にこういうレイアウト”という記述をしていましたが、今回は“横幅の解像度が広い場合に2カラムに変更”としています。確かにこっちの方が記述がシンプルで済むのですが、なんかもう逆転というか時代ですね。パソコンのブラウザでもウィンドウ表示にして横幅を縮めると、レイアウトが変わるのを確認できると思います。

PCでは2カラム

Twitterを統合

このサイトはWordPressで構築していますが、今回サイドバーにTwitterのタイムラインを表示するウィジェットを追加しました。自己紹介とか、更新情報とか、イベント案内とかはこっちで一本化します。よく、記事を投稿するとSNSに自動で案内を乗っけるっという連携がありますが、そうではなく、直接埋め込まれてる感じです。ちなみにFACEBOOKもやってますが、FACEBOOKは登録している人じゃないと中身が見られないので、使い勝手が良くないです。

便利なはずが友達いないのがバレてしまう

トップページにギャラリーを設置

トップページ「Woks」というギャラリーを設置しています。自分がまず最初に見てほしいものを置くという趣旨ですね。ページへの案内もあってわかりやすいかと思います。技術的な話になると、WordPressのプラグインやウィジェットを探していましたが、なかなか丁度いいのが見つからず、固定ページを表示させています。ギャラリーはWordPress標準仕様のもので、表示だけLightboxのプラグインをかませています。多少が機能が足らないというところもありますが、見ている端末に合わせてレイアウトを自動調整してくれるすぐれものです。

投稿の一覧テーブルを調整

あまり他のサイトで見ないんですが、投稿リストをテーブルで表示しています。WordPressのプラグインで動的なテーブルを組んでくれるものがあるのでそちらを利用。今回は余計な欄を非表示にした上で、カテゴリー、タグでの絞り込みがしやすいように再設定しています。

その他

記事ページのコメント欄は、パソコンでの表示の際に右横に表示されるようにしました。かつ、スクロールするとついてきます。これCSSだけで結構簡単にできてしますんですね。面白い。

スパムコメントがやたらめったら多くきてたので、アンチスパムのプラグインを導入して撃退。そしたらホントのコメントも頂いてたようで、完全に埋もれてしまっていました。お返事遅くなってすみません。

最後に

今回の更新はこんな感じです。徐々に良くなっているような気がしますので、これからは記事の内容と数を充実させていこうと思います。

表示上の不具合等ありましたらできるだけ修正しますので、閲覧環境と共にコメントでお知らせいただくと助かります。

この記事がよかったら
:
:

新しいホームページのデザイン

2019.9.14

先日、ホームページをリニュアールしたので、新しくなったところを解説!

動的テーブルによる投稿一覧

[ninja_tables id=”1403″ ]

まずはメインの変更。トップページやアーカイブページは共通してこちらの動的テーブルで記事の一覧を制御しています。まとまった記事だけでなく、タイトルだけのつぶやきや未来のイベント情報も一括で管理。シームレスな情報管理を目指します。

表示されると日付順に並んでいますが、各行で並べ替えが可能。また、カテゴリーとタグはドロップダウンリストによる絞り込みができ、検索窓からは任意の行を任意のキーワードで検索できます。

更にコメント数といいね!ボタンも同時表示することでその場でワンクリックでアクションすることも可能です。

読みやすい文章

フォントを変更しました。しかもWindowsやMac、スマホやタブレットでも表示が変わらないWEBフォント(Google Fonts)です。英数字は「Questrial」日本語は「Noto Sans JP」をそれぞれ指定しています。

更に文字のサイズと行間を最適化。かっこいいと読みやすいの間を目指しています。

おしゃれな画像表示

添付画像で大きく拡大して見て頂きたいものは、別ウィンドウでなくポップアップで拡大するようにしました。

コミュニケーションの活性化

+2

各記事の最後にいいね!ボタンを追加しました。コメントは面倒でも記事を読んでいただいたらワンクリックしていただくと嬉しいです。

コメント記入欄の表示を簡素にし、よりコメントしやすい仕様にしました。感想、ご意見等書き込みいただけるとありがたいです。

その他

ファビコンを設定しました。タブとかアイコン出てくるこの画像です。窓が「K」になっています。

更新もしやすくなったので、どんどん投稿数を増やしていきたいと思います。これからもよろしくお願いします!

この記事がよかったら
+2
:
:

簡単に自分でホームページを作る方法

2019.3.10

SNSがこれだけ普及している中でも、しっかりとした情報発信をするにはやはり専用サイトが必要です。ここではあまりお金も時間も掛けられないけど、お手軽に自身のサイトを構築したい方向けに(独立したての個人設計事務所とか)、このサイトを例にとって解説していきます。

必要な作業は主に3つのSTEPなります。(費用が掛かるポイント)

1.サーバーを契約する(レンタルする)
2.ドメインを取得する
3.WordPressをインストールしてテーマを決める(購入する)

サーバーは実際にホームページの記事や画像を保管する場所で、そこに皆が見に来るようになります。建築で言うと敷地です。
ドメインはWEB上のアドレスになります。建築で言うと住所です。
WordPressは専門的な知識が無くても簡単にホームページを構築・管理・運営出来るシステムで、サーバー上で動くプログラムになります。建築で言うとテナントビルです。テーマはWordPress上のデザインでテナントの内装にあたります。

1.レンタルサーバーを契約する

まずサーバーという場所がないと見てもらえません。インターネットってそういう仕組みです。
サーバー自体はネットワーク性能に特化した、高性能なパソコンです。それを24時間年中無休で動かさないといけないので専門業者からレンタルします。レンタルサーバーといってもクリクラ(これはウォーターサーバー)みたいにマシンを借りて家に置いておくわけではないです。ネットからアクセスして必要な容量分を間借りするイメージです。また、よっぽど大掛かりなサイトでない限りは、1台のサーバーマシンをいくつかのホームページで共有して使用するやり方になります。

レンタルサーバー」と検索するといろいろな会社のホームページが出てきます。比較検討するポイントは信頼性容量、そして機能です。まずは信頼性。稼働率が高く(めったに止まらない)、速度が安定していて、サポートがいいところがいいです。これは口コミなどを参考にします。容量はディスク容量がどれだけ使えるかになります。同じ会社ならこのディスク容量によってプランが何種類かありお値段が変わってきます。機能は自分が使いたいソフト、プログラムが動作するかというところ。とりあえず「WordPress」が使えます、と書いてあれば問題はないです。自動インストール機能があれば尚好し。他はサーバーのハードウェアの仕様(CPUやメモリ容量とか)が明確に提示されているものが自分としては信頼性があります。

ということで今回このサイトで選んだのは「Xserver」です。

業界ではそこそこ長くやってる業者で信頼性の評価も高いです。僕も何度か利用しています。最近はストレージがSSDで高速環境を構築しているそうです。
もちろんWordPressにも対応していますし、自動インストール機能もついています。他に無料でSSLがついてくるのものメリットです。(ざっくり言うとサーバーとのデータのやり取りを暗号化してセキュリティ性を高める技術です。最近のブラウザではこの通信を行わないホームページに、安全でないサイトの表示がつくようになりました。)

その中で僕が選んだプランは「X10
 ディスク容量:200GB
 初期費用:¥3,000+tax
 月額費用:¥900+tax

一番安いプランになりますが、Xserverはディスク容量以外の機能はほとんど同じなので、とりあえず始めるなら必要十分な感じです。(マルチドメインやサブドメイン、メールアカウントも無制限に作成できます。SSLも無料で設定できます。)

まずはこれで場所を用意することができました。
次にホームページにアクセスするためのアドレスを設定します。

2.ドメインを取得する

ドメインとはホームページにアクセスするためのアドレスです。
~.jpとか~.comとか、メールの@マーク以降も同じです。これが短くてわかりやすいほどアクセスしやすい、集客率の高いホームページと言えます。一応サーバーをレンタルするときに初めからついてくるドメインがありますが、長ったらしくてわかりにくいものなので、ドメインだけ別に取得することをお勧めします。

ドメインは早いもの勝ち。個人だろうが企業だろうが政府だろうが、開いてる文字列を先に申し込んだ人が使用できます。費用は販売サイトによって違うのがですが、「.com」なら年間1000円から2000円「.jp」なら年間3000円ぐらいになります。この最後の部分も最近やたら増えてきてて、色んなドメインが選べるのが実情です。例:建設業向け「.construction」建築設計事務所向け「.archi」専門家向け「.pro」などなど 「.site」「.xyz」とかは数百円で買えるところもあります。珍しいタイプで個性を出すか、一般的なもので分かりやすさをを売りにするか悩めるところです。

ではどこで購入すればいいのかですが、実はレンタルサーバー会社がついでにやってたりすることもあり、その場合はそれぞれ別会社で契約するよりお得です。先のXserverではサーバー契約の際は上記の年間費用がずっと無料で使えます。ただし、選べるドメインの種類が少ないです。自分が思いつく文字列がすぐにでも空いているようだったら一緒の場合の方が設定も楽です。

もうちょっとマイナーなドメインも併せて検索したい、複数ドメインを管理したいとなると、専用の会社がいいでしょう。とりあえず扱ってる種類が多くて検索でも上位の方に出てくるのが「お名前.com」です。管理画面の扱いや案内メールの多さはあまりオススメ出来ませんが、ドメインの種類の多さは一番です。

僕はすでにこの会社で何個かドメインを取得しているのですが、今回は「バックオーダー」という形で取得しました。これは一応今の段階では誰かがその文字列のドメインをとっているんだけど、そろそろ期限も近いのに更新手続きがされてないドメインに対して、先に予約をしておけば優先的に取引ができるというものです。バックオーダーが複数だった場合オークションになります。今回は僕の他にもう一人申し込みがあったので、緊張してオークションに臨んだところ、相手が全く競ってこなかったのであっけなく取得できた感じです。
取れたドメインは 「ktmr.jp」北村のローマ字読みの子音だけの短縮です。
kitamura.jp」はカメラのキタムラさんになるんですが、長いので僕の方が使いやすいですw
ちなみに下の名前は圭なので、メルアドは「k@ktmr.conohawing.com」。もはや美しさすら覚えるシンプルさです。家族メールとしても使える一生ものです。

こんな取引ができるのも専門業者の強みです。ちなみに お名前.comでもレンタルサーバーをやってたりしますが、あんまり評判は良くない模様。値段は常識的だと思うんですが、サーバーのマシンスペックがすんなり出てこないのが僕としては信頼性低いです。やっぱり餅は餅屋。サーバーはサーバー屋。ドメインはドメイン屋です。

ドメインは安易にとらずに悩んで決めた方がいいと思います。別に空いていれば何個抑えてもいいのですが、それだけ費用が掛かりますし、いったんサイトを開いたら変更する作業は大したことはなくても周知・宣伝が面倒です。 僕もいい文字列を思いつくだけで1か月ぐらいかかってます。今回はバックオーダーだったので時間も手間もちょっとかかってしまいましたが、通常は文字列が空いていれば取得そのものは一瞬です。しっかり悩みましょう。

取得できればサーバー側でそのドメインを利用できるように設定します。

[blogcard url=”https://mw-s.jp/onamae-com-xserver/”]

こういうサイトを参考にします。
完了したら実際にホームページを作成していきましょう。

3.WordPressをインストールしてテーマを決める

「WordPress」はブログベースのCMS(コントロール・マネージメント・システム)です。ホームページは基本的にはHTML言語というフォーマットで書かれており、本来はそれを勉強する必要があるのですが、そもそも勉強するのも面倒ですし、それだけ勉強してもクオリティの高いホームページは作れません。そういった専門的な作業をプログラムにして、効率的に管理・運営出来るのがCMSです。基本的にインターネットさえつながっていればどのPCでもブラウザ上から更新・作成できます。もちろん、色んなタイプのCMSがありますが、完成度・更新度・情報量の多さから現時点(2019年初頭)では圧倒的に「WordPress」がおすすめです。最初に「ブログベースの」と書きましたが、豊富なテーマ・プラグインにより様々なタイプのサイトを構築できます。逆にどのテーマを選ぶかでサイトの構成が決まってしまいますのでよく考えて選びましょう。

まずは「WordPress」本体をインストール。

[blogcard url=”https://ja.wordpress.org/”]

本当は公式サイトからファイルをダウンロードしてサーバーにアップロードしてインストールしないといけないんですが、いちいち面倒です。上記のXserverなら自動インストール機能がついているためブラウザ上だけで簡単に設定が完了します。

[blogcard url=”http://wp-fun.com/xserver-install/”]

ドメインもXsereverでいい場合はここだけ見ておけば細かい手順は網羅されていますので、ご参考に。

次にテーマを選びます。無料で選べるものも多数ありますが、機能やデザインがいまいちのものばかり。もちろんテーマは自分でいじることもできるのですが、そこそこ面倒なのである程度完成度の高い有料テーマを購入されるのをお勧めします。

[blogcard url=”https://design-plus1.com/tcd-w/”]

とりあえず完成度と機能だけで言うならここ↑「TCD」この中から選んで問題無いように思います。お値段は一つ1万~2万円程度。ただ、ちょっとだけ機能が多い、もうちょっとシンプルにしたいと思って、このサイトではこちらを選びました。

[blogcard url=”https://minimalwp.com/”]

ここ↑のこの↓テーマ

[blogcard url=”https://minimalwp.com/17813/”]

テーマのインストールもWordpress上で行えるので簡単です。
そして自分のサイトに合わせてタイトルや表示方法を設定すれば、すぐにホームページとしての形は整います。(やり方、設定の自由度はテーマによって異なります。)
あとはひたすら記事を書くだけです!

まとめ

意外と簡単?難しそう?
とりあえずの流れをまとめただけなので、WordPress自体の操作方法とか全然記載してないんですけどね。パソコン自体に全く抵抗のない人は、これだけでも後はネットで調べながらでもできると思います。よくわかんないけど、挑戦するぞ!って人は厚めの参考書か逆引き辞典を買っておくのもいいかもしれません。

15年ぐらい前に初めてホームページってのを作ってから、そのころと比べると格段に完成度の高いサイトを簡単に作りやすくなっています。ぜひご検討あれ!

実際に会える範囲の方であればご協力できるかもしれません。メールにてご連絡ください。

この記事がよかったら
+1
:
:

このページのトップへ戻る