【webデザイン】初心者がこのブログを作り上げるまでのお話。

      2017/08/23

webデザイン

こんにちは、KiKi(@kikiiiiiiy)です。

本日よりホストファミリーが2週間バカンスに出かけました!私はvisa申請や、ベルリン生活2年目の準備、自分の絵の仕事に時間を使いたかったので、1人ベルリンに残っています。

ホストキッズに、

『KiKi, mit komm ! Mit komm ! Warum kommst du nicht ??(kiki、一緒に来てよ!一緒に来てよ!なんでこないの??)』

と言われながら、ギュってハグしてお別れ。寂しい。。

とりあえず、今日は更新できていなかったブログに取り組んでいます。昨日の記事で、100記事目を迎えました。読んでくださっている皆さん、いつもありがとうございます◎

【祝100記事目!】ドイツでオペアをする方法まとめ〜1年間のオペア留学を終えて〜

 

このブログ、オペア留学やベルリン移住に興味がある方が読んでくださっている他に、嬉しいことにイラストやデザインに興味を持って見てくださっていて(そっちが本当は本業なのですが苦笑)、複数の方からこんなご質問を頂いていました。

『このブログのデザイン、とても好きなのですが、どうやってつくられたんですか?』

このブログは長く運営していくことを目的に作ったので、はてなブログやアメブロなどのレンタルブログではなく、サーバー、独自ドメインとも購入してwordpressで運営しています。

このブログの運営方針などは、Aboutページに書いてあるのでよかったら読んでみてください。

独学で、手探りでここまで作ってきたので、そう言っていただけて本当に嬉しいです。

そう、独学で、手探りでここまで作ってきたので、初心者でもここまで作ることは可能です!

質問をくださった方に、ブログに書きますねと言いながら大変遅くなりました。今回は、このブログが出来るまでの過程を書こうと思います◎

 

スポンサーリンク

1番最初に読んだのは『wordpressのサイトを作る方法』のブログ記事は、高田ゲンキさんの『イラストレーターにとって効果的なブログを作る為に必要な5つのこと』!

このブログはベルリン在住のイラストレーター・高田ゲンキさんの以下の記事を参考に、下準備をして、自分でカスタマイズをしました。

イラストレーターにとって効果的なブログを作るために必要な5つのこと

一回、触っていけない部分をいじってしまってエラーでサイトが真っ白になってしまったことがあります。苦笑 その時、深夜にも関わらず、サイトの修正を試みて助けてくださったゲンキさん。。。本当に感謝しています!ありがとうございました!

なぜwordpressで作ったほうがいいのか、独自ドメインを取得したほうがいいのかなど、わかりやすく解説してくださっています。

まずはこの記事を読んでから、どんなブログを作るか案を練ってみるといいと思います◎

 

WEBデザイン初心者が学ぶ際に必要なものは『PC、インターネット環境』それだけ。

もし、すっごくかっこよくてアニメーションとか複雑でおしゃれなwebサイトを作りたかったら、それなりの本を購入するなり、もしくはWEBデザインが学べる学校に行く必要があるかもしれませんが、私のこのブログ程度のものを作るには、そんな必要はありません。

PC,インターネット環境だけで充分用は足ります。

わからない用語や問題があったら『コピーペースト→Google検索』で探せば、だいたい答えは見つかります。

そしてWordpressのカスタマイズについて解説してくれているブログは、ネット上にたっくさんあって、参考書を買う必要は全然ありませんでした。

何より、自分は一体何が分からなくて、何の情報を探したいのか意識しながら探して解決していった方が、頭に残るし、慣れていくのでオススメです◎

私のCSSとHTML知識は、中学生時代趣味でHPを作っていた時に培ったものを基本に発展させたものですが(当時もネット上で情報を集めて、作りながら学んでいきました)その部分は、大切なのでもしかしたら本を読みながらじっくり学んだ方がいいかもしれません。

 

このブログの構成を作るために準備したもの。

webサイト無料制作ソフト『wordpress』でブログを運営するためには、まずレンタルサーバーを契約して、独自ドメインを取得し、wordpressをサーバーにインストールして、ブログテーマを決めて、デザインをカスタマイズしていきます。

さ、わからないところはgoogleさんで調べましょう!以下、私が使ったものたちを紹介します。

レンタルサーバー

WPXサーバー : https://www.wpx.ne.jp/

独自ドメイン

ムームードメイン : https://muumuu-domain.com/

ブログテーマ

ブログテーマとは、wordpressのデザインテンプレートのことです。たくさんあるものから選び、そのまま使ってもよし、もちろんカスタマイズしてもよし!私はゲンキさんのブログ記事を参考に『Stinger7』をインストールしてカスタマイズしました。

Stinger7 : http://wp-fun.com/

※ただしStinger7 は配布終了し、現在はStinger8というまた違ったテーマを配布しているようです。私が行ったカスタマイズと多少違う部分が出てくると思います。Stinger8のカスタマイズはわからないので、各自調べてみてください。きっとたくさんのカスタマイズ解説ブログが見つかるはずです。

 

私が行ったブログテーマのカスタマイズ

現在はStinger8が配布されていて、私が使用しているstinger7と機能に違いがあるとは思いますが、カスタマイズする前の状態は同じだったので、そのサンプルとして紹介します。

stinger8

実際のstinger8のデモサイトはこちら。 最初は本当にシンプルで、何もない状態でした。。

そしてカスタマイズにカスタマイズを重ねた、現在のブログの姿がこちら↓

デザイン

イラストや画像をメインに。だいぶカラフルになって、見やすくなったんじゃないかなあ。。

元のデザインをどうカスタマイズしたのか、紹介していきます。紹介している参考記事は全てstinger7用なので、もしstinger8をカスタマイズしたい場合は『◯◯◯(カスタマイズしたい内容) stinger8』と検索したら、参考記事がヒットすると思います。

【ヘッダー部分】

ヘッダー

・背景色を白に変更(カスタマイズメニューからカスタマイズ)

・タイトルを文字から画像に変更(カスタマイズメニューからカスタマイズ)

・タイトルとブログ紹介の文章を中央寄せにする(参考記事:http://web-ashibi.net/archives/308

・ヘッダーメニューのデザインカスタマイズ(参考記事:http://web-ashibi.net/archives/308

・ヘッダメニュー下に注目記事のスライダーを設置(プラグイン: Smart Slider

・スクロール追尾するSNSシェアボタン(プラグイン:AddToAny

【記事一覧】

記事一覧

・記事一覧を1カラムから2カラムに変更(参考記事:http://web-ashibi.net/archives/771

・記事の抜粋文を削除

・カテゴリータグを赤色にカスタマイズ

【サイドバー】

サイドバー

・見出しデザインをカスタマイズ(参考記事:http://web-ashibi.net/archives/653

・タグクラウドのデザインをカスタマイズ(参考記事:http://web-ashibi.net/archives/660

 

【フッター】

futta-

・メニューとタイトルロゴの削除

・背景色を赤に変更

・スクロールバーを可愛いデザインに変更(参考記事:http://web-ashibi.net/archives/964

 

 

 

ボツになったロゴたち。

このブログのデザインに落ち着くまで、半年位かかっています。ブログ全体のデザインは残っていませんが、ロゴだけ残っているのでちょっと紹介します。

仮運営時代

っk

まだ、いろんな人にブログの存在を教えていなくて、こっそりカスタマイズを繰り返していた頃のもの。

初代

kikilogo

とりあえず、ブログ記事を書き始めたものの、やっぱりまだ公に周りにお知らせしていなかった頃のもの。

2代目

logo2

ベルリンに来たばかりの頃のロゴ。かっこいいイメージで作っていました。ブログ全体のカラーも黒と白の、シンプルなものでした。

現在

kikianime

オペア留学の記事に本腰を入れて書き始めた時に、ホストキッズ達から毎日もらうパワーをイメージして書いたもの。ブログ全体のカラーも、赤をメインに、カラフルに、ビタミンカラーに塗り替えていきました。

今のものが気に入っているので、微調整はしていくかもしれないけれど、当分このデザインでいくと思います◎

 

まとめ

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

こんな感じで、地道にGoogleで検索して、試して、失敗して、試して、失敗しての繰り返しでこのブログはできました。

気に入ってくださる方が多いようで嬉しいです。今後の課題は、アイキャッチ画像をもうちょっとデザイン性を高く、記事にマッチしたものを作っていくことです。頑張ります!

ここまで読んでくださってありがとうございました◎ また、読みに来てください◎

 

 

スポンサーリンク

この記事が気に入ったら
いいね!しよう

KiKi(@kikiiiiiiy)を

 - ART WORKS, Web デザイン ,