【必見!】ワードプレスで立ち上げたホームページの一部をデザインカスタマイズする方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日はワードプレスのウェブサイトをちょこっとだけデザインカスタマイズする方法をご紹介いたします。事の発端は「記事の最下部に配置しているダウンロードリンクの視認性がよくなかった」からです。

手順については以下で解説いたします。

【必見!】ワードプレスで立ち上げたホームページの一部をデザインカスタマイズする方法

まずは現状の「視認性がよくない変更前の状態」をご覧くださいませ。

見た目を改善する前の状態

デザインは良いのですが、配置上で「同じようなリンクが2つ並んでいる」ので見分けがつきにくくなっていますよね。2つのリンク(お得なブログ〜と無料ダウンロード)の見た目を改善させていきましょう。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

見た目を改善させた後の状態

完成形としては以下のレイアウトを目指します。下側のリンク箇所全体を枠線で囲んだデザインです。

変更前のデザインをPCで比較

デザインの差別化で『両方のリンクを際立たせる』には「片側の視認性を上げる」のが鉄則です。デザイン変更を加える前のデザイン(PCで見た場合)は以下。リンクの違いがいまいちわかりません。

テコ入れ箇所のソースを調査する

まずはソースを確認。

事前のテスト作業でタグを追加

コントロール用にタグを1つ足すとより調整しやすくなります。この段階でタグを足してもウェブサイト側には影響しません。変更後のレイアウト調整をローカル環境でだけテストしている状態です。

CSSの追加も事前にテスト

変更後のCSSを決定していきましょう。

- 超快速なワードプレスを運営しませんか?【AD】-

色や位置や横幅の調整を繰り返します。

もう少し上下の内側(余白)を広げても良さそうです。このあたりは好みで調整。

おおまかなCSSが確定しました。追加したタグに対してCSSが効くように記述。

CSSをメモ帳に下準備する

本番用にコピーしてCSSを作ります。記述は設置側のタグに合わせればOKです。

CSSは「外観 < カスタマイズ < 追加CSS」に差し込む

タグはワードプレスの管理画面から追記すればOKです。色の設定や横幅は自由に変更ください。

念のためコピペ用も残しておきます。

.code-block p span {
	display: block;
	background: #f6fcff;
	border: 1px dashed #a3e6fd;
	max-width: 320px;
	margin: 0px auto;
	padding: 5px 0px;
}

微調整を加えて完成

最後に色と余白サイズを変更して完成。リンクの違いが一目瞭然ですね。

デザインカスタマイズは以上となります。

まとめ

本日はワードプレスのCSSを用いたカスタムをご紹介いたしました。もしワードプレスで運営中のブログやホームページでデザインレイアウトを変更されたい方がいらっしゃれば以下リンクもご確認ください。

お得な価格にてワードプレスサイトのデザイン変更を承っております。まずは「今すぐココナラで依頼する」をクリックして実際の内容をチェックしていただけますと幸いです。よろしくお願いいたします。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください

お手頃価格でワードプレスカスタムに挑戦中

こんなお悩みはありませんか?

・必要のないエリアが出てきたままになって困っている
・運営中のブログでちょっとだけデザインを変更したい
・技術的なことはわからないけど見た目を少し変えたい

当サイトではワードプレスのデザインカスタマイズに関するご相談を承っております。詳しくはリンク先のココナラにて「ワードプレスサイトの見た目をカスタマイズいたします」とサービス名を検索してお申し込みくださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください


今すぐココナラで依頼する