ポートフォリオをwordpressのテーマ「Lightning」で作ってみた

other
other
この記事は約6分で読めます。

職業訓練校を卒業していざ就活!

企業に提出しようと思っていた学校で作成していたポートフォリオがおかしなことになってしまいました。

具体的には、まず肝心の最初のトップページにアクセスしようとしたら、CSSが反映されていないんです。。

他のぺージは大丈夫なのになんで?(´;ω;`)

更に画像が同じ階層に入ってる?はずなのに表示されません。

Googleの無料の拡張HTMLチェックツールがあるのでそれで修正してみても変化なし。

使用したツール
HTMLエラーチェッカー(Googleの無料拡張ツール)

このままで出すのは正直どうだろうということで新しくwordpressで作成してみました!

その際の手順や気になったこと、こうやって解決したよーみたいなことを緩くだが細かく書いていきたいと思います(笑)(ロゴを作成したサイトなども)

少しでも参考にしてもらえば幸いです。(参考にならないかも(笑))

まずwordpressで作成した理由↓

wordpressで作成した理由

なぜwordpress?

・ブログで使用していて慣れていたから。

・テンプレートを使用すればきれいに簡単に本格的なサイトが作成できそう

・ポートフォリオを搭載できるサイトがあるらしいがよくわからない

・wordpressで作成すれば早くできるからデザインの方に専念できそう

・wordpressで作成なんて楽してるみたいに思われないかな?→おすすめしているサイトを発見!

・wordpressでサイト構築している企業が多いらしいからアピールになるかも?

お陰で3日くらいで一から大体は作成できました。

ロゴとかの作成のほうが地味に時間かかりましたね~。

そのときの大体の手順です。

まずドメイン取らなきゃということで無料で作成できそうなところを探しました。

その時に前の学校で作成した作品をネットに表示させるときに登録していた無料サーバーのサイトのことを思い出します。

そういえばあの時にドメインみたいのものもあった気がということで、ドメインらしきものが管理画面に覗いてみたらあります。

でも調べてみたらこれはファイルのURLみたいな?ことが書いてあってどっちかよくわかりませんでした。

それでそのサーバーでwordpressプランていうのがあるのですが、ネットで調べてみると分かりやすく書いてくれている方がいたので参考にしました。

そのままプラン登録からwordpressダウンロードして表示することが出来ました。(ちなみに私はPHPプラン)

私でも行けたから皆さんも大丈夫だと思います(笑)

ちなみに私が利用した無料サーバーはXfreeというサーバーです。

ということでサーバー、ドメイン問題はこれで解決。

後はテンプレートを取得して作成していくだけです。

そしてまたここでテンプレート選ぶだけで時間がかかるのです。。

結局私が選んだテンプレートは無難にLightning。

Lightningを選んだ理由

Lightningを選んだ理由

参考にしている本に詳しく書いてあったから

日本語のテーマじゃないと不具合があったときに対処が大変そう

シンプルなやつにして自分からカスタマイズしていきたいから

企業のサイトっぽいレイアウト

とここで気づいたこと。ポートフォリオ向けおすすめテンプレートでずっと探していたけど、もしやこれって複数のポートフォリオを持っている人がまとめて搭載するようのおすすめテンプレートのことじゃね?

ちょっと説明が難しいんですが伝わってますかね(笑)

私はずっと一つのポートフォリオ自体を作成するテンプレートを探していたのです。

だってポートフォリオそんな持ってねえよ。。

せっかく作ったポートフォリオは変なことになってるし( 一一)

ということで作品一つしかないけどせっかくだしポートフォリオを宣伝する用のサイトも作成するかもです。

でもまたまたドメイン増やさなあかんのですよね~。今はその段階で悩み中。

もう一つのサイト作成するだけで気力と体力使うというか(^^;

でそれは今は置いておいて、テンプレートが選べたら基本的なコンテンツの作成やレイアウト等を整えていきます。

そして大体完成!

最後らへんはロゴとか時間かかりそうなんで後回しにしてたのでそれを作成します。

ロゴとファビコン

そのときに使ったサイトはCANVAです。

はてな時代から使用している無料アプリケーションです。(一部のデザインは有料)

可愛くておしゃれなんだけど、重たい時があるのでそこだけ残念。

ロゴとファビコンはそこで作成しました。

Lightningのテーマで手こずったこと

ここからはLightningのカスタマイズで困ったことと解決方法を書いていきます。

興味ない人は飛ばしてくださいね(*´з`)

問題

コピ―ライトの文字の前の長文がなかなか消えない
         ↓
Powered by WordPress ~って文のことです。)

コピーライトはいいとしてコピーライトの上の長文消したいなあということで他の方のブログを調べてCSSを拝借いたしました。たくさんのブログを調べましたが大体どこも同じCSSでした。
それがこちらのコードです。
    ↓

CSSコード

footer .copySection p:nth-child(2) {
display:none !important;
}

最近の記事だしほとんどのブログで同じコードだし普通にいけるとおもい、外観→テーマエディターの子テーマの方のCSSシートにいつも通り貼り付けました。

ふうー余裕やった、今回もいけそうやな

とフッターを確認してみると、

ユニちゃん
ユニちゃん

何だこれ。全然変わってねーじゃねえか。

そこからもいくつかブログを徘徊したけどどこも同じCSSです。

ただ一つのブログを拝見したときに張り付けている場所が違いました。

wordpressってCSSを貼り付けれる場所って二か所あるじゃないですか。

一つ目:テーマエディター

二つ目:カスタマイズ(外観→カスタマイズ)

私はどっちかっていうと、一つ目の場所にいつも貼り付けてるんです。

もしかしたらと思い二つ目の場所に張り付けてみました。

すると、、、。

やった、いけたわ!!
普通に行けた!今までの苦労はいずこに?

いけました!それにしても謎が多すぎます。。

(今回は多分関係ないと思いますが、もしCSS反映されない際は、他のサイトから拝借したCSSコードに全角スペースが入ってないか等確認してみてくださいね。先生が初心者によくある間違いと言ってました。ブログ書いている人が初心者っていってるわけじゃないですよ(笑))

おわりに

こんな超初心者もいるよーっていう励ましの記事でした。

こうしたほうがいいよとか何かあればやさしいコメントお待ちしております(笑)

続きはまた更新します。。

コメント

タイトルとURLをコピーしました