投稿記事一覧

WordPressのスマホアプリ

Nakkan 2021-09-19 No Comments

WordPress ブログ

WordPress スマホアプリ

スマホでWordPressの更新ができれば便利!

アプリのインストールと初期設定の仕方

まずは、WordPress公式アプリのインストールから。(iphonは「AppStore」から、Androidは「GooglePlay」から)

インストール後、アプリを起動して「ログイン」をタップする。

ログイン形式は、一番下に小さく表示されている「または、サイトアドレスを入力してログインしてください。」をタップ。

WordPressサイトのURLを入力し、「次へ」をタップ。

ユーザ名とパスワードを入力して、「次へ」をタップ。

「完了」をタップして設定完了となります。

FontAwesomeのアイコンが表示されない?!

Nakkan 2021-09-16 No Comments

css/scss ブログリンク便利機能

Font Awesome

FontAwesomeのアイコンが表示されない時、確実な方法があった。

やっぱりこれも擬似要素を使います。

=css=

time::before {
  content: '\f017';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 2em;
  line-height: 1.5;
}

簡単に表示されそうなものだけど、プラグインを入れていたとしても表示されなくて困った。

とにかくFont Awesomeは、アイコン画像というより文字として認識した方が理解できるとわかりました。

★FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時）

ついでに、バックスラッシュ(\)を入力する方法です。

英数入力にして

option(alt)キー＋￥

要素::before(::after)のcontentで画像を表示する

Nakkan 2021-09-14 No Comments

css/scss ブログリンク

擬似要素画像を表示

例えば「h1::after { content: ”; }」を使って、h1タイトルの後に画像を表示させたい場合。

h1::after {
           content: '../images/abc.png';
           width: 30px;
           height: 30px;
}

ってやれば、「h1タイトル+30pxに縮小されたabc画像」になるはず…

って、ダメなんかい!!

で、こういう時は教えてもらうしかない。

★CSSのcontentで画像を指定する

=方法1=

h1::after {
    content: url(../img/arrow.png);
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

transformプロパティを使うのは、contentで追加した画像にはサイズを指定することができないため。

なるほど。だから上のように画像が小さくならなかったんだ。

で今回は、背景として画像を指定したかったので次の方法でやりました。

=方法2=

h1::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background: url(../img/arrow.png);
    background-size: 30px 30px;
}

ポイントは、background-sizeを指定することかなぁ。