職業訓練校を卒業していざ就活！
企業に提出しようと思っていた学校で作成していたポートフォリオがおかしなことになってしまいました。
具体的には、まず肝心の最初のトップページにアクセスしようとしたら、CSSが反映されていないんです。。
他のぺージは大丈夫なのになんで？(´;ω;｀)
更に画像が同じ階層に入ってる？はずなのに表示されません。
Googleの無料の拡張HTMLチェックツールがあるのでそれで修正してみても変化なし。
このままで出すのは正直どうだろうということで新しくwordpressで作成してみました！
その際の手順や気になったこと、こうやって解決したよーみたいなことを緩くだが細かく書いていきたいと思います(笑)（ロゴを作成したサイトなども）
少しでも参考にしてもらえば幸いです。（参考にならないかも(笑)）
まずwordpressで作成した理由↓
wordpressで作成した理由
・ブログで使用していて慣れていたから。
・テンプレートを使用すればきれいに簡単に本格的なサイトが作成できそう
・ポートフォリオを搭載できるサイトがあるらしいがよくわからない
・wordpressで作成すれば早くできるからデザインの方に専念できそう
・wordpressで作成なんて楽してるみたいに思われないかな？→おすすめしているサイトを発見！
・wordpressでサイト構築している企業が多いらしいからアピールになるかも？
お陰で3日くらいで一から大体は作成できました。
ロゴとかの作成のほうが地味に時間かかりましたね~。
そのときの大体の手順です。
まずドメイン取らなきゃということで無料で作成できそうなところを探しました。
その時に前の学校で作成した作品をネットに表示させるときに登録していた無料サーバーのサイトのことを思い出します。
そういえばあの時にドメインみたいのものもあった気がということで、ドメインらしきものが管理画面に覗いてみたらあります。
でも調べてみたらこれはファイルのURLみたいな？ことが書いてあってどっちかよくわかりませんでした。
それでそのサーバーでwordpressプランていうのがあるのですが、ネットで調べてみると分かりやすく書いてくれている方がいたので参考にしました。
そのままプラン登録からwordpressダウンロードして表示することが出来ました。（ちなみに私はPHPプラン）
私でも行けたから皆さんも大丈夫だと思います(笑)
ちなみに私が利用した無料サーバーはXfreeというサーバーです。
ということでサーバー、ドメイン問題はこれで解決。
後はテンプレートを取得して作成していくだけです。
そしてまたここでテンプレート選ぶだけで時間がかかるのです。。
結局私が選んだテンプレートは無難にLightning。
Lightningを選んだ理由
参考にしている本に詳しく書いてあったから
日本語のテーマじゃないと不具合があったときに対処が大変そう
シンプルなやつにして自分からカスタマイズしていきたいから
企業のサイトっぽいレイアウト
とここで気づいたこと。ポートフォリオ向けおすすめテンプレートでずっと探していたけど、もしやこれって複数のポートフォリオを持っている人がまとめて搭載するようのおすすめテンプレートのことじゃね？
ちょっと説明が難しいんですが伝わってますかね(笑)
私はずっと一つのポートフォリオ自体を作成するテンプレートを探していたのです。
だってポートフォリオそんな持ってねえよ。。
せっかく作ったポートフォリオは変なことになってるし( 一一)
ということで作品一つしかないけどせっかくだしポートフォリオを宣伝する用のサイトも作成するかもです。
でもまたまたドメイン増やさなあかんのですよね~。今はその段階で悩み中。
もう一つのサイト作成するだけで気力と体力使うというか(^^;
でそれは今は置いておいて、テンプレートが選べたら基本的なコンテンツの作成やレイアウト等を整えていきます。
そして大体完成！
最後らへんはロゴとか時間かかりそうなんで後回しにしてたのでそれを作成します。
ちなみに参考にした参考書はこれです。
この参考書はおすすめです。
実はほぼこれを読みながら作成しました笑
WordPress全く最初は分からなかったからです。
lightningをテーマとして作成していきます。
まず初心者でもとても読みやすいです。
何も知識がない状態で、いきなり文字ばかりのものを読むと挫折してしまいます。
この参考書を読むながら作成するととそれっぽいものができるしWordPressの仕組みがわかります。
なのでまずは練習がてら作ってみるといいかもしれませんね。
少し心配しているのは皆んながこれを見ながら作れば、似たり寄ったりなポートフォリオにならないかということ、、、。
一応この記事はなぜかよく見られているので心配なんですが、恐らく私のブログそんな影響力ないので大丈夫だと思います( ´ ▽ ` )
ロゴとファビコン
そのときに使ったサイトはCANVAです。
はてな時代から使用している無料アプリケーションです。（一部のデザインは有料）
可愛くておしゃれなんだけど、重たい時があるのでそこだけ残念。
ファビコンはそこで作成しました。
下の図はブログ名の今をつづるdiaryを英語に頑張って訳して、ファビコンを作成してみました。
英訳分からなかった笑
↓こんなのが作れる↓
因みにロゴなど？を作る時、背景を透過させたかったらCanva Proじゃないと透過処理はできません。イラレとかフォトショはできたとおもいますが。
私も違うアプリで最初ロゴを作ってたんですが背景ピンクなのに、ロゴの背景が白になっててチグハグになっちゃいました💦
恐らく原因は透過処理できてなかったからです。
なのでイラレ、フォトショ持ってなくて透過してる素材を作りたい場合はproに入るとゆう選択肢もあります。
もちろん普通の素材なら無料でも作成することはできるので安心してください。
無料とプロの違いは、使える機能やデザインの数です。追加機能についてはここには書ききれないので書きません笑
値段もそんな高くないので、イラレ、フォトショ持ってない人はCanva Proで作成してしまうのもありです。
私は登録してないけど、登録してる人はしてるみたいです。
まず無料で登録もできますので、お好みで！
Lightningのテーマで手こずったこと
ここからはLightningのカスタマイズで困ったことと解決方法を書いていきます。
興味ない人は飛ばしてくださいね(*´з`)
コピ―ライトの文字の前の長文がなかなか消えない
↓
（Powered by WordPress ～って文のことです。）
コピーライトはいいとしてコピーライトの上の長文消したいなあということで他の方のブログを調べてCSSを拝借いたしました。たくさんのブログを調べましたが大体どこも同じCSSでした。
それがこちらのコードです。
↓
footer .copySection p:nth-child(2) {
display:none !important;
}
最近の記事だしほとんどのブログで同じコードだし普通にいけるとおもい、外観→テーマエディターの子テーマの方のCSSシートにいつも通り貼り付けました。
ふうー余裕やった、今回もいけそうやな
とフッターを確認してみると、
何これ。全然変わってないじゃん。
そこからもいくつかブログを徘徊したけどどこも同じCSSです。
ただ一つのブログを拝見したときに張り付けている場所が違いました。
wordpressってCSSを貼り付けれる場所って二か所あるじゃないですか。
一つ目：テーマエディター
二つ目：カスタマイズ（外観→カスタマイズ）
私はどっちかっていうと、一つ目の場所にいつも貼り付けてるんです。
もしかしたらと思い二つ目の場所に張り付けてみました。
すると、、、。
やった、いけたわ！！
普通に行けた！今までの苦労はいずこに？
いけました！それにしても謎が多すぎます。。
（今回は多分関係ないと思いますが、もしCSS反映されない際は、他のサイトから拝借したCSSコードに全角スペースが入ってないか等確認してみてくださいね。先生が初心者によくある間違いと言ってました。ブログ書いている人が初心者っていってるわけじゃないですよ(笑)）
後書き：もしかしたらキャッシュが削除し切れてなくて更新されてなかったのかもしれません。何回かキャッシュ削除してみるのもいいかもしれません。
おわりに
こんな超初心者もいるよーっていう励ましの記事でした。
こうしたほうがいいよとか何かあればやさしいコメントお待ちしております(笑)
続きはまた更新します。。
無料PHPスクール
こんなのを見つけました。
関東のみですが。。無料でPHPが学べるスクールです。
関西なので非常に羨ましい。
TechAcademy OnlineBootCamp
私も気になってるスクールです。
他社と比べてもそんなに高額じゃなかったのでお金が貯まったら行くかもしれません。
ただコースによって値段が全然違うので詳細は公式サイトの方で見てみてください。
