WordPressで記事を書くときに、引用して書くことって
よくあることだとは思いますが、引用タグ blockquote を、
そのまま使うのもありではありますが、色んなサイトを見て
みると、引用された部分がデザインされているわけですよ。
かっこいいわけですよ。
そこで、はっきりと引用しているとわかりやすくするには
どうしたらよいか、グーグルで調べてみると、CSSでデザインで
できるということがわかったわけです。
だけど、CSSでデザインなんてはっきり言って敷居がかなり
高くなってます。
昔ほんのちょっとかじってはみたけど、すっかり
忘れてます（汗）
いいデザインはないものかと探していたところ、
このサイトに当たりました。
30もの魅力的な引用デザインが有り、印象はどれも
「かっこいい」！
CSSだけでこんなデザインができるんだと思うと、すごいと
同時に、このサイト様のデザインセンスに感謝したいと
思います！
もちろん、どれもいいとは思うのですが、それぞれのサイトの
雰囲気や色などデザインもあるので、私が選んだのはこれ！
サイト全体が黒が多いのでこのデザインに。
ただ、このデザインを使用する際には、FontAwesomeという
WEBアイコンを使用する必要があります。
Fontawesomeとは？
どうやって適用するのか？ってのもくわしく、さるワカさんに
掲載されていました。
このページをじっくり読めば、WEBアイコンをサイト上に
適用させることができます。バージョンもどんどん上がって
いるようで、フリーで使用することができますが、有料になると
アイコンにも幅が広がって、いろんなアイコンを数多く
使うことができるようになります。
WordPress上に引用デザインを適用させる
そのためには、
blockquote {
position: relative;
padding: 7px 16px;
box-sizing: border-box;
font-style: italic;
color: #585858;
border: solid 3px #585858;
}
blockquote:before{
display: inline-block;
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10d”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
}blockquote:after{
display: inline-block;
position: absolute;
bottom: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
vertical-align: middle;
text-align: center;
content: “\f10e”;
font-family: FontAwesome;
background: #585858;
color: #FFF;
font-size: 22px;
font-weight: 900;
}blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
この上記のCSSを、WordPressのメニューから、
外観→CSSの編集 を開いて、
流し込んであげればいいわけです。
これでOK！
と思いきや・・・・・
アイコン部分、つまり ” ダブルクオーテーション部分は
表示されてなかったんです。
アイコンが表示されない
悩みに悩んだ結果、調べてみるとこんなサイトに記載してありました。
引用デザインサンプル集のページ更新日が2018/08/09となって
いるので、全く古いページではないのですが、FontAwesomeの
バージョンがどんどん更新されている状況の中なので、
あり得ることなんだろうとは思いますが、
表示されない理由がわかった
font-family の部分の、
「5 free」がなかったために、すぐに修正したところ、無事
アイコンが表示されるようになりました。
（多分このページでもちゃんと表示されれていると思います）
これでまた一歩、このブログもデザイン化され、カスタマイズ
することができました。
参考にさせていただきましたサイト様には感謝したいと
思います。ありがとうございました。
参考ページ：
[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]
The post WordPress上での引用タグをデザインする first appeared on Constant stream of information.]]>プラグインとの相性問題（？）発見！
こんなみられることのほとんどないこのブログですが、
新バージョンが出ていたのでやっと今、アップデートして
4.8.2から4.8.3にアップデートしました。
たまには更新しないと、ということでスマートフォンからは
投稿してるんだけど、SEO的に設定できなかったりと不便な
部分があるので、パソコンから再編集しないとなあ、と
ログインしたらわかったことなんだけどね。
改めて新規投稿しようとしたら・・・・・
画面が真っ白・・・
頭の中も真っ白・・・・
血の気が引きましたよ、マジで。
冷静になって、ふと頭に浮かんだことといえば、
プラグインの相性問題。
過去にもプラグインの相性が悪いものがあって停止した記憶が
よみがえって・・・・・・
もしかして！！！
思いあたるプラグインは、「Gutenberg」。
これ、まだドラフトらしく、
「公開中のブログには使用しないでください」
って書いてあるほどの開発中のもの。
試しに使ってみようとインストールしてて、使ってみると
書きやすかったもんだから
そのまま使っていたりしてました。
やっぱりそうか・・・・・
受け入れるしあないのか・・・・・
開発中ってことを思い出して、しかたなくGutenbergを
停止しました。
ひとまず正常に新規投稿画面が出るようになりました。
ほっと一息つけた瞬間でした。
（今晩寝られないのかと思ってほんとドキドキものでした）
[amazonjs asin=”4295000795″ locale=”JP” title=”いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)”]
The post wordpress4.8.3の相性問題、一つ発見 first appeared on Constant stream of information.]]>