さきはやすみます

やすみたいが口癖

WordPressテーマ「Stinger3」をおしゃれにカスタマイズする!

      2017/07/06

電球のイメージ

 

※こちらの記事は以前stingerをカスタマイズしたテーマを使用していた時の内容です。

現在はStinger5-ladysを使っているため、この頃とはかなり違ったテーマとなっております。

 

 

WordPressを使って、独自ブログサイトを開設しました。

WEBの開発系の知識はほぼ皆無に近い状態だったのですが、とりあえずおしゃれでセンスのいいブログサイトが作りたい!というモチベーションを頼りに、いろいろ調べながら一応満足いくデザインができました。

どんなカスタマイズをしたのか、そのために利用したものなど、今後の自分の参考のためにも残しておこうと思います。

サイト構築の超初心者、使ったことあるのはFacebookとtwitterとアメブロぐらい。Wordpressって何?CMS?CSS?SEO?よくわからん!

っていう私みたいな人が、細かいことはわからなくても最低限ちゃんと動く、見た目おしゃれなサイトを作るにはどうしたらいいか?をテーマに超超初心者目線で書いていきます。

まずはWordpressを導入!

おしゃれなブログサイトを作る!と決めたものの、まず何からやったらいいの?とちんぷんかんぷんだった私。困った時のGoogle先生に聞いたところ、まずはWordpressが自分のパソコン上で動くように導入するところから!というのがわかりました。

※ちなみにWordpressとは、WEB上で自分のサイトを作ったり、その管理をしたりできるシステムのひとつです。htmlとかの専門知識がなくても、ウェブサイトを作って公開することができます。このくらいの理解で十分なので細かいことはよくわかりません…。

さて、一番初めの導入段階を開設している本やサイトがたくさんあるみたいですが、私が参考にしたのは以下の書籍。

  • いま一番わかりやすいWordpressでブログサイト構築入門

WordPress導入までほぼここに書いてある通りにやりました。

WP導入のためには、WEB上にデータを置いておくための場所であるサーバーが必要なのですが、そのサーバーというのがまた種類がいくつかあります。選ぶのがめんどくさいので、私はこの本が例として導入方法を載せているさくらインターネットを利用。うちの旦那もこれを使っているみたいだし、安いし、独自ドメイン(自分オリジナルのURL)もこのサービス内で取れるし、ということで迷わず決定。

さくらを使う場合のやり方が細かく解説されているので、本の通りにやればできちゃいます。ただ、大きな問題はなかったのですが、ちょっと昔に出版された本みたいで情報が古いところがありますので注意。

本を参照する以外にも、特定のサーバーを使う場合の導入方法を細かく解説しているサイトはたくさんあります。使用するサーバーを決めたら、そのサーバーでのWP導入を丁寧に解説しているサイトを探してみるのが一番な気がします。

SEOに強い(らしい)テーマ、Stinger3を採用

WordPressの導入ができて初期設定をしたら、いよいよテーマを使ってデザインを変更していきます!テーマとは、つまりテンプレートです。いろんなテーマがWEB上にはフリーで存在しているので、これをダウンロードして有効化するだけで自分のサイトにそのテーマの機能・デザインを導入できるわけです。このへんがWordpressでサイト構築をするのに非常に便利な点です。

これまたテーマはいろいろな種類があるのですが、最近ちまたで噂のSEOに強いテーマ「Stinger3」を使用することにしました。

SEO??ってまたもやちゃんとは知らなかった私ですが、要するに自分のサイトをより多くの人が見てくれるようにするためのいろんな工夫のことみたいです。SEOに強い、ってことはつまり、何も特別なことをしなくても、そのテーマを使うだけでたくさんの人に見てもらいやすくなる(かもしれない)ということ。確かに、検索してトップの方に上がってくるサイトのStinger使用率、言われてみれば高いような…。

元からかわいいおしゃれデザインのテーマを使うのも考えたけれど、やっぱり読んでもらえなければしょうがない。SEO対策のカスタマイズを勉強するよりは、Stinger3を使っておいて、デザインのカスタマイズを覚える方が楽でしょ!ということで、どちらかというとシンプルで男らしくてあんまりかわいげのない(失礼でごめんなさい)デザインは、あとから女子好みに変えるとして、おとなしくStinger3をダウンロード!

Stinger3をおしゃれデザインに変えるために使ったもの

参考になったサイト

いよいよ、一番やりたかったデザイン面のカスタマイズに入っていきます!カスタマイズは、やりたいことをGoogleで検索して出てきたサイトをその都度参考にしました。その中でもえけこのくるるhttp://equeko.info/tag/stinger3/のStinger3の記事は、女子ブロガー向けというだけあってこれがやりたい!っていう情報がピンポイントで載っててすごく参考になりました。

また、おしゃれなサイトには絶対におしゃれな写真が必要不可欠!ということで、フリーの写真素材やイラスト素材をダウンロードできる写真AChttp://www.photo-ac.com/にもとってもお世話になりました。

Sakihaya.comに使われている背景写真やアイキャッチ画像はすべてこちらのサイトからいただいています。簡単な会員登録だけですべての素材が無料でダウンロードでき、おしゃれな写真がたくさんあるのでおすすめです。

他にも、これがやりたいけど、どうやるかわからーん!っていう時にその都度調べて出てきたサイトを参考にしていました。Stingerはたくさんの人が使っていてカスタマイズの解説をしているサイトもたくさんあるので困ったらGoogle先生に相談!です。

使用フリーソフト

  • FFFTP(自分パソコンからWebサーバーにファイルを転送するためのソフト)ダウンロード
  • TeraPad(PHPファイルやCSSファイルを編集するためのテキスト編集ソフト)ダウンロード
  • DF(二つのファイルを並べて、違う部分を表示してくれる(差分比較)ソフト)ダウンロード
  • GIMP2(画像編集ソフト)ダウンロード

サイト構築に最低限必要かな?と思う使用したフリーソフトは上記の4つ。

FFFTPは導入段階から使いました。自分のパソコンのローカルにあるファイルをサーバー場にアップロードして初めて、編集した内容がウェブサイトに反映されるので、編集するたびに毎回使用することになります。デザインをいじるためにはCSSなどのファイルを直接編集することが必須なので、テキスト編集のソフトTerapadもよく使いました。Terapadでファイルを開いて編集→FFFTPを使ってアップロード、がサイトカスタマイズの基本的な流れです。

DFはあんまり使わないんですが、編集しておかしくなった時にバックアップしておいた元のファイルと見比べて、変えてしまった部分を見つけるのに使っていました。

最後のGIMP2は、新しくダウンロードしたわけではなく、前から使っているお気に入りの画像編集ソフトです。イラストレーターなどの専門的なソフトを買わなくても、WEBサイトに使うくらいの画像編集やロゴ作成ぐらいなら全部GIMPでできちゃいます。私はサイトのタイトルロゴ、ブラウザのお気に入りに入れたときに表示されるアイコン(ファビコン)を自作するのに使いました。

とりあえずここまでそろえたら、準備OKです!

カスタマイズでやったことリスト

ここからは、デザインを変えるためにやったことをひとつひとつ解説していこうと思います。次回以降の記事で詳しく書くので、まずはやったこと一覧。

カスタマイズの準備

サイト全体に関わるデザイン変更

各エントリー(記事)のデザイン変更

  • エントリーのタイトルデザインを変更
  • エントリーの見出しのデザインを変更
  • タイトル下の日付の色を変更
  • エントリー下の関連記事タイトル背景を半透明に

スマホ表示用の変更

  • 記事の背景をPC表示同様半透明に
  • エントリータイトル、見出し、関連記事タイトルのデザインPC同様に変更
  • スマホ用のウェブクリップアイコンを変更

その他の設定

  • OGP(SNSにシェアされた時に表示される情報)の設定 Open Graph Pro プラグイン使用

けっこういろいろいじってますね…なんだかマニアックな領域に入ってきました。

時間かかりそうですが、細かいやりかたはぼちぼち更新していきます!

 

それでは!

 

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

最新情報をお届けします

Twitterで早をフォローしよう!

◆noteで日記も書いてます。面白かったらフォローしてね!

 note | 早《saki》

 - ブログ運営

ad

ad

Comment

  1. […] WordPressテーマ「Stinger3」をおしゃれにカスタマイズする!. […]

  2. […] WordPressテーマ「Stinger3」をおしゃれにカスタマイズする! […]

  関連記事

Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする―

こんにちは。先日のエントリーが、このブログの使用テーマSTINGER3開発者、E …

STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする―

STINGER3のカスタマイズ、続きましてはメインウィンドウとサイドバー、メニュ …

Stinger3カスタマイズ記録―子テーマを作成するには?―

前回は、ざっとデザイン変更でやったことを一覧で書きました。 羅列するといろいろあ …

WordPressテーマをSTINGER3 Ladysに変えてみたよ

いままでテーマはSTINGER3をカスタマイズして使っていたのですが、限定公開の …

Contact Form 7が急にエラーになった!解決方法は超簡単なことでした…

最近noteの方が楽しくてこちらはちょっとご無沙汰でした。早です。 先日、仕事の …

Stinger3カスタマイズ記録―ブログタイトルを画像に変更―

こんにちは。 久しぶりにカスタマイズメモを更新したいと思います! ここしばらく本 …

さきはやすみます。っていうブログになりました。

すっごく久しぶりにブログを触りました。 あまりにも触らなすぎてあれこれ忘れている …

やらないと絶対損!言葉が主戦場でないクリエイターが、言葉を使えると強い。

最近ブログが楽しいです。 もともと文章を書くのが特別得意とか、好きとか言うわけで …