このwebサイトの作り方

Xeory

Webサイトの構築経験のある方向けの記事です

このWebサイトがどういう技術で作られているのか、中にはご興味のある方もいらっしゃると思います。

私自身の備忘も兼ねて、簡単に記載しておきます。

 

すみませんが、ここを素人向けに解説するのは難しいので、とりあえず、Webサイトの技術者向けに記載します。

もしネタが尽きて、気が向いたら解説しますね。

 

サイト構築手順

  1.  ドメイン購入(aged.jp)
  2.  レンタルサーバ購入
  3.  DNS変更(aged.jpを、購入したサーバに向ける)
  4.  Wordpressインストール(https://ja.wordpress.org/ ほか、解説ページ多数)
  5.  Xeoryテーマ導入(参考
  6.  各種プラグイン導入
    ・ Akismet(スパム対策)
    ・ Auto Post Thumbnail(アイキャッチ画像の自動設定)
    ・ BackWPup(Wordpress関連のバックアップ)
    ・ Google Adsence(広告)
    ・ Jetpack by WordPress.com(統計情報の表示など)
    ・ postMash (投稿順番を変更)
    ・ Pretty Link Lite(短縮url)
    ・ Smooth Slider(トップページのスライダー)
    └settingsのsettings.phpを修正して、style.cssに転記
    ・ Speech bubble (ふきだしプラグイン)
    ・ SNS Count Cache(Facebook等のカウントのキャッシュ)
    ・ TinyMCE Advanced(記事のエディタの機能アップ)
    ・ Under Construction(サイト工事中)
    ・ User Submitted Posts(自由投稿)
    ・ Unveil Lazy Load(画面に見えていない部分で画像を読まない)
    ・ WP Multibyte Patch(日本語環境では必要)
    ・ WP Super Cache(Webサイトのキャッシュ)
    ・ WP Insert(アドの貼り付け)
  7.  各種設定変更(設定、初期設定、テーマ設定、ユーザープロフィール、プラグイン)
  8.  スタイルシート (style.css)の編集
    ・ 背景色、文字色の変更
    ・ 真ん中の緑地の部分の削除
    ・ fontchangeの追加(参考
    ・ レスポンシブのスライダー非表示
  9.  テーマヘッダー (header.php)の編集
    ・ fontchange
    ・ 会社概要などの削除
  10.  固定フロントページ (front-page.php)の編集
    ・ スライダーの追加
    ・ 緑地の部分(main_visual)の削除
    ・ 会社概要など(front-service、front-company、front-contact)の削除
  11.  テーマフッター (footer.php)の編集
    ・ トップページメインビジュアルの削除
  12.  個別投稿ページ (page.php)の編集
    ・ 続き(the_content)の変更
  13. 問い合わせフォームの作成(参考
  14. CTA,LP(ランディングページ)の作成
  15. .htaccessの編集(転送時に圧縮設定)

試行錯誤しながら構築しましたので、ここまでで3人日ぐらいかかりました。

 

WordPressのテーマ、Xeory(Extension)は、洗練されたデザインで、SEOに強いと言われています。

しかし、テーマの修正はかなり難しいです。

 

Chromeデベロッパーツールが便利!

ChromeブラウザのF12キーを押すと、デベロッパーツールが使用できます。

htmlやcssをマウスでひとつずつ選択していくと、その使用されている部分が反転しますので、それで修正箇所を見つけるのが便利です。

chromeデベロッパーツール

Chromeデベロッパーツール

図のように、htmlコードの左上の携帯マークをクリックすると、レスポンシブの確認もできます。

 

何かのお役にたてば幸いです。