非IT業界のweb担当者一年生ブログ

出版社でweb担当となったITの素人達が、web、ITのあれこれを備忘録的にまとめるブログ。

サイトをwiki化する方法

大量にある商品やコンテンツを、wikipediaっぽくあいうえお順に順番に一覧で表示させたい!
そう思ったことはありませんか?
 
ですが、実際にwiki風の外見をサイトで作ろうとすると意外と大変です。

無料で使えるwiki化サイトサービスはゲーム系がほとんどですし、wordpressのテーマも、無料・有料を見てみても、どれもwikiっぽい感じではなく、しっくりこないものが多いです。

そこで、誰でも無料で使えるwordpressで、好きなページをwikiのような一覧ページにできるコードを用意しました。

下記に実際に使用したサンプルサイトを用意しましたので、ご興味がある方は、有料になりますがお譲りしますので、ご連絡ください!

なるべくwikiに近いものをイメージして作りました。
PHPですので、好きなページをwiki化できることが特徴です。
サイト全体が制約を受けてしまう「テーマ」よりも使い勝手がいいと思いますので、wikっぽいページも作りたいけど、そのほかは普通のサイトにしたい、というニーズにもこたえられるものになっています。

これは、wordpressPHPコードを貼り付けることで実現可能なものとなっています。

実装自体は、ビジュアルでわかるマニュアルを用意していますので、プログラムはわからない!という方でも可能です。
もちろん、こちらでも別途サービスで実装することは可能です。

wikiっぽいサイト作りたいけど、なかなかいいのがないな」
と思っていた方は、ぜひご検討ください!

【朝活でwebマーケティング!】2月15日(金)開催決定!素人限定webマーケティング講座のお知らせ

Webのことをどこから学んでいいか分からない超初心者向け講座を1月25日よりスタートしました!
かつての自分のように困っている方のために、
そもそもの言葉の意味や仕組みを簡潔に理解できる所から始めて、
そのままwebマーケティングの基礎まで理解できる講座を作りました。

その第二回目が今週の金曜、2月15日朝7時に開催いたします!

www.street-academy.com


ご予約の締め切りは、明日木曜朝10時まで!
残席に限りがありますので、お早めに!

1月25日の初回講座を受講していただいたのはアパレルメーカーの40代女性経営者の方。
ECサイトの運営を考えているとのことで、webマーケティングに強い関心を持たれていました。
しかし、web・ITスキルに関しては、ブラウザ・サーバ・ドメインなどの基本的な用語の意味が分からないレベルでした。

ちなみに、作成したての講座ということもあり、今回は一名のみの参加でしたが、その分、徹底的なマンツーマン指導になり、結果的にとても満足してもらえたようでした。

講中にめきめき力をつけ、次に教えていく内容を予測していく鋭い質問が出るようになった結果、講義が予定よりも進み、1時間も早く講義が終わりました。
時間が余ったので、もう一度最初の内容を復習しましょうかと提案をした所、
「最初は、始めの方の内容を忘れてしまいそうで、復習してくれると助かるかと思っていました。
ですが、こちらの理解度を振り返りながら、一つ一つ丁寧に教えてくださったので、大丈夫です。」
とおっしゃっていただき、予想外の嬉しい手ごたえをつかんでいただけました。

それでも、本当に理解しているのかな?と思って、ブラウザ・サーバ・ドメインに関して確認した所、一言で簡潔にまとめられるほどに理解されていました。

この方のように、これからwebを活用してビジネスを始めたいと思っていらっしゃる方は、最初のハードルが高いと思いますので、是非、当講座からはじめの一歩を踏み出してみませんか!?

【場所・日時】

東京都千代田区飯田橋4-1-5
ボザール飯田橋
5階会議室スペース

毎週金曜AM7:00~8:30開催中

お申込みは下記URLから!

https://www.street-academy.com/myclass/47926

読むだけでもレベルアップする無料資料も配布しております!

https://wp-workshop.work/downloads/

※この講座は、web関係の仕事に対して未経験の方が対象です。
すでにweb担当者としてアサインされた方は下記のセミナーがおすすめです!

ウェブグッドゼミナール
https://www.facebook.com/webgoodoffical/

【朝活でwebマーケティング!】素人限定webマーケティング講座を開催中!

Webのことをどこから学んでいいか分からない超初心者向け講座を
1月25日よりスタートしました!


かつての自分のように困っている方のために、
そもそもの言葉の意味や仕組みを簡潔に理解できる所から始めて、
そのままwebマーケティングの基礎まで理解できる講座を作りました。

 

1月25日の初回講座を受講していただいたのはアパレルメーカーの40代女性経営者の方。
ECサイトの運営を考えているとのことで、webマーケティングに強い関心を持たれていました。

しかし、web・ITスキルに関しては、ブラウザ・サーバ・ドメインなどの基本的な用語の意味が分からないレベルでした。

 

ちなみに、作成したての講座ということもあり、今回は一名のみの参加でしたが、その分、徹底的なマンツーマン指導になり、結果的にとても満足してもらえたようでした。

講中にめきめき力をつけ、次に教えていく内容を予測していく鋭い質問が出るようになった結果、講義が予定よりも進み、1時間も早く講義が終わりました。

時間が余ったので、もう一度最初の内容を復習しましょうかと提案をした所、

「最初は、始めの方の内容を忘れてしまいそうで、復習してくれると助かるかと思っていました。
ですが、こちらの理解度を振り返りながら、一つ一つ丁寧に教えてくださったので、大丈夫です。」

とおっしゃっていただき、予想外の嬉しい手ごたえをつかんでいただけました。

 

それでも、本当に理解しているのかな?と思って、ブラウザ・サーバ・ドメインに関して確認した所、一言で簡潔にまとめられるほどに理解されていました。

 

この方のように、これからwebを活用してビジネスを始めたいと思っていらっしゃる方は、最初のハードルが高いと思いますので、是非、当講座からはじめの一歩を踏み出してみませんか!?

 

 

 

【場所・日時】

東京都千代田区飯田橋4-1-5 ボザール飯田橋 5階会議室スペース

毎週金曜AM7:00~8:30開催中

 

お申込みは下記URLから!

https://www.street-academy.com/myclass/47926

 

読むだけでもレベルアップする無料資料も配布しております!

https://wp-workshop.work/downloads/

 

※この講座は、web関係の仕事に対して未経験の方が対象です。
すでにweb担当者としてアサインされた方はこちらのセミナーがおすすめです!

 

https://www.facebook.com/webgoodoffical/

 

 

TCDテーマでサーバ移転の際にロゴ画像が表示されない不具合の解決方法

 web担当一年生の岩本@GB_iwamotoです。

twitter.com

今回は、ワードプレスのテーマである「TCDテーマ」を使用している方は読んでおいて欲しい内容です。

【ご協力のお願い】
タイトルにある内容と同症状で苦しんでいる方々がいらっしゃいます。
ここでお話する解決方法は他には書かれていない情報ですので、
是非シェアしていただけると幸いです。

 

特定条件下で「TCDテーマオプション」にある「ロゴの設定」が機能しなくなり、ロゴがアップロードできなくなるという不具合に関して、解決方法を見つけました。

その特定条件下とは、サーバ移転をした際に起こります。

まずは、どういった流れでその状況になったかをお話し、最後に解決方法をご説明します。

 

不具合の発生と解決までの流れ

①サーバ移転前にロゴ画像がSSL化できない問題

②サーバ移転後にロゴアップローダーの不具合発生

③エラーの特定

④修正

 

①TCDテーマにおける旧式のロゴアップローダーはSSL化に対応していない関数が使われていた

 

運営しているwebサイトにて、SSL化を試みた所、ロゴ画像だけが「http」のURLから切り替わらないという不具合が起きました。

当webサイトにおけるテーマはTCDテーマを使用。
そのTCDテーマには、ロゴ画像をアップロードする機能(ロゴアップローダー)があります。

不具合を特定するために検索を開始。
TCDテーマの運営会社によるサイトにて、当該不具合の解決策にあたるコードを見つけます。
そこで書かれていた原因としては、旧式のロゴアップローダーはSSL化に対応していない関数が使われているとの事でした。

tcd-manual.net

上記記事の指示に従い、コードをコピペして書き換え、ロゴ画像をSSL化する事に成功。

 

以上は半年前に行っていた内容で、以下の内容から2018年8月に移ります。

 

②サーバ移転をした際、ロゴアップローダーが機能しなくなる

運営しているwebサイトを新しいサーバに移転する事になりました。

サイトの表示スピードを速めるためです。

 

無事に移転が終了したかと思いきや、ロゴ画像だけが表示されていないという不具合を確認。

画像URLを確認した所、「httpss」という存在しないURLとして表示されていました。

 

一旦、ロゴ画像の削除を試みるため、アップローダーを起動させると、ロゴの画像が真っ白。

削除する事は出来ますが、再アップロードをすると再び真っ白になり、URLがhttpssという状況が繰り返されます。

 

アップローダーを動かしているheader-logo.php内のコードが書き換わってしまっている事を発見。

エラーの解決方法を調査するため検索を開始。

TCDテーマの運営会社によるサイトにて、下記記事を見つけます。

design-plus1.com

この記事は6年前の内容になりますが、サーバ移転に伴い、PHPCGI版からモジュール版に変更されているため該当する可能性があると仮説を立てます。

しかし、対処方法の内容が難しいうえに、CGI版に戻したいわけではありません。

 

また、この記事の文末に、どうしてもアップローダーが機能しない場合、機能を削除して直接コードを書き換えて欲しいとあります。
これでは、このテーマを購入した意味がない。

 

困り果てていましたが、検索の最中にこんな記事を見つけました。

 

roadbikelife.net

TCDのテーマ自体WordPressが普及してきたころから長い間様々なテーマをリリースしてきたこともあり、おそらく古いコードを使いまわしていて潜在的なバグを生んでしまったのだろうと思います。

 

初心者にとっては、不信感が爆発的になる状況。

ですが、この情報はエラー箇所を確信する決め手となりました。

 

つまり、TCDのテーマが原因である事は間違いなく、ロゴのアップローダーをプログラムしている"header-logo.php"にしか原因はあり得ないということです。

それも検索していても出ない情報となれば、プログラマーにとっては深い問題ではなく簡単なバグである可能性が濃厚。

 

難しい問題で自分のような初心者ではどうしようもないのではないか、という先入観を捨て、再調査。

そこで、冒頭のTCDの運営会社による記事に戻る事になります。

tcd-manual.net

 

ここにあるソースコードの該当箇所をもう一度見直しました。

すると、問題が起きているサイトの方のheader-logo.phpは下記のようになっていました。

サーバ移転後にロゴの不具合を起こすTCDテーマのheader-logo.php該当箇所

 

'http'と'https'の後にあった:(コロン)が抜けています。

 

【正しいコード】

修正箇所の正しいコード


PHP内の他のコードではコロンがあり、httpとhttpsのコードにのみ発生
していました。
その内容から察するに、先程の記事で指摘されていたSSL化するに適していない古いコードだったのではないでしょうか。

 

④親テーマと子テーマのheader-logo.php内にある該当箇所にコロンを入れて修正完了。

エラー箇所が特定できたので、コロンを入れて本来のコードに戻していきます。

まずは子テーマを修正。

しかし反映されず。

 

もしやと思い、親テーマを見ると親テーマも変更されていました。

両方の箇所を修正すると、アップローダーが正常に機能。

解決いたしました。

2015年発売のTCDテーマでも同じ不具合が起きる

 また、私たちweb担一年生では、2015年に発売されたTCDの別テーマをもう一つ購入していました。
そちらも使って、同じ状況になるかを試した所、全く同じ状況が再現されました。

皆様、ご注意いただけたらと思います。

 

今回の情報が、同じweb担一年生な方々のお役に立つ情報だったら光栄です!

TCD,ロゴ,アップロード,できない,不具合,サーバ移転,エラー,コード 

サーバを変更しよう!プラグインやコードをおすすめしない真実!初心者のためのサイト表示スピード改善方法

web担当一年生の岩本@GB_iwamotoです。

twitter.com

今回はサイトの表示スピードを上げるため必要な知識をお話します。

【ご協力のお願い】

今、「サイト 表示速度 改善」というキーワードで検索をすると、上位の記事では上級者向けの記事になっていて難し過ぎる内容が並んでいます。
それを避けて、「かんたん」「おすすめ」というタイトル記事に釣られると基本的な説明が抜け過ぎていて、結局混乱して長時間迷い続けるになります。

(あとに書きますが、僕が実際そうなりました。)


40時間以上迷い続けてサーバに
500エラーが出てしまう僕のような人が出てしまわないよう、この記事をシェアしていただけると幸いです。

 

 

it-support.hatenablog.com

【スピードアップデートに関して発表したGoogleのニュース】

webmasters.googleblog.com

 

「モバイルの検索ランキングにページ表示速度を影響させる」という今回のアップデート。

スマホからの検索は今や皆がしている事ですよね。
その検索表示の順位に関わるというのですから、無視できません。

 
我々が運営しているサイトは表示速度に関して遅く、解決したくとも知識が足りないままになっていました。

この機会にこそ、なんとかして今より表示速度を早くしないと!と思って、ネットを検索して回りました。

その結果、このキャッシュ系プラグインを導入したりコードを書き込めば、あっという間にスピードが向上しました!

 

…というコピペ記事に踊らされまくりました。

初心者なweb担一年生らしく、有用な情報だと思える記事にあたっても、意味をくみ取れず大苦戦。

それでも結果的には少しでも速度を向上し、最善策が何かを理解する事ができました。

また、なぜ露頭に迷い続けていたかも最終的に理解することができました。 

 

そんな訳で、今回は改善策は勿論のこと、ネットで調べる際のコツもお話します。

 

一番の解決策は「サーバの変更」

サーバというのは部屋に例えられます。

プラグインの導入やコードの書き換えというのは、リフォームと同じレベルの話です。

駅から遠くて四畳半…という部屋のリフォームを一生懸命しても、駅から離れている物件である事実は変わりません。

じゃあなぜ、プラグインの導入やコードの書き換えをすること、つまりはリフォームするべきと皆が言うのか。
それは、玄関に物が多いから撤去したり置く場所を変えたりする事で、部屋から出発する時間を減らす事ができるからなのです。
確かに速くなりますが、それは部屋の中の話でしかなく、やっぱり駅から離れている事はどうしようもないですよね。

 

だったらどうするか…そうですね、部屋を引っ越しするに限ります。

駅までの時間を速くするのと同様、サイトスピードを速くする際も同じで、根本的な解決をしたい場合はサーバを変更しましょう。

初心者な自分でもなんとかできないの?→できません。

ネットを検索しているとおすすめのプラグインコードを自分で書き込む方法がたくさん出てきます。

初心者でも簡単に出来るのでは?

と思う所でしょうが、結論から言うと、できません。


ネットにある記事の内、50記事近くを何度も読み、方法を一つ一つ検証してみましたので参考になるかと思います。

その間、40時間近くは掛かっています。

経験値を得たいという目的でもない限り、40時間かかって、事態が悪化するという事もありえます。

実際、検証中にはスピードが落ち、サイトにもエラーが出ただけという結果に陥る場面もありました。

※ちなみに、「プラグイン」といっても、ここではサイトスピード関連のプラグイン「キャッシュ系プラグイン」や「コード圧縮プラグイン」の事を指しています。
<例>
  • W3 Total Cache
  • Autoptimize


プラグインを使うにしても、コードを書き込むにしても、
PHPを使う事ができない限り、不可能です。

PHPワードプレスを動かしてるプログラムだっけ?」というぐらいだと同じ悲劇が繰り返されるので、キャッシュ系プラグインやコードを書き込むのは止めましょう。

一番簡単で安心な初心者用スピードアッププラグイン

さて、そうは言ったものの、サーバ変更以外にとりあえずやれることが一つだけあります。

 

それは画像圧縮です。

画像のサイズが重過ぎてサイトが重くなっている事は、初心者あるあるです。

画像圧縮は、ただ画像のサイズを小さくするだけなので簡単ですし、安全。

 

でも、今更一つ一つやってられないとか、フォトショップなどの画像加工ソフトを持っていないから出来ないという方のために、おすすめのプラグインを紹介します。

 

・EWWW Image Optimizer

 

これは有名なプラグインで、どこでも紹介されています。
一気に画像を適切なサイズに圧縮してくれるので便利です。

操作も簡単。

ただし、画像圧縮だけで急激にサイトが速くなったりしませんので、過度の期待は禁物。

部屋をちょっと掃除した程度と思ってください。
「初心者が一つだけできること」ですので、結果もそれ相応ということなのです。

 

ここで調子に乗って、他のキャッシュ系プラグインやコードに手を出すと痛い目にあいます。(あいました。)

 

半年以内の情報でも最新情報とは限らない

webの世界は、アップデートによって状況が細かく変わっていきます。

最新かどうかという基準は、調べようとしている情報に対して「アップデートがあったのかどうか」です。

webの世界に慣れていない方は、なんとなく半年以内かな…?と思いがちです。

 

かつては正しかった情報でもアップデートが絡んでしまうと間違った情報になってしまいます。
書いてあった通りにやったけど出来なかった!ウソつき!という状況は、アップデートがあった場合による環境の変化で起こるのです。

 

プラグインとコードをいじる前に確認するのはテーマ

多くのネット記事で、しっかり書かれていなかった所がこの内容でした。

サイトスピード向上の際、プラグインやコードの話にばかり収束されていましたが、その前にテーマは何を選んでいるかが重要です。

 

サーバ>テーマ>コード>プラグイン

 

と思っておいてください。

 

ネットで出てきた記事の中でおすすめしているプラグインやコードで行っている設定が、既にテーマに設定されていた場合、二重になってしまいます

結果、サイトのスピードが重くなってしまうのです。
そういった設定の変更が、サーバやテーマにアップデートが入ると行われるため、アップデート情報を見ておかなくてはいけません。

 

ちゃんとしたプログラマーの方が記事を書いている場合は、この内容にも言及しています。

 

では、テーマとの設定の重複を確認するにはどうしたらいいのだろうと思う方もいると思いますが、これは知識をもって一つ一つ調べて確認するほかありません

なぜなら、テーマの中にどんなコードが書かれているかというのは、公開情報ではないからです。
料理のレシピと同じで企業秘密です。

 

…知識が必要、調査が必要。

つまり、初心者たるweb担一年生にはできません。という訳です。

 

次回予告:初心者でもサーバを移転できるプラグインの紹介

いかがだったでしょうか。

そんな訳で、プラグインを入れたりコードを書き換えたりする前に、まずはサーバを変更することをおすすめします。

 

レンタルサーバの引っ越しをどうすればいいか分からない人のためには初心者用の簡単なプラグインがあります。

 

・All-in-One WP Migration

 

長くなりますので、そちらの使い方は次回でご紹介していきたいと思います!

今回の情報が、同じweb担一年生な方々のお役に立つ情報だったら光栄です!

web,初心者



Photoshop不要!四角い画像を丸く表示する方法

みなさんこんにちは!

俺たち非IT系web担一年生プロジェクトの瀬戸です。

 

今日は、ちまたで見かける、人物とかによく使われる丸く表示される画像の作り方を紹介します。

 

↓こんなやつ

f:id:it-support:20180830134536j:plain

 

これだけで、なんだかそれっぽいですよね!?
プロが作ってる感が一気に出ます。

 

これ実は、Photoshopなどは一切不要。cssだけで作れるのです。

 

作り方はすごく簡単。

まずは、四角い画像を貼ります。

f:id:it-support:20180830134536j:plain

 

次に、適当なクラスを指定し、そこに下記のcssを記述します。

ここでは仮に、「face」というクラスを作成しました。

 

 

すると、このような画像になります。

 

f:id:it-support:20180830134536j:plain

 

はい、簡単ですね!

このcssのポイントは、数値を%で表記したことです。

これであれば、どんなサイズの画像でも丸くなりますので、おすすめです!

 

それでは、引き続き楽しいcssライフをお過ごしください!

 

f:id:it-support:20180830095454j:plain

 

実録:さくらレンタルサーバーの速度問題と解決プロセスの注意点(従来からのさくらユーザー向け)

みなさんこんにちは!

俺たちweb担一年生プロジェクトの瀬戸です。

 

みなさん、最近急にご自身のサイトのPV数が下がりませんでしたか?

 

実は最近、googleアルゴリズムが変わり、スマートフォンでのサイト表示に時間のかかるサイトは評価を下げたのです。

そして、レンタルサーバによっては、サーバの仕様(=性能?)で、他サーバよりもかなり処理速度が遅いものがあるのです。

 

そもそも、自分のサイトの速度って、自分で何度も見ているので、正直どのくらい早い(遅い)のか、わからなくなりませんか?

なので、PV数が下がって不安だと思う人は、一度こちらでサイトのスピードを測ってみるといいかもしれません。

 

そして、私たちのサイトを検証してみた結果、どうやらサーバの仕様にも原因があることがわかりました(もちろん、サイト側の問題もあるにはありますが)。

ちなみに、私が今遅いと感じているサイトは、さくらインターネットレンタルサーバ「スタンダードプラン」を使っています。

 

サイトの速度に関係するサーバの仕様として、具体的には、

  • PHPバージョンは、最新であるほど速い(PHP5よりPHP7)
  • Webサーバソフトウェアは、apatch(アパッチ)よりもNginx(エンジンエックス)の方が速い
  • PHPのタイプは、CGI版よりもモジュール版の方が速い
  • gzip圧縮がかかっている方が速い(圧縮画像を除く)

というポイントを見て対処していくと、サイトが速くなるようです。

(8.24現在、PHPバージョンを5.6から7.2に変えましたが、これだけではあまり速くなりませんでした)

 

そして、さくらのレンタルサーバでは、

  • なんと前から契約しているユーザーは、PHP5.6のまま(最新は7.2)
  • Webサーバソフトウェアは、apatchを使用
  • 前から契約しているユーザーは、CGI版のまま(新たにサーバを借りたユーザーは、モジュール版を使用できる)
  • gzipにはなっていない(自分でカスタマイズはできる模様)

 

 

という状態でした。

 

なので、それならいっそ、すべて対応しているXサーバーの「wpx」というwordpress専用のレンタルサーバーに変えようかとも思ったのですが、どちらにしろ上記の変更はかかるので、まずはさくらのサーバ上で、上記へのアップデートが可能か確認してみることにしました。

 

とここでネット上で調べていると、どうやら一昨年からさくらサーバユーザーの間でこのPHP問題は議論になっていたらしく、すでにさくら側でコントロールパネル上で、PHPバージョンをワンクリックで変更できるようにしていることがわかりました。

また、CGI版からモジュール版への移行については、新規でレンタルサーバーを契約したユーザーには標準でモジュール版がついているとの事でしたが、従来のユーザーはCGI版しか使用できない事がわかりました。

同時に、Webサーバソフトウェアは、現状のプランでもNginxが導入されているとの事でした(これは、コントロールパネル上ではわかりません)。

 

となると、①まずは今借りているサーバのPHPバージョンを変更してみて、②うまくいくようであれば同じさくらのレンタルサーバーを借りなおす、という作戦で行こうと考えました。

 

しかし、あまりにもPHPバージョンが違うため、変更したらサイトが表示されなくなるんじゃないかという懸念がありました。

 

そのため、さくらインターネットに電話で問い合わせをしてみたのですが、ちっともつながりません!!

数分ほど自動音声が流れた後切れてしまうのでもう一度かけるのですが、ついにその日はつながらず。仕方なくメールで問い合わせをしますが、返信に3営業日ほどかかるとのこと。

 

翌日にようやく電話がつながったので、PHPを切り替える際に問題となる事はないのかを聞いてみると、

問題が起こるかどうかはわからない。

何もサーバに入っていない状態であれば問題は起こらない。

とのこと。

 

何か起こったら、自分で何とかするしかないのか?という問いには、

こちらでカスタマイズした部分に関してはサポートの範囲外

という答えが返ってきました。

 

ここで重要なのは、レンタルサーバーを借りているライトユーザーであっても、何かあったときは自分でなんとかするしかない、という事でした。

知識がないと、レンタルーサーバーに関する事でも困ってしまうので、やはりどんな人でも、基本的なwebの知識(今回はサーバの知識にも関わりましたが)必要なのだということですね。

 

もしあなたがwebの知識を一通り短期間で学びたいと思うようでしたら、ぜひ私達が運営している「一日でできる wordpressでつくる営業・販売用webサイト作成ワークショップ」にご参加ください!

 

【後日談】

ちなみに、どうせ元に戻せるんだから、とえりあえずPHPバージョンを上げてみようという事になり、エイヤで切り替えたところ、とりあえず不具合はなく、無事に切り替えができているように見えます。

ただ、PHPとNginxを変えただけでは、ほとんど速くなっていません。他にもすべきことがたくさんあるということですね。

 

ということで、これからサイトの引っ越しをしていきますので、そこはまた別の記事で書いていきます!

 

f:id:it-support:20180830095454j:plain