KITAMULABO

WEB開発

HP制作のノウハウやWEBアプリのアイデアなどをご紹介。

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

WordPress おすすめプラグイン

2021.2.8

WordPressはプラグインでどんどん機能を追加できる!その反面、入れれば入れるほど遅くなる、そのせめぎ合いです。今回のサイト更新に合わせて見直したプラグインをご紹介します。

サイト全体の管理系

Site Kit by Google

アクセス統計やらSEO対策とかできるGoogleの公式プラグイン。

SiteGuard WP Plugin

サーバーによる自動インストール時にはじめから入ってたセキュリティソフト。ログインやコメント時に画像認証をつけるのでスパムが激減。

WP File Manager

サーバー上のファイル操作をWordPressの管理画面から行うツール。テーマ開発には必須。

WP Multibyte Patch

マルチバイト言語である日本語を使用するのに必須のプラグイン。

Jetpack

Jetpack

WordPress.comが出してるいろんな便利機能のパック品。重いって言われてるけど、一部の機能だけでも導入の価値はあると思うし、とりあえず入れてみて、不満がある機能は他を探せばいいと思います。

僕が使用している機能は、ギャラリー表示の上書きとSNSの共有機能だけです。SNSは記事更新時に自動投稿してくれるものと、記事に写真を貼り付けるときにGoogleフォトから引っ張ってこれる機能が手間がなくていいかなと思っています。

逆に外して、違うプラグインに変えたものは以下の2つです

AddToAny Share Buttons

SNSへの共有リンクを貼ってくれます。

WP ULike

いいね!機能を追加します。

やはり単体のプラグインのほうが機能的にはいい場合が多いですね。あと出力系は、テーマ内の自由な位置に自分で記述できる点も重要。

表示操作系

Urvanov Syntax Highlighter

記事内にコードタグでphpとかHTMLとかきれいに見せたい時のもの。入れるだけで既存のコードタグを上書きしてくれる。

WP External Links

記事内のURLに自動でリンクを貼ってくれる便利なやつ。

その他

codoc

投げ銭機能を簡単に追加できるプラグイン。

プラグインを選ぶときのポイント

ということで大体以上のようなものを導入していますが、自分なりのポイントは、プラグインに依存しなくてもいいプラグインがいいプラグインだと思います。例えば記事内でショートコードを書いて呼び出すタイプだと、そのプラグインを外したときに変な文字列が残ります。また、その機能を使うときに別の画面を開かないといけない、とかではなく、できるだけ標準の機能を上書きしてくれるタイプが手間もかからなくて好きです。

皆さんもおすすめのものがあったらぜひ教えて下さい!

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

WordPressの標準ギャラリーをCSSでレスポンシブルな横スライダーに変更する

2021.2.5

WordPress標準のギャラリーは見た目パットしないですが、記事内から画像を追加できるのが非常に楽です。プラグインでギャラリー系を探しても、殆どの場合は管理画面で一度アルバムを作成してから記事にショートコードを埋め込むのでひと手間面倒。ということでプラグインを使わずにCSSだけでレスポンシブルなギャラリーを作ってみました。

実例

早速出来たものがこちら↑(画像は牧場です。意味はありません。)

ブラウザの幅によって表示の仕方が変わります。

PC等では4枚横1列で、スマホ等のモバイルでは1枚表示になって横スクロールになります。PCの方はぜひ、ブラウザの横幅を縮めてみてください。スマホの方も横にするとPC表示になるかも。

この動きCSSだけで上書きしています。

CSS

基本的には標準ギャラリーの書き出すクラスを調べて適宜!importantで上書きし、Flexboxでコントロールします。

@media screen and (max-width: 720px) {}でモバイル表示を指定。

個々の画像を .blocks-gallery-item{width:100vw!important;height:auto!important;}で画面幅いっぱいにし、大枠を.wp-block-gallery{overflow-x:auto;}でX方向のみスクロールバーが出るようにしています。

もともとはよくあるギャラリーのように進む、戻るの三角マークをポチポチ押すように考えていたのですが、今のブラウザってスマートスクロールが標準なんで、1回のフリップですい~っと進むこっちの方がタップが少なくて済むなとこのような形に落ち着きました。

なのでスマホでこのサイトを見る場合、ページのスクロールは縦方向に、ギャリーは横方向のフリップ操作となります。ちょっと気持ちよくないですか?

更に今回は思い切って、ページ全体のスクロールバーの表示をなくしています。PCの方はホイールボタン付きのマウスの使用、もしくはキーボードのカーソルキーを使用してください。

クリック時の動作

画像をクリックすると大きなスライド表示なりますが、こちらは素直にプラグインに頼っています。散々ためして結局落ち着いたのがJetpackの標準機能です。なかなか丁度いいんですよね。コメントをつけることも出来ますが、それはオプションでオフにしています。

まとめ

重いプラグインを導入しなくても、標準ギャラリー+CSSで個性的なギャラリーを作ることが出来ました。標準のパーツを活かすやり方は一番汎用性が高く、過去の記事にも反映しやすくておすすめです。

これで写真も見やすくなったので、しっかりカメラ撮っていこうと思います。

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

CSSだけで作るタブメニューとウィジェット

2021.2.4

スペース的に最初から表示はしたくないけど、必要に応じて見せたいときに便利なタブメニュー。こちらをCSSだけで実装し、更にウィジェットと組み合わせて自由度の高いメニューを作ってみる方法を解説します。

ちなみに探してみましたが、スマートに導入できる既存のプラグインは見つけられませんでした。面倒なのでjavascript系も入れたくないという方にもおすすめです。

CSSでタブメニュー

わかりやすいのはこちらのサイト。

https://web.monogusa-note.com/flexible-tabs-only-css

仕組みとしてはHTMLでinputタグのラジオボタンを使っています。ラジオボタンは選択肢の中から1個だけ選べるタイプのフォームツール。選択されると<input>タグの中にcheckedがつくので、それをCSSで拾って表示/非表示を切り替えるというもの。CSSは隣接セレクタを使用していることが中々秀逸。

一番外側のラップは<nav>タグでも<div>タグでもいいです。<input>タグは隠して<label>タグの隣接要素を表示するようにしています。CSSで最低限必要なのはこんな感じでしょうか。この場合はインプットとラベル、その中身が交互に来ていますが、<label>タグに{order:-1;}を指定することでラベルだけ先に表示します。後はマウスオーバー時の装飾だったり、必要なものを追加します。

こちらは別パターン。ラベルを先に並べて、その中身を後に並べています。こちらの場合はタブの中身に1つずつ固有のIDかクラスをふっておかないと指定しにくいですが、一応これでも対応可能。

ちなみにこの表示の切り替え、visibility:hidden;でも同じようなことが出来ますし、そちらの方がアニメーション(Transition)も付けることが出来ますが、多めの折りたたみでは余計な余白がページ下部にできてしまうようで、今回はdisplay:none;としています。

ウィジェット化する

タブメニューができたら中身をウィジェットにしたいなと欲が出てきました。

やってみたのは3パターン。

①テーマ内でウィジェットエリアの記述の前にインプットとラベルを並べる

これは最終的な出力が上のコードで言うと下のパターンになるやり方です。とりあえずならこれが一番手っ取り早いですが、ウィジェットを設置するたびに、ウィジェットのはき出すタグを見て、CSSのIDかクラスを変更しないといけないので柔軟性が低いです。

②functions.php内でウィジェットのタグの出し方を指定

functions.php内でウィジェットエリアを定義するregister_sidebar()ではウィジェットの前後にはき出すタグをしてすることが出来ます。ここで<input>と<label>をくっつけてもOKです。これだと配置したウィジェットを自動的に指定するので、管理が現実的になります。ただし、1タブに1ウィジェットしか配置出来ません。1タブに更に複数のウィジェットを配置したい場合は次のパターンになります。

③タブごとにウィジェットエリアを指定する

ウィジェットじゃなくてウィジェットエリアを設定します。これでもっと使いやすくなりました。只今サイトのトップではこのような形で実装しています。

まとめ

ということでCSSだけでウィジェットエリアをタブメニュー化することが出来ました。意外と何でも出来ちゃいますね。ぜひお試しを。

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

WordPressテーマで記事リストの出力をコントロールする

2021.2.3

WordPressではトップページやアーカイブページ等、記事リストの一覧を表示しますが、その表示の仕方をもっと柔軟に出力できるよう、色々試してみました。

よくある2つのパターン

配布されているテーマでもよく見かける一般的なやり方は次の2種類です。

どちらもメインループ内に記述するWordPressのテンプレート関数です。上のthe_excerpt()は抜粋を設定していればそれを表示、なければ本文を指定された文字数分だけカットして表示します。ただこれは本文中の文字情報だけを取得するので、画像とか他のタグも一覧内で表示させておきたいと言うときは使えません。

そんなときは下のthe_content()を使用します。こちらは単純に本文を表示させる関数ですが、本文中にmoreタグ(続きを読む)があればそこで切ってくれます。これなら文字情報だけに限らず任意の場所で切り出すことが可能です。ただしmoreタグを設定してない記事では全ての内容を表示してしまうことになります。今から新しいホームページを始めるならいいかもしれませんが、過去にさかのぼって全ての記事にmoreタグを入れ直すのは正直面倒くさいです。

PHPで条件分岐

ということで、どちらでも対応できない場合は自分で条件分けをするしかありません。改めて今回の更新でやりたかった動作をまとめてみます。

①moreタグがある場合はmoreタグでカットして表示
②短い記事は全文表
③長い記事は適当なところでカットして表示
④リストではなく単一ページの場合は全文表示

まずはメインループの中で本文全体を取得します。通常ならget_the_content()を使用するところですが、今回は$post->post_contentで呼び出したものをget_extended()に入れています。get_extended()はmoreタグの前後で本文をカットしてくれる関数で、moreタグ前を[‘main’]に後を[‘extended’]に入れられます。moreタグがなければ[‘extended’]は空になるので、$more_contentがあればmoreタグがあるよっていう条件分岐ができます。

次に本文が短いかどうかの判断はタグを除いた本文の文字数を数えます。

strip_tags()でタグを外し、mb_strlen()でマルチバイト換算で文字数をカウントします。短ければ切らずに出力します。しかしここで問題になるのが、この指定した文字数を超えた場合にどこで切るのかと言うことです。文字だけじゃないので単純に文字数で切ってしまうとレイアウトが崩壊します。色々悩んでこんな感じにしました。

多少長くなっていますが、ざっくりいうと2回めのpタグ、“<p”の位置を検索してそこで分けるという処理を行っています。

これでHTML的な構文が途切れずにきれいに本文を分けることが可能になりました。最終的に単一ページかどうかの判定も加えて出来たのが以下。

続きを読む~後半部分をアコーディオンにして、その場で展開

最後に、続きがある場合のみページリンクを出力、してもいいのですが、スマホで続けて読みやすいように、アコーディオンのようにその場で続きを展開できるようにしました。inputタグ+labelをCSSだけで非表示から表示に切り替えられます。CSSも合わせたこの動作については別記事で解説します。

まとめ

条件さえはっきり定義できれば、投稿リストもPHPで自由に出力することが出来ます。ぜひお試しを。

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

WordPressテーマの自作におけるCSSのコツ

2021.2.2

テーマの自作で半分はCSSの調整だったりします。WordPressにおけるCSSのコツや最近取り入れてみたトレンド等をご紹介します。

テーマに関する記述を明記

インストールしているテーマ一覧でオリジナルなのにちゃんと解説があるとなんかテンション上がります。これはstyle.cssの冒頭に上の記述をするだけ。画像はテーマフォルダに「screenshot」という名前の画像ファイルを上げておけば読み込んでくれます。拡張子はjpgでもphpでもいいみたいです。

横並びに詰めて記述

CSSの記述の仕方ですが、僕はこうやって詰めて横並びに記述することが多いです。邪道なのはわかってるんですが、こうすることでページ全体が少なくすむので全体をまとめるのが早いような気がします。

!importantが重要

CSSで同じセレクタの優先度は原則、後に書いてあるほうが優先です。しかし、プログラムでいろんなCSSが読み込まれているWordPressでは、強制的に上書きしたい場合、以下のように!importantを付けておきます。

こうすることで既存のタグなど、はじめからWordPressがスタイルを指定しているものに対してもオリジナルのデザインにすることができます。上の例では既存のギャラリーのマージンを0に変更しています。

モバイル対応の記述

スマホやタブレット等のモバイルに対応してスタイルを変更したい場合は、画面サイズの最大値によって切り替えます。下記ではmax-widthが720pxまでの画面では以下のスタイルでって記述です。

最近はスマホでの閲覧が半分以上になってきているのでモバイル対応は必須。逆にPCでの閲覧を少数派として、〇〇以上の画面サイズに対して以下のスタイルを適用としてもいいです。どっちのスタイルの記述が少ないかで判断します。またこの記述はCSSの最後の方に書いておくほうがトラブルが少ないです。

Flexboxが今どきで便利

上記のモバイル対応等、ウィンドウ幅によってレイアウトを柔軟に変更するレスポンシブルデザインがトレンドです。レスポンシブルデザインに対応しやすいスタイル、Flexboxを導入してみました。フロートデザインはもう古いみたいですね。Flexboxかなり便利です。使い方、解説は下記のサイトがわかりやすいです。

セレクタを使いこなせ

CSSのセレクタはidやclassだけじゃない。最初の子要素、何番目の子要素、兄弟等、色んなセレクタがあって柔軟な指定が可能です。下記のサイト勉強なります。

疑似要素がおもしろい

::before と::after 2種類の疑似要素ってのがあって、セレクタの前後に任意の文字列を追加できるっていうスタイルがあるんですが、さらにaタグ等に::afterを合わせるとtitleとかを引っ張り出すことができるっていう。以下参考。

まとめ

CSSは知れば知るほど自由度がまして、色んな事ができるようになります。1年ぐらい経つとまた新しいトレンドも出てくるので面白いです。ぜひご活用ください。

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

indexページ一枚から始めるWordPressテーマの自作

2021.2.1

自前のブログを用意しようと思うと、一番便利なのは2021年になってもWordPressっぽいです。他にもCMSは色々とあるようですが、プラグインの数、テーマの数、情報の数からかなり有利かと思われます。その中で面白いデザインをしたいと思うと、やはり市販のテーマでは限界があるというもの。このホームページも年一ペースで地道にオリジナルテーマを更新しています。できるだけ楽に始められるオリジナルテーマの制作をご紹介。

ポイントはできるだけシンプルに始めるということ。

最低限必要なスキル

HTMLの基本とCSSの基本+PHP構文の基本スキルが必要です。でも全てのタグを覚える必要はありません。基本的な記述とこれはHTMLなのかPHPなのかが判別できて、このタグなんだっけ?とかこんな機能あるかな?が調べられれば問題ありません。さらにWordPressはPHPで動いているので、そのIF分とかが書けるようになれば、ぐっと自由度が増します。

とりあえずindexページ1枚あれば良い

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

上の日本語Codexをみていただければわかるように、WordPressはトップページ、投稿ページ、固定ページ、カテゴリー一覧ページ等、いろいろなタイプのページをシステマチックに出力、それぞれのデザインを変えたり組み替えたりすることが可能ですが、最低限「index.php」があればページの表示ができます。それプラス、スタイルシート「style.css」を基本としてこのサイトも構築しました。

本当なら、ヘッダー・フッターは別ファイルに切り出して、アーカイブ一覧やカテゴリー表示で分けたりもできるのですが、1ファイルにまとまっておくと、複数ファイルを開く必要もなく一目できるので楽です。もちろんデザインはできるだけ同じような表示なるように考えておきますが、部分的な表示の切り替えは「index.php」内でPHPのIF文で対応します。あとは必要な機能に応じてfunction.phpとcomments.phpを追加する程度です。

うちのindex.phpはこんな感じです。<body>タグ内はページの構造によるので省略していますが、大枠はこれでOK。シンプルなHTML構文にところどころPHP構文が入っていますが、そこがWordPressで操作されるところです。WordPress独自の関数を使いながら必要な情報が表示されるように組み立てていきますが、どうしても必要な関数はそんなに多くないです。重要なポイントは下記2点。

<head>タグの最後に<?php wp_head(); ?>
<body>タグの最後に<?php wp_footer(); ?>
を記述することでWordPressが必要とするスタイルやスクリプトは自動で読み込まれるようになります。

また<body>タグ内に記述されている<?php body_class(); ?>は自動でページの種類をクラス名にしてくれます。これでCSSが指定しやすくなります。

メインループとなっているこの部分がWordPressの面白いところ。この中でトップページなのか、投稿リストの表示なのか、単一のページなのかを判別してうまいこと出力してくれます。

必要な条件分岐

phpのif文を使って条件分岐をすることができます。is_home()やis_archive()はページの種類を判別するWordPress関数です。以下リファレンス。

https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0

やろうと思えばかなり複雑な条件分岐ができますが、実際使うのはそんなに多くありません。is_home()はトップかどうか、is_archive()はアーカイブ一覧ページかどうかで、日付・カテゴリー・タグ一覧も一緒に指定できます。他にis_singular() ってのが投稿ページでも固定ページでも単一ページの表示なら引っ掛けるってので便利でした。

ウィジェットを使う

WordPressの便利な機能が、「ウィジェット」と呼ばれるパーツを配置できる点。オリジナルテーマでもちゃんと設定しておけば使用することができます。indexページ内に以下の記述をして「ウィジェット」を配置できる「ウィジェットエリア」を設定します。

「widget-area1」は任意のエリアネームです。functin.php内に以下の記述をしてウィジェットエリアを定義します。

register_sidebarを複数個記述すれば、複数のウィジェットエリアを定義できます。これでウィジェットを使った自由度の高いホームページのデザインが可能になりました。

まとめ

WordPressは機能も情報もおおいですが、思った以上にシンプルにテーマを自作することができます。せっかく自身のサイトを作ろうってのに、人と同じデザインジャヤだよって方。ぜひチャレンジしてみてはいかがでしょうか?

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

ノーコード開発サービス「glide」でスマホアプリ(っぽいもの)を1週間で作った

2020.12.9

プログラミングできない僕が、「glide」というノーコード開発サービスを利用して1週間でスマホアプリっぽいものを作成できたので、ツールと実例を紹介です。

きっかけ

私事ですが、仕事の関係で今年(2020年)1級建築士試験を受験しました。結果は見事惨敗。来年に向けてしっかり勉強しないといけないのですが、試験の最大の練習はやっぱり過去問。今年の受験から過去問の分析とか、Excelにまとめてやってました。これをもっと他の人にも役立つような形にできないかな?といろいろ調べていたところ、コーディングしないプログラミング「ノーコード」というワードをちょこちょこ聞くようになったので、これを使って簡単かつ素早くサービス化出来ないかなと考えました。

ノーコードとは?

最初そういう名前のサービスがあるのかと思ったら、そういうジャンルのWEBサービス全体のことだったようです。ノンプログラマーでもプログラミングを必要とせずにWEBサービスを開発することができるツールやサービスで、去年ぐらいからボチボチ出てきた新しいトレンドのようです。(僕は今年になって知りました。)プログラマーでなくても、「こんな感じのサービス」というアイデアを形にしたり、プログラマーでも最初のランディングに使用したりと、なかなか流行ってきているようです。

何をどうやって勉強する?

兎にも角にもまずはYoutubeで検索!動画で解説されてるのでわかりやすい。特にこの方の動画は丁寧で聞き取りやすいのでおすすめです。

上が「.bubble」というサービスの解説で下は「glide」というサービスの解説になります。こんな感じかと動画を見ながら同じようにやってみてもいいし、気になる箇所はGoogle検索ですすめてみました。

「.bubble」と「glide」の違い

今回2種類のサービスを試してみたので簡単にご紹介

一番有名で一番大きくて一番自由度の高いサービスのようです。とりあえずここから勉強してみようと思いましたが、なかなか機能が複雑で基本的な機能をさらうのに2週間ほどかかってしまい、そこから自分のサイトの仕様を考えるというのがちょっとだけ面倒になっていました。

.bubbleが時間かかるなと思ったので方針転換でglideというサービスもトライしてみました。こちらははじめからGoogleDriveのスプレッドシートをもとに作成するという簡単思考。出来るものはスマホアプリっぽいPWAサイト。もともとExcelベースで作りかけてたのものあって、そのデータからやってみるとあっという間に形になってしまいました。

普段からExcelを使用している人にはとっつきやすく、またスプレッドシートをインポートした時点でとりあえずのスマホ表示はできちゃってるので、あとはそれを修正していくという流れです。

無料で始められますが、データベースの行数がたくさんになると有料プランになります。

他に両者のノーコード系サービスの共通点を上げてみました。

成果物

そして、出来たサービスは以下になります。

https://dkgk.site/

結構ぽいものが出来ました。素人でいきなりこのクオリティの物ができるというのはすごいです。

内容は過去問のデータベースなんですが、一応他にない特徴としましては、問題文だけでなく、4つの選択肢にそれぞれ分解して並べ替えたりジャンル分けできたりするようにしています。他に問題文を音声データ化して聞きながら勉強が出来るようにしましたが、それはノーコードとは別の技術を使ってるので、別で解説します。

まとめ

ノーコードでのWEBサービス開発。やり方によってはかなりスピーディーにアイデアを形にすることが出来るのでおすすめです。一度作ってみると他にもやってみたいことがいろいろ浮かんでくるので、DIYのラインナップにWEBサービスを加えてみようと思います。

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

あたらしいホームページのデザイン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
:
:

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