【テーマ:スワロー】コピペでOK !サイドバーのプロフィールの設置方法

スワロー
sally

こんにちは!wordpressのカスタマイズとかがよく分からないサリーです。
なので、ショートコードはアイラブコピペです

今日は、超初心者の私が、私と同じ様に超初心者の人に向けて、スワローのサイドバーのプロフィールの設置をわかりやすい様に説明していきたいと思います。

なぜなら、スワローを購入した理由のひとつに…
スワローのコンセプトが「ブロガーが執筆に集中できるテーマ」、説明も、設定も、調整にも時間を取られない…だったのに…

スワローのサイドバーにプロフィールを設置できない…という事で時間をかなりとったからです。

今日は、深い話は抜きにして、スワローのサイドバーにプロフィールを設置できるようご案内したいとお思います。

スワローにコピペでOK !サイドバーのプロフィールの設置方法

この、トップ画像のサイドにある赤枠内のプロフィールを作っていきますよ!

プロフィールの設置方法
  • ウィジェットの準備をする
  • ウィジェットの設置をする
  • 画像のURLの調べ方

今回は、無駄口叩かずに淡々と筆を執っていきたいと思います。
さっそく行ってみましょう。

ウィジェットの準備

①ワードプレス管理画面の、左サイドにある「外観」→「ウィジェット」の順番にクリックしていきましょう。

そうすると【利用できるウィジェット】の中から「カスタムHTML」を探して下さい。
【下図参照】

この、「カスタムHTML」を利用して、プロフィールを作ります。

②次に「カスタムHTML」をその右側にある「【PC用】サイドバー」にドラッグして置きます。

ドラッグ出来たら、「カスタムHTML」をクリックして詳細を表示させてください。

プロフィール欄

ひとまず、これでプロフィールを作っていく環境は整いました!

ウィジェットの設置をする

「カスタムHTML」の中には、「タイトル」と「内容」の2つの欄がありますよね。

赤枠が「タイトル」で、青枠が「内容」の部分になります。

①最初に、赤枠の「タイトル」に「プロフィール」と入力してください。

②次に青枠の「内容」を入力していきます。

ここに、画像と自分のPRするプロフィールとSNSのリンクを置いていくわけですが…ショートコードに詳しくない人はコピペにしましょう!

これを使ってください!

<div class="authorbox wow animated fadeIn" data-wow-delay="0.5s">
    <div class="inbox">
        <div class="profile cf">
            <div class="custom-profile_img"><img class="avatar avatar-150 photo" src="☆プロフィール画像URL☆" srcset="☆プロフィール画像URL☆" alt="" width="150" height="150" /></div>
            <div class="custom-profile_description">
                <div class="profile_name"><a title="xxxxx" href="☆ブログURL☆/author/☆ブログアカウト名☆/" rel="author">☆ここに名前をかく☆</a><span class="userposition">☆ここに肩書きを書く☆</span></div>
                ☆ここに自己紹介文をかく☆
            </div>
        </div>
        <div class="author_sns">
            <ul>
                <li class="author-site"><a href="☆ブログURL☆" target="_blank" rel="noopener">WebSite</a></li>
                <li class="author-twitter"><a href="☆twitterアカウント☆" target="_blank" rel="nofollow noopener">Twitter</a></li>
                <li class="author-facebook"><a href="facebook☆アカウント☆" target="_blank" rel="nofollow noopener">Facebook</a></li>
                <li class="author-instagram"><a href="instagram☆アカウント☆" target="_blank" rel="nofollow noopener">Instagram</a></li>
            </ul>
        </div>
    </div>
</div>

「☆」の部分を入力してください。
※「☆」も取り払って入力して下さいね!

画像のURLの調べ方

画像のURLの調べ方が分からない人の為に、説明しておきます。

ワードプレス管理画面の、左サイドにある「メディア」→「ライブラリ」の中から画像をクリックしてみるとこんな画面になると思います。

右下の赤線部分「リンクをコピー」の中のURLを全部コピーしてください。

これが、画像のURLになります。

その他補足

今回は画像サイズを150×150にしています。
ショートコード内のの上の部分「画像のURL」を貼るあたりに150の数字が、2か所あると思うので、ここで変更できますよ。

もし、上手くいかない場合は「☆」も消しているか?等、コードにミスがないかチェックしてみてください。

それでも上手くいかない場合は、キャッシュがいたずらをしている場合もありますので、キャッシュを消去してみてくださいね。

sallyは「cocoon」から、「スワロー」にテーマを引っ越しした時に、プロフィールが作れなくてシックハックしました。

「コードなんて意味が分からない!」という人は是非活用してみてくださいね!

今日はここまで~♪

PR:テーマスワロー最高です。

このブログは、安くてコスパ最高なWordPressテーマ「スワロー」を使用しています。
難しい事はテーマに何とかしてもらい、書く事に集中したい方に本当にオススメのテーマですよ

\当ブログで使用中「スワロー」/



関連記事