とあるエンジニアの作業ブログ

Web製作

Stinger8のサイドバーにプロフィールを表示する

投稿日:2019年1月2日 更新日:

Stinger8のサイドバーにプロフィールを表示します。

前提

  • WordPressがインストールされている
  • Stinger8の子テーマがインストールされている

作業手順

  1. “外観” > ”ウィジェット”にテキストを追加し、プロフィール表示のHTMLを記述
  2. CSSで見た目を整える

ウィジェットにHTMLを記述

“外観” > ”ウィジェット”と選択し、”サイドバーウィジェット”に”テキスト”を追加する。
テキストに以下のHTMLを記述。

CSSで見た目を整える

style.cssに以下のコードを追加します。

もし画像をbackground-imagebackground-size:coverで表示させたいときは、imgタグを削除し、profile-phクラスを以下のように記述します。

-Web製作
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

【WordPress】Google Search Consoleへのサイトマップ登録と確認方法

Google Search Consoleにサイトマップを登録するメモ。これをしないとクローラに記事を拾ってもらえない。 7,8年前に1回やったことあるんですが、昔とやり方がめっちゃ変わってて結構焦り …

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …

GulpでWordPressのCI 〜実装編〜

gulpを使ったWordPressのテーマファイルCIの実装編です。 設計編はこちらを参照ください。 目次 やりたいこと・動作環境・前提 やりたいこと・環境・バージョン ディレクトリ構成 利用モジュー …

【WordPress】画像URLをショートコード化する

imgタグなどでsrc属性を指定する際の、画像uriをショートコード化して環境差異を無くします。 目次 作業の目的 メディア設定の変更 functions.phpにuploadsディレクトリを返すショ …

【WordPress】サーバーのテーマファイルをFTPで自動バックアップ

私みたいに趣味でWordPressを使ってる人はレンタルサーバーを借りてサイトを公開していると思います。 最近のレンタルサーバーにはバックアップ機能が標準/オプションで用意されているものがほとんどです …