コンテンツへスキップ

個人サイトの作成に必要最低限の要素って
一昔前までは以下のようなモノだった

  • タイトル
  • キャッチコピー
  • トップ画像
  • ロゴ画像
  • プロフィールページ
  • メニュー別コンテンツページ

そもそもサイトを作成するのは
メニュー別コンテンツページを作るのが目的なので
他の要素はそれに付随する情報でしかナイ

でもSNS全盛時代になってみれば
肝心のコンテンツが無くても
個人のSNSのまとめページのような作りで
成り立つようになった気がするるる~

まあかく言う自分もそうしてる一人だがねw

いや、自分のサイトの場合は
特異的なコンテンツのサイトがメインで
ググってヒットしたから見に来てるって人が多く
SNSで身内中心に宣伝したトコロで
一般的に誰もが読みたいような記事でもなく
個人サイトのトップページには
一応、Twitter(アメブロ更新情報)を表示してるが
SNSでのリアルな繋がりは
むしろ自分の趣味の世界とはかけ離れてるので
Facebookやmixiはリンクしておらず

とにかく個人ブログが一般的になる前は
個人サイトはコンテンツありきで
1ページづつコツコツ制作してって
ある程度の読み応えのあるページ数になってから
やっと公開して
以降、せっせとコンテンツを更新するのみだった

でも今はコンテンツ中心のブログもあるが
個人の日記的ブログになってるので
もれなく特異的な単語が含まれてナイ記事には
ググってヒットするワケもなく
そうなると宣伝のためのSNSは必須だし
Instagramなんかは
それ自体がメインコンテンツだったりもして
リンクを張るのは当然ながら
ウィジェットで表示しておくなんてのが
親切な見せ方かもしれぬ

手前味噌ばかりでなんだが
自分の場合は登録だけしてても
Instagram、Pinterest、Tumbler、etc.etc.は
もう更新予定が無いので
これらもリンクからは外してて
Twitterのウィジェットだけを表示してるので
結局、SNSのロゴマークを
1つもサイト内に表示してなかった
(今時、ありえん仕様だなw)

これがクリエイターサイトともなれば
コンテンツありきでも売買が絡む場合には
個人のSNSなんかも必須になるのは
SNSで人となりがわかれば
購買意欲にも繋がるからだろうし
単に信頼おけるかどうかの目安になるので
わかり易く表示する必要はあるだろうと
ちゃんと対応を考えてはいた

SNSを提供してる各社には
ブランドリソースなるページが必ずあって
ロゴ画像ファイルが入ってる圧縮フォルダ(zip)を
ダウンロードして使用するコトができるので
ブランドリソースのページがどこにあるか
予め探しておいたのだ

Facebook
https://ja.facebookbrand.com/assets/%E3%80%8Cf%E3%80%8D%E3%83%AD%E3%82%B4/?audience=landing

Instagram
https://en.instagram-brand.com/assets/icons

Twitter
https://about.twitter.com/ja/company/brand-resources.html

これらをダウンロードして
改変せず使用するのを各社が推奨してるのは
ブランドイメージがあるので
それを勝手に変えて使われてしまうコトで
イメージが損なわれるのを防ぎたいからだろう

色番号とか余白にまで細やかに規定があって
それを順守して使わせてもらうのだが
だからWordPressのプラグインで使われてるロゴも
そうした正規の画像だと思われ

実際、WordPressのプラグインで
簡単にウィジェットで設置できたので
それですっかり満足して
自信満々で依頼者に作業完了を告げると
意外な返事・・・!

「色はグレーにしてください」とな?!

さすがクリエイターさんは発想が自由なのだ^^;

ブランドロゴには規定があるるる~
との説明はしたものの
作品以外をモノトーンでまとめたいって
サイトのコンセプトがあって
ぶっちゃけ、SNSを提供してる各社のブランドイメージより
自身のサイトの全体イメージの方が大切
というコトなのだろうな^^

自分には微塵も無い発想だったので
感心しながらロゴ画像を内緒で加工してみた
(って、ブログに書いたら内緒でなくなったがw)

これをサーバにアップして
カスタムHTMLウィジェットから呼び出すと・・・

こんな風に表示された

OKが出たのでこれで行こうォゥ( -∀-)/

hetemlサーバでは
独自ドメインに無料SSLを設定できるも
コンパネから操作したトコロで
すぐには反映されぬp(-_-+)q

切り替わるのを待ってる間に
WordPressをインストールしたが
し終わってもまだ切り替わらずにいて
不安になって確認してみたら
「SSL設定中」の表示は消えてるし
入れたはずのチェックも付いてなくて
変だと思ったら痛恨のミス!

ムームードメインの設定を間違えてた!!

ドメイン luka.website は
メインで使うからもちろんなれど
サブドメインの www.luka.website も
使わなかったとしても
hetemlに差し向けておかねばならなかったのだ

こういう顧客のニーズを無視した
融通の利かナイ独自設定を無理強いするコトで
コストダウンが実現してるのだろうから
逆らうつもりもなかったけどね

だがしかし・・・
そうと知らずにマニュアルとは違う設定してしまって
でも別に設定自体が間違ってるワケではなくて
その設定が無視されると知らなかっただけってのが
なんか腑に落ちなかったりするるる~

まあタダより高いモノは無いってね
最も貴重な時間を無駄にしたわ

そこに気付いてから
再度、「独自ドメインに無料SSLを設定」に
チェックを入れて待ってると
今度はSSLがちゃんと設定されたヽ(´▽`)/

WordPressのメニューから[設定]⇒[一般]で
WordPress アドレス (URL)とサイトアドレス (URL)を
以下のように変更

http://luka.website/ ⇒ https://luka.website/

サイトがSSLで表示できるようになったので
テーマ(デザイン&レイアウト)を
要望に近い雰囲気を探してインストール

Simple White lite

簡素な見た目が要望だったので
デザインが殆ど施されてなかったのをチョイス

なるほどシンプル・ホワイトだけあって
コンテンツが無ければ
真っ白で何が何だかわからん画面w

なので、サンプル画像を作成して入れてみたが
コンテンツが揃えば
ちゃちゃっと出来上がりそう^^

縁あって
お友達のサイトを
作らせてもらうコトになったので
このブログに手順を残しておこうと思う

サイトを作るのに必要な時間は
規模にもよるけど
WordPressを使えば
その日の内に公開も可能だろう

必要なモノはネット接続可能なPCで
まずはWEB上から必要な契約をするるる~

必要な契約は2つで
ドメインサーバだが
これがセットになってる場合もあって
値段はピンキリだ

ちなみに
サーバがネット上の住まいとすると
ドメインはネット上の住所

ドメインは自分の場合
asena.siteってのをメインで使ってて
これはムームードメインで取得したが
費用は年間で¥100もせずw

ムームードメインで探せば
¥100未満/年のだってあるから
きっとお得なドメインが見つかるだろう

サーバは自分の場合
実は今は過渡期で3つも契約してて
中でも年間で¥1200と破格の安さだったサーバは
これでWordPressも使えたのだが
今はもう新規契約しておらず

もう一つはlolipop(ロリポップ)でもう10年以上使ってるけど
月額¥250でWordPress使用可だ

そして最近契約したばかりのheteml(ヘテムル)
月額¥800で当然、WordPress使用可

lolipopもhetemlも
マルチドメインと言って
1つのサーバを複数ドメインで使えるのだが
その設定をするのにも
ムームードメインだと簡単なのだ

ドメインとサーバが契約できたら
まずはサーバ(今回はheteml)の設定だ!

1.FTPアカウントの設定

サーバとPC間のファイルのやり取りに
FTPを使うのでこのアカウントを
コンパネから設定する

設定したら通常はFTPソフトに
FTPサーバ名、FTPアカウント名&パスワードを入力して
FTP接続ができるようにするのだが
WordPressでサイト作成する場合には
初期設定くらいでしかFTPを使わナイので
hetemlのコンパネからのFTP接続で十分かと思われ

その場合、サーバ名は自動で接続してくれるので
アカウント名とパスワードだけメモしとく

2.FTPからサーバ領域を作成

hetemlのコンパネからFTPを開く

webフォルダを開く

lukaフォルダを新規作成

3.lukaフォルダにドメインluka.websiteを設定

ドメイン・メール設定⇒[独自ドメインを設定する]

ドメイン名とフォルダ名を入力

http://luka.website/ が一覧に表示されたら⇒[詳細を見る]

ムームードメインのコンパネへ

ムームードメインのコンパネで
ドメインをサーバと紐付け

hetemlのコンパネに戻って⇒[詳細を見る]

無料独自SSLを設定するにチェックすると
https://luka.website/ が使えるようになるが
設定に少し時間がかかって
その間、一覧には「SSL設定中」と表示されてて・・・

設定が完了すると「無料SSL」と表示される

と、ちょっと長かったけど
今はSSLがデフォなので
サーバの初期設定はここまで必要だ

サーバの設定が終わったら
次はWordPressをインストールだが
hetemlサーバはコンパネから
簡単インストールの機能が使えるるる~

HetemlサーバでWordPressを簡単インストール

さて
いよいよThunderbirdを立ち上げて
データのインポート!

三本線のメニューを開いて
ツール⇒設定とデータのインポート

Thunderbird

設定を選んで・・・

Thunderbird

Windows Live Mailを選んで[次へ]

Thunderbird

この次はインポートすべきファイルを
選ぶ操作画面になるはずだと待ってると・・・

「Windows Live Mailの設定が正常にインポートされました」

いきなりそんな表示が出て来て
一見、画面的には何も入ってなさそうに見えても
パスワードを求められるので
どうやら同じPC内だと勝手に設定ファイルを探して
インポートしてくれるのだと理解

そしてセキュリティ的に
パスワードを求めてくる仕様なのだな^^;

いや、そうでなく・・・
新しいPCに移行する場合はどうするのか
実験中なのだよ><

別のPCでやり直しだな・・・

メールソフトを使うのに必須なのは
A:メールアカウント設定で
メールアドレス、アカウント名、パスワード
送受信の仕方とサーバ名などの情報一式で
これが欠けてたり間違ってたりすると
メールソフトにエラーを返されてしまい
当たり前だがメールの送受信が出来ナイ

換言すれば
A:メールアカウント設定さえ
ちゃんと出来れば
とりあえずメールの送受信が可能だ

ファイル⇒電子メールのエクスポート⇒アカウント

Windows Live Mail

アカウントの一覧から
1つ1つ選択しては[エクスポート]ボタン

Windows Live Mail

まとめてできなくて
ちとメンドウだが・・・^^;

しかしメールサーバに
元々どんな設定をしてるかによって
過去のメールがどれだけメールサーバに残ってて
新しいメールソフトにどれだけダウンロードできるかは
一概には言えなくて
自分の場合は5日分しか残しておらず
人によっては全てのメールを残してたり
逆にメールソフトで削除したら
サーバからも削除する設定なんてのもあり

全てのメールをサーバに残す設定にしてなければ
B:過去のメールのデータは
現在使ってるメールソフトによって
ローカルのどこかに保存されてるので
これをエクスポートして
新しいメールソフトにインポートする必要がある

そして自分は余り活用してナイが
C:アドレス帳のデータや
D:スケジュールのデータも
やはり使用中のメールソフトから
新規メールソフトに移行する必要がある

このブログでは順不同になったが
A:メールアカウント設定(上記参照)と
B:過去のメールのデータ
現行メールソフトWindows Live Mailから
既にエクスポート出来た

あとはちょっと使ってた形跡があるので
C:アドレス帳のデータも
一応、取り出してみるるる~

一番下にある5つのアイコンから
真ん中のアドレス帳を開いて・・・

右上の方にある[エクスポート]から
形式(拡張子)を選択

Windows Live Mail

右上の方にある[エクスポート]から
形式(拡張子)を選択

Windows Live Mail

これでWindows Live Mailから
全てのデータのエクスポートが出来たので
次はThunderbirdにこれらをインポートするるる~

Thunderbirdをインストールしたら
以前、試しに入れた時のアカウント設定が残ってて
反映されてしまったので
そのアカウント設定を削除して
まっさらな状態になってるはずのThunderbirdに
Windows Live Mailからの
アカウント設定とローカルのデータを
まるごと移行する準備が整った

ちなみにメールサーバは
受信メールを5日間残す設定になってて
サーバに残ってる5日分のメールは
ウェブメールアプリでも
ローカルのメールソフトでも
アカウント設定だけすれば
受信できるるる~

しかしそれ以前のメールは
常駐メールソフトのローカルデータにあって
そこから取り出すしかナイのだが
自分の場合は常駐メールソフトが
Windows Live Mailなのだ

実はとっくにサポートが終了してるが
エラーも出ずに使えてるので
むしろどこまで使い続けられるか
チャレンジしたいような・・・ヾ(・_・;)ぉぃぉぃ

いや、セキュリティ的にも
最新のThunderbirdに移行せねばだ!

だって時代は令和だし!!

作業の概要は・・・

1.Windows Live Mailからのデータのエクスポート

2.Thunderbirdへのデータのインポート

以上

It's all so simple
But it's easier said than done
Yes, it's all so simple
But it's easier said than done

と、脳内でRon Keelが歌ってる通り
そんな簡単にはいかんて・・・

まあ1.のWindows Live Mailからの
データのエクスポートに関しては何度かやってて・・・

ファイル⇒電子メールのエクスポート

Windows Live Mail

[電子メールメッセージ]を開いて・・・

Windows Live Mail

Windows Live Mailの方を選択して・・・

Windows Live Mail

データを一時保管するフォルダを選択して・・・

Windows Live Mail

すべてのフォルダーを選択して
[次へ]でエクスポートが始まるるる~

Windows Live Mail

しかしエクスポートが始まってから
迷惑メールやごみ箱の中身は要らんと気付き
一旦キャンセルして不要なメールを
削除しまくる作業をしてから
再度、エクスポートw

タイトル通りの作業をするのに
まずThunderbirdをインストール

Thunderbird

https://www.thunderbird.net/ja/から
最新Ver.をダウンロードしてきて・・・

Thunderbird

ダブルクリックで開くとインストールが始まるるる~

Thunderbird

Thunderbird

Thunderbird

Thunderbird

Thunderbird

インストールが完了したら開いてみると
アンインストール前のアカウント設定が残ってたらしく
サーバから受信しちゃってた><

いや、今回はそれじゃダメなんだ~!

現在使用中のWindows Live Mailから
アカウント設定はもちろんだが
ローカルにダウンロードしたメールも含めて
まるごと移行がしたいのだから!!

Thunderbird

てなワケでアカウントを削除するるる~

Thunderbird

再起動してみると・・・

Thunderbird

とりあえずアカウント名やメールアドレスは
表示されなくなった

Font Awsomeの設定
「はちとくま」のサイトからコピペしたついでに
ページトップへ戻るボタン
「はちとくま」のサイトへコピペ

グレーのボタンも悪くナイけど
ミントグリーンとかがかわいいかも^^

スタイルシートの色指定の部分を変更

// background-color: #999;
background-color: #58CE91;

ヨシ♪

ページトップへ戻るボタン
コピペだけで安易に設置しようとしたら
Font Awsomeの設定が必要だったw

はちとくまのサイトでは
よく肉球使ってるので
同じ仕様にしてしまえばOK

それはHTMLの<head>タグ内に
以下のように記述するだけ

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

ちゃんと表示されるようにはなったけど
ページのトップに戻れんがなwww

色々やってみたらできた^^

1.ボタンもスクリプトもHTML内に設置
?>と<?phpの間に書くコト

2.スクリプトはボタンより後に設置
最初、スクリプトを<head>タグ内に書いてたのが
不味かったらすぃ・・・^^;

管理者専用ページの
list.phpから
アルファベット順リストに
1件づつ追加できるようになったが
追加後にいちいち表示画面を
確認しに行くのがメンドウなので
list.phpにも一覧表示するようにした

しかしリストが長くなってきたら
スクロールバーでページのトップに戻るのも
メンドウになってきた><

管理者専用ページに
jQueryとか使うまでもなく
JavaScriptだけで簡単に設置したいと
ググったらこんなページを発見^^

素のJavaScriptだけでページのトップへ戻るボタン(jQueryなし)

早速、設置したけど
その前にFont Awsomeの設定も必要だった^^;