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

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

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

関連記事

GulpでWordPressのCI 〜設計編〜

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しまし …

【備忘】gitのglobal userとlocal user使い分け

Macで初めてgit commitした時に、「お前は誰だ?」的な感じで怒られた。

でユーザー名とメールアドレスを指定する必要があるらし …

【超初心者向け】githubでテーマファイルをバージョン管理する

恥ずかしながらgitでリモートリポジトリ管理するのが初めてなので自分用のメモ。 目次 やりたいこと 動作環境・前提 テーマファイルをmasterブランチで管理するまで 開発用のfeatureブランチ作 …

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

Stinger8の細かなレイアウト修正をします。 目次 トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正 サイドバーに表示される最近の投稿やアーカイブな …

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

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