自分のポートフォリオサイト「Yochi INFO」をつくってみました

Yochi INFO」という自分のポートフォリオサイトをつくってみました。

つくってみようと思ったわけは、私の好きなこちらが登場したから。

もともとポートフォリオサイトをつくろうとは考えており、別のモノをコンセプトにしたデザインにするつもりでいたのですが、パッと思いつきでこちらのほうのアイデアが浮かんできたので思い切ってやっちゃいました。
それでも別のコンセプトのアイデアについては、近々このブログにでも反映させてみようかなとも考えています。

一応、サイトの見方としては、下にある左右のアイコンが描かれたボタンをクリックすると、スライドして違うページが見られるようになっています。

挑戦してみたこと

このポートフォリオサイトをつくるうえで、いくつかやってみたかったことがあります。

  • INFOBARを意識したデザイン
  • ボタンをつかったギミック
  • Netlifyをつかってみる

サイトについては正直、自分で確認したときに思ったのですが、操作など不親切であることは間違いないです(笑)
つくっている最中、主にパソコン上でしか確認していなかったため、スマホで見た際にボタンが小さくて押しづらいとか、ブラウザのバーのせいで見づらいなど、そこにあまり意識が向いていませんでした。バッテリーとかシグナルのアイコンとか無駄な装飾もありますし……
そもそも、ほかにコンテンツがあることに気づかないとかいう問題もあるとは思いますが、それでも自分がやりたかったこと、INFOBARっぽいギミックのほうを優先させています。

もはや誰かに見てもらうためのポートフォリオサイトではなく、あそびでつくったサイトになっているのですが、これも自分のサイトだからこそチャレンジできることなのかもしれません。

つくったサイトを自分で借りているレンタルサーバーをつかってアップしてみても良かったのですが、気になっていたNetlifyのサービスを使ってみたかったので、そちらで試してみました。
もっと難しいものかと思っていたのですが、GitHubと連携させるだけでかんたんにサイトを表示させることができたので肩透かしをくらい、GitHub Pagesをつくってみたときよりも手軽な印象を受けました。

また、GitHubのリポジトリのつくりかたとかすっかり忘れてしまっていたため、ふたたび「わかばちゃんのGit本」にお世話になってます。

今後、さらなる微調整をするかは決めていませんが、とりあえずはこのサイトをポートフォリオ代わりとして運用していこうかと考えています。

WordPressテーマ「Dan」をバージョン 1.1.1 にアップデート

先日、WordPress公式ディレクトリ掲載テーマ「Dan」のバージョンを1.1.1にアップデートしました。

ほんとうはこういうアップデート情報などは、別にテーマ用のサイドなどをつくってそちらでお知らせしようなどと考えていたのですが、どうにも面倒でしばらくはこちらのほうでたまに書いていこうかなと思っております。

主なアップデート内容は、カラースキーマの追加とフッターにソーシャルリンクナビゲーションを追加できるようになったことです。

カラースキーマの追加

これまでは黒、グレーを主体としたカラー一色のみでしたが、これだけだと暗いし何か別の色も使えるようにしたいなと思い、新たにカラースキーマ機能を追加しました。

追加したのはブルーグレーと、カスタムカラー。色を追加するといっても元の雰囲気は崩したくなかったので、多少落ち着いた配色となっています。カスタムカラーについては、もう少し色のバランスを変えたりする必要もあるかもしれませんが……

ヘッダーや背景など各パーツごとに色を設定するやり方もあるかと思いますが、そうすると設定範囲が膨大になりますし、逆にカスタマイズが面倒になるおそれもあるので、簡易的に変更ができるような仕組みにしてあります。

フッターソーシャルリンクメニューを追加

カスタムメニューで各SNSなどのリンクを追加して設定すると、フッターにソーシャルアイコンのリンクメニューが追加されるようになりました。

この機能に需要があるかは分かりませんが、自分で追加してみたい、つくってみたい機能だったので追加してみました。

テーマについて

このテーマはなるべくシンプルにしようとしているのですが、他にもいろいろと機能を追加してみようと思うと、ごちゃごちゃになってしまいそうなのでバランスが難しいところですね。ほんとうは巷で流行っている有料テーマのように、もうちょっとデザインもこだわりたいところなのですが、そこは新たに別のテーマをつくっちゃおうかなぁとも考えたりしています。

有料テーマにも取り組んでみたいのですが、更新作業やサポートの環境を用意しないといけないのが面倒ですし……
もし、使ってくれている人で投げ銭とかでもしてくれる方がいたりするのであれば、よろこんでもっと公式のテーマづくりもがんばれるんですが(笑)

さくらインターネットからmixhostへサーバーを移転しました

最近になって、SSL化に対応したい&他にもサイトをつくりたいと思っていたので、SSL対応がしやすいエックスサーバーに移転しようかと考えていたのですが、mixhostという気になるレンタルサーバーを見つけたので試してみることにしました。

最初に知って興味が湧いたのは、この記事を見てからですかね…
ついにやってきた次世代環境のレンタルサーバ! – W3G

30日間無料で体験できる期間があったのですが、その期間が終わりに近づいてきたので、正式にさくらインターネットから乗り換えました。
無料期間が残り1週間を切ってくると、カウントダウンかの如く、無料期間があと何日ですよ~とメールでお知らせしてくれるので、期間を忘れそうになっても安心です。

ここでは、さくらインターネットからmixhostに乗り換えてみてどうだったかなどの感想を書いていこうと思います。
ちなみに言うと、さくらのレンタルサーバのスタンダードから乗り換えています。
これまでは毎月払いだったのですが、思い切って12ヶ月払いにしちゃいましたよ。

移転するのは思ったより難しくなかった

サーバーを変えようと思ったときに一番気になるのは、移転するのが面倒ではないか?
ということだと思うのですが、思ったよりも難しくなかったというか、意外と簡単に移転することができましたよ。

マニュアルが分かりやすくて使える

移転に関する操作法などは大抵マニュアルに載っていて、見れば分かったのでとっても頼りになりました。
初めてのご利用ガイド

私がよく見て参考にしていたのはこんなページ。

All-in-One WP Migrationというプラグインが有能すぎる

他サーバーからmixhostへの移転方法にプラグインを使って行う方法があったのですが、そこで紹介されている「All-in-One WP Migration」というプラグインが便利だったので、簡単に移転することができました。

容量が500MBを超えていると無料版は使えなくなるみたいなのですが、私の場合は500MB以下でしたので大丈夫でした。
このプラグインならFTPソフトを使わずに設定ファイルを書き換えたりする必要もなく、ファイルをインポートしたりするだけで移せたので、移転に関する負担は少なかったように感じます。

これまで移転したことがなかったので、移転がどのくらい大変なのか分からない部分もありますが…

使ってみた感想(良いところ)

移転して使ってみた感想なのですが、レンタルサーバーを借りてWordPressをこれから始めるなら、さくらインターネットよりもmixhostが間違いなく使いやすくてオススメだということです。

コントロールパネルが分かりやすい

レンタルサーバーを借りて始めるとなると、コントロールパネルを使う機会が多々あると思いますが、mixhostのコントロールパネルはどこに何があるか分かりやすくて、さくらインターネットのモノよりは使いやすいと感じます。

アイコンも大きく表示されていて直感的に見て分かりやすいですし、場所を入れ替えできるのも便利ですね。
もともと英語のモノを翻訳しているのか、ところどころ日本語表記が微妙なところがあるのは、ちょっと不安になるときもあるかもしれません…

WordPressのインストールが楽

さくらインターネットでも簡単にWordPressをインストールできる機能があるのですが、データベースを設定したりなど私には意外と簡単ではなかった…
でも、mixhostは本当にただインストールするだけでOKみたいな感じだったので、より簡単で楽になりました。

インストールした直後の状態だと、必須のプラグインだと言われているWP Multibyte Patchが入ってなかったり、タイムゾーンの設定などがされていないままなので、さくらと比べるとちょっと面食らうところもあるかも…?

SSL化も簡単

SSL化も簡単で、独自ドメインを設定してただ1日弱待っているだけでSSL対応できるというお手軽さ。
一晩寝かせることで、熟成されて美味しくなった2日目のカレーのようです。

サイトの表示が速くなった

実際のサイトの速度がどうなったかは調べてはいないので分かりませんが、体感で明らかにサイトが表示されるのが速くなったと実感することができます。やっぱり速くなるのってイイことですねぇ~

WordPressの管理画面がサクサク

サイトが速くなったことも嬉しかったのですが、もう一つ嬉しかったことが。
それはWordPressの管理画面がサクサクになったということ!
記事を書くときの文字の入力や、単にページを移動するとき、プラグインのインストールや削除など、全ての動作がサクサクで快適になったのです。
まるでこの管理画面内だけ、新しいパソコンに買い換えたときのような快適を味わえる…これがSSDの力というモノなのでしょうか。

実は、これが一番移転してみて良かったと思えることかもしれませんね。この快適さを知ってしまったら、もうさくらインターネットには戻れる気がしません。

使ってみた感想(良くないところ)

これまで良いところばっかり書いてきてアレなので、使ってみて良くないところ、というか気になるところも挙げてみたいと思います。

容量が少ない

これは始めに契約するときに誰しもが気になるところだと思うのですが、他のレンタルサーバーと比べて容量が少ないのは気になります。
エックスサーバーの200GBとかは多すぎて使い切る気はしませんし、10GBとかでもサイトの数が少なければ十分でしょうが、それでもこれだけで大丈夫かと途端に不安になる心理は何なんでしょうかねぇ…
余裕はたっぷりあったほうがいいよね的な。
私なんてこのmixhostの容量でも、まだ2%くらいしか使ってないんですけどね…(笑)

JCBカードが使えない

これは意外な盲点でした。JCBのカードを使おうと思っていたので、これが使えないというのが地味にどうしようか迷ったところでもあります。
まぁ、それでも他のカードや銀行振込もできるので大丈夫ではありますが、何とか対応してほしいところですね。

最後に

これからWordPressを始める予定で、500円/月程度のレンタルサーバーを検討しているという方には、さくらインターネットよりもmixhostをおすすめします。

さくらインターネットのほうが歴史も長いし、皆も使っているから安心というところはありますが、新しいモノが好き、性能が良いほうが好きという方に向いているかもしれませんね。

もしmixhostの容量がきつくなってくることがあったら、エックスサーバーも併用して試してみようかと思っています。

月額480円からの高性能クラウドレンタルサーバー

サイトデザインリニューアルしました[2017春]

2017年に入っても、未だにリニューアルに懲りない私。
またまた今回も、サイトをリニューアルしてしまいました(笑)

主なリニューアルの内容

主なリニューアルした内容は以下の通りとなっています。

  • サイト名の変更
  • AMPプラグイン導入
  • SSL対応

サイト名の変更

去年の末に、Yochi×Yochiとサイトを変更したばかりなのですが、再びサイト名を変えてみました。Yochi×Yochiだと長ったらしい感じがしたので、Yochi×2と短くしてみました。ドメイン名に合わせた形になりましたね。Yochi×2でYochiYochiと覚えてください。

AMPプラグイン導入

AMPプラグインを導入しました。なんでかというと、私の好きなエビスコムからAMPレッスンブックが出たから。
早速このサイトで試してみたくなって。今回、リニューアルしたのはこれが一番の理由となりますね。

サイトの色使いは本当は違う形にする予定でしたが、あることがきっかけでこのようなデザインに急遽変更してしまいました。
分かる方には分かるかもしれませんが、アレをモチーフにしています。

SSL対応

AMPを導入するついでに、SSLにも対応させたかったので行ってみることにしました。
httpsに切り替えるだけなら簡単ですが、その後の修正作業が面倒ですね。まだ全体を見きれていないので、表示がおかしくなっている場所もあるかもしれません。

その他

これまではフロントページを利用していたのですが、普通のブログサイトにフロントページは必要ないよな、ということで今回から省いてみることにしました。SSL化に合わせて、ちょうどいいかなぁと思って。

そろそろいい加減にサイトをいじるのばっかりはやめて、書くことに専念したいですね。でも、したいと思ってもやめられないんですよねぇ~?

サイトデザインリニューアルしました[2016冬]

2016年春、夏、秋とお届けしてきたサイトデザインリニューアルの情報。何とか年内に冬のリニューアルのお知らせをすることができました(笑)
ほんとうは変える予定はなかったのですが、利用していたデザインの飽きが早かった…
前のデザインのトップページはこんな感じでした。

読みやすいデザインを意識

前のものもシンプルで悪くなかったのですが、質素すぎて何か寂しいなぁ~と思っていたんですよね。なので、今回は見た目に関する変更が多いです。

変わった部分

新しく追加された主な部分はこんな感じになっています。

  • 本文にもWebフォントの使用
  • 目次・サイドバー追尾の導入
  • Yochi MATERの復活

本文にもWebフォントの使用

今回はブログの記事などの部分に日本語Webフォントを取り入れてみました。本文まで全部Webフォントを使うと表示されるまでに時間がかかるのが難点ですが、そこは割り切ったというか速度より見た目を取ったという形ですね。
最近は格安SIMなども普及していて速度が心配なときもあるので、パソコンで見たときだけ反映させてあります。フォントが変わっただけで、サイトが締まってみえて好みです。

目次・サイドバー追尾の導入

私のサイトに目次が必要かどうかは分かりませんが、QiitaやUX MILKのサイトの記事ページでサイドに目次が付いてくるのがかっこよかったので、真似してみました?
目次と追尾は全部プラグインまかせでやっております。いや~、プラグインって便利ですね。オリジナルでつくる目次などはネットで探せば出てくるんでしょうけど、コードを理解する知識もまだないですし、何より実装するのに時間がかかりますからね…

あと、パンくずリストもプラグインにおまかせしました。私のサイトはフロントページを使っているので、階層がややこしいんですよね。記事ページだけとかなら何とかなるけど、他のページでもやろうとしたら相当面倒くさいことになる…
でもプラグインなら一発で反映してくれるので楽チンでありがたいです。
これまではプラグインはなるべく使わない派だったのですが、これからは多少はプラグイン使う派としてやっていこうかと思います。

Yochi MATERの復活

皆さん、おまたせしました!一時期このサイトに設置していた、あのYochi MATERが復活いたしました!
ちなみにYochi MATERとは、私のブログの投稿数を表示していたボードのようなモノのこと。(詳しく知りたい方はこちらの記事をどうぞ)
トップページにデデンと書いてある数字がそうなのですが、最初に訪れた方は何のことかさっぱり❓でしょうね

上記以外にもアイコンを変えていたり(仮)、めったに書かれることのなかったコメント欄をカットする?など行っています。

2017年はこのテーマと共に?

2017年はこのテーマと共にできるだけ長く付き合っていく予定です、多分…
この記事が2016年最後の投稿になるかと思うので、ちょっとだけご挨拶を。

いつも私のサイトを見に来てくれている皆さんありがとうございます。本来はもっと皆さんの役に立つような有益な情報を載せていきたいのですが、いつの間にかサッカーの観戦記録がメインの日記のようなブログとなってしまいました。
一応SNSもやってはいますが、未だに使い方を理解しきれていないので、Twitterは主にブログの更新情報、Instagramは気が向いたときだけ、その他はほぼ放置となっております?
飽きっぽい私なので投稿頻度もバラバラで、来年もこのようなスタイルでお送りすることになるかと思いますが、これからもよろしくお願いいたします。