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

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

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

関連記事

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …

【Stinger8】gulp-phtml-simple-compでheader.phpをうまく圧縮する

Stinger8のテーマファイルをgulpのgulp-phtml-simple-compを使ってphp圧縮にかけたら、バージョンベクタの圧縮がうまくいかなかったので自分用のメモ。 参考gulp-pht …

【Stinger8】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …

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

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

GulpでWordPressのCI 〜設計編〜

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