AFFINGER Web WordPress

サイドバーで11_STINGERサイト管理者紹介をカスタマイズする方法[AFFINGER4]

投稿日:

StockSnap / Pixabay

こんにちわ、@yuki_PHZです。

WordPressのサイドバーに簡単にプロフィールと画像を表示させる方法[ウィジット]

上記の記事で紹介しました、「既存のテンプレートのデザインを生かしたい場合」について掘り下げて解説をしたいと思います。

デペロッパーツールでソースコードを調べてコピペしますので、事前にこちらの記事を読んでいただければと思います。

簡単にウェブサイトやブログのソースコードを見る方法[デペロッパーツール]

AFFINGER4を利用をしている場合には、コードが一緒ですから同じようにカスタマイズすることが可能となります。

また、他のテンプレートを利用している場合でも手法は一緒ですから難しい話ではありません。デペロッパーツールでソースを調べてみて、カスタマイズにチャレンジしてみましょう。

AFFINGER4の購入はこちらから可能です。

稼ぐサイトの設計図-AFFINGER4公式ガイド

2018年より最新版のAFFINGERが公開されています。

WING(AFFINGER5版)

カスタマイズの作業手順

カスタマイズするにあたって、必要なツールは特別にインストールをお願いするものはないので安心してください。

普段お使いのテキストエディタとブラウザで大丈夫です。

しいて言うならば、Google Chromeであれば、私と同じ環境になるのでより理解が深めやすいと思います。

編集にはテキストエディタを使用する

ソースコードを編集するにあたって、WordPressのウィジットでも構いませんが、ウィジットの編集画面ですとタグとテキストの文字色が変わらず読みずらいです。

初心者が最初にメモ帳を使ってHTMLを触ってみるなどしますが、初心者こそ早々にテキストエディタを導入して操作に慣れていた方が今後の習熟スピードに違いが出るでしょう。

私はDreamweaverを使って行きますが、ウィジットのソースのカスタマイズにはDreamweaverの複雑な機能を使う必要は全くないです。

あくまで、編集ミスを減らすための目的ですので、テキストエディタに求めるのは、タグとテキストの文字色が変わって読みやすければ大丈夫です。

無料のテキストエディタで有名どころをOS別に紹介します。

自分に使いやすいエディタを探してみてください。

作業手順の確認

一部既存のソースを利用したカスタマイズの手法手順は大まかに分けて次の通りになります。

  1.  ソースコードを特定する
  2.  ソースコードを編集する
  3.  ウィジットに貼り付ける
  4.  保存して表示の確認をブラウザで行う
  5.  以下、2,3,4の繰り返し

スポンサーリンク

サイドバーのプロフィール欄をカスタマイズしよう

ソースコードを特定する

 ソースコードの特定については下記の記事で詳しく解説してあります。合わせてお読みください。

 簡単にウェブサイトやブログのソースコードを見る方法[デペロッパーツール]

 

デペロッパーツールを使って既存サイトのサイドバーのプロフィール欄のソースコードの特定をしました。

コードを表示すると次のようになります。

SNSアイコンのリンク先は、設定されておらず名前のみになっていますので、カスタマイズの際に改めて設定します。

このコードを利用して、プロフィール欄をカスタマイズしたいと思います。

ソースコードの中身を確認する

編集前に、ソースコードの中身を確認します。

htmlのコードは、上から下へ、左から右への流れがありますのでゆっくり読んでいけば、記述がどこの部分かわかります。

上記のソースコードとブログ上のプロフィール欄を見比べるとこのように読み取れます。

  • 3行目 プロフィール欄名 サイドバータイトル
  • 8行目 画像
  • 10行目 名前
  • 11行目 説明文
  • 12行目 SNSアイコン

ソースコードを編集する

ソースコードをテキストエディタにコピペして編集していきます。

下記画像は、@yuki_PHZのDreamweaver上の画面になります。Dreamweaverや各種テキストエディタならタグや要素、テキストなど色分けして表示してくれます。

設定により全角スペースも表示してくれるようにもできますので、入力ミスが無いようにできるだけテキストエディタで編集してみることをお勧めします。

スポンサーリンク

 

顔写真を一番上に大きく表示し、その下に説明文、SNSアイコン横並びで表示して、その他装飾は既存のテーマのCSS通りにします。

最終的にこのようなコードになりました。

変更点

  • 6行目〜9行目 顔写真と説明文が<dl>タグになっていて、顔写真部の<dt>タグがfloat:leftになっていたので、<p>タグに変更した。
  • 10行目〜13行目 SNSアイコン部分をlistタグに変更して、imgにスタイルをfloat:leftに指定して横並びにした。

ウィジットに貼り付ける

ブログに反映させるには、ウィジットの「テキスト」にコピペして公開する必要があります。

WordPressのメニューから、「外観」→「ウィジット」を開き、サイドバーウィジットにテキストウィジットをドラッグアンドドロップします。

編集画面を展開させて、テキスト編集モードを選択し、コードをコピペします。

下記画像のように、編集画面は記事の投稿画面と似ています。

このとき、タイトルは入力する必要はありませんので、空欄で良いです。

コピペしたら、そのまま保存します。

保存して表示の確認をブラウザで行う

ブラウザを開き、ブログの表示を確認してみます。

下記画像のように、自分の希望するレイアウトに変更することができました。

ソースコードを再度編集する

記事上では、最初から完成したコードになっていますが、最初から編集する場合は少しづつ表示を確認しながら進めることになります。

コードを編集して、ウィジットに貼り付けて、ブログで確認し、またコードを編集する、という流れです。

最初から、あちこち編集するんではなく、一部分ずつなど表示を確かめつつ作業していきましょう。

任意のIDやクラスを指定する

CSSデザインについては特に変更するつもりはなかったので、コピペで済ませました。

もちろん、コピペでなくてはいけない理由はありませんので、自分で任意の箇所にIDやクラスを指定してスタイルを決めていくことができます。

SNSアイコンの横並びに、floatをhtmlに直接指定しましたが、新規でクラスなどを指定してCSSファイルにスタイルを記述する方法もあります。

AFFINGER4で自分でCSSを追加したい場合は、WordPressメニューの「外観」→「カスタマイズ」→メニュー一番下「追加CSS」に記述しましょう。

まとめ

デペロッパーツールを使えば、既存のhtmlを特定してコピペして、自分の思い通りのカスタマイズをすることが可能です。

今回は一部分の変更だけでしたが、SNSアイコンを自分で指定することもできますし、画像だって何枚でも追加することもできます。

ぜひチャレンジしてオリジナルのプロフィール欄を作ってみてください。

AFFINGER4の購入はこちらから可能です。

稼ぐサイトの設計図-AFFINGER4公式ガイド

2018年より最新版のAFFINGERが公開されています。

WING(AFFINGER5版)

スポンサーリンク

-AFFINGER, Web, WordPress
-,

Copyright© WebLogz , 2019 All Rights Reserved.