1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【サイトを作りたい人向け】コピペだけで出来る、WordPressカスタマイズ!

shutterstock_310415660
Pocket

難しいプログラミングの知識が無くても、カッコいいブログサイトを構築出来るCMS(コンテンツ・マネジメント・システム)、WordPress。しかし、サイトの細かいデザインや使い勝手を改善したい場合は、PHPやHTML、CSSをある程度理解している必要があります。

とはいえ、WordPressのためにこれらの言語を一から勉強していては、いつまで経ってもブログ運営を始められません。

そこで今回は、プログラミング初心者でもコピペだけで簡単に実装出来る、WordPressのカスタマイズ方法をご紹介していきます。

カスタマイズ時の注意点

ファイルのバックアップを取っておくこと

今回ご紹介するカスタマイズでは、テーマのソースファイルを直接書き換えます。そのため、作業中のちょっとしたミスで、WordPress自体が正常に動かなくなってしまう危険性もあるので注意してください。

カスタマイズする際は、書き換える前のソースファイルをFTPソフトなどでダウンロードし、ご自身のPC上にバックアップしておくことをおすすめします。そして万が一、カスタマイズによってWordPressがおかしくなってしまった場合は、PCに保存しておいたファイルをサーバー上のものと置き換えて復旧する様にしてください。

カスタム1. 文字表示が汚い場合のフォント変更方法

海外製のテーマを有効化して、サイトの表示を確認したとき、あまりのフォントの汚さに愕然とした経験はありませんか?これは、スタイルシート内のフォント設定が日本語サイト向けになっていないことが原因です。

style.cssのフォント設定を日本語向けにする

WordPress の「外観」>「テーマ編集」などからstyle.css を開きましょう。

サイト上のフォントは、「font:」「font-family:」から始まる行で設定されています。ブラウザの検索機能(Ctrl + F)を使って、該当箇所を探し出しましょう。フォント名が列挙されている行を見つけたら、フォント名を全て削除し、代わりに次の文字列を追加してください。
メイリオ, Meiryo, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”
フォントは左側に書かれているものから優先的に採用されます。フォントの優先度を変えたい場合や他に使用したいフォントがある場合は、適宜修正してください。

カスタム2. フッターに「Copyright(C)」を表示したい

ブログの著作権を守るために大切な「Copyright(C)」表示。テーマによってはデフォルトで表示してくれているものもありますが、大半の無料テーマは「Copyright(C)」に対応していません。

フッターに「Copyright(C)」を表示するには

「テーマの編集」からfooter.phpを開きましょう。「

」というタグを発見したら、そのタグの直前に次のソースをコピペしてください。

このソースを追加すると、ブログのフッター部に以下の様な「Copyright(C)」が表示されます。
Copyright©【サイト名】 , 【現在の年号(“2017”など)】 All Rights Reserved.

カスタム3. <iframe width=”300″ height=”150″>で埋め込んだコンテンツをレスポンシブ表示にしたい

レスポンシブ(レスポンシブデザイン)とは、サイトを閲覧しているユーザーの画面サイズに応じて、動的に画面構成を変更する仕組みのことです。PC、スマホのどちらで閲覧しても表示が乱れないため、より多くのユーザーにサイトのコンテンツを楽しんでもらえます。YouTubeの動画やGoogle Map、各種広告をWordPress上に掲載する際、<iframe>~</iframe>

で囲まれたタグを挿入するのですが、テーマがレスポンシブデザインに対応していない場合、閲覧する端末によっては表示が大きく乱れてしまう場合があります。その様なときは、以下のプログラムを各ソースファイルに追加して、<iframe width=”300″ height=”150″>コンテンツをレスポンシブ対応させましょう。
functions.php

style.css

★マーク部分は、サイトのデザインに応じて適宜修正してください。

カスタム4. 投稿一覧にサムネイルを表示したい

「管理者ページの投稿一覧に、サムネイルが表示されたら良いのに」と思ったことはありませんか?以下のソースを追加すれば、画面上部の「表示オプション」>「カラム」からサムネイルの表示有無を設定出来る様になります。
functions.php

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

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

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾

メールマガジン

ページ上部へ戻る