『賢威7』画像上への
Webフォントテキスト表示に挑戦!!

 

こんにちは。賢威7を扱うの難しいですね。

サラリーマン慎仁です。

 

今回は、以前の記事で書いた

画像上へのWebフォントテキスト表示

に挑戦しました。

 

挑戦結果は・・・

無事成功!!!

 

この記事で、実現に至った苦労や、

その実現方法についても記載したいと思います。

 

『賢威7』で画像上へのテキスト表示を実現するための苦労って!?

 

記事冒頭の画像のテキストを拡大して見てください!

拡大してもきれいな文字ですよ。

 

Webフォントの利点を活かして、

インターネットを介して配信された文字を使っています。

 

画像だと拡大すると文字がガタガタですが、

Webフォントだと拡大してもきれいなんです。

 

でも、

画像へテキスト表示するのに、苦労しました。

 

元々、HTMLやCSSの知識は多くないので、

 

「賢威7がどういうHTMLやCSSになっているか」

 

それを理解するのは、大変です。

 

実際、未だにほとんど理解できていませんし。

 

それでも、なんとか実現しようといろいろと調べました。

  • 賢威サポートページ
  • 賢威7ユーザ記事

 

調べては見たのですが、

『賢威7』だけではなく、賢威で実現している人の記事が

なかなか見つからず、賢威サポートページのQ&Aを見てもそれっぽいやりとりはなく・・・。

 

「実現している人、あまりいないのかなぁ」

 

と、最後は、

同じことを実現している人の記事を探すのを諦めました。

 

そのような中でも、

賢威以外で画像上のテキスト表示が実現できている記事、

『賢威7』で出来ている他の事の記事、

これらを参考に、

なんとか実現したかったことの8割は出来たでしょう。

 

『賢威7』で画像上へのWebフォントテキスト表示の実現方法

 

それでは、具体的な実現方法を説明しましょう。

 

前提条件と今回編集したファイル群

まずは、私の『賢威7』のブログ環境です。

下記、条件と同等である前提として、これから実現方法を説明していきます。

  1. 『賢威7』WordPress・コーポレート版 BLUEのテンプレート使用
  2. 『賢威7』子テーマ使用

 

但し、別のテンプレートでも同等だと思っています。

子テーマを使用していないブログであれば、2も不要ですので、

賢威7のWordPress版で有れば、実現可能でしょう。

 

そして、今回編集したファイルは下記3ファイルです。

  • base.css・・・レイアウトを管理するためのCSSファイル
  • rwd.css・・・モバイル用のレイアウトを管理するためのCSSファイル
  • 投稿記事

 

今回は、スタイルシートの設定が主。

 

つまり、

スタイルシートで専用の設定を作っておけば、

他記事でも転用可能というわけです。

 

転用可能は、うれしいですよね。

 

実を言うと、

本当は、もう一工夫が欲しいところなのですが、

どう設定したら良いかわからなかったので、

まずは、当面この設定で転用していこうと思っています。

 

それでは、実際の投稿記事の書き方から。

 

投稿記事の書き方


<div class="image-text50">
  <img src="〇〇.jpg" />
  

テキストを入れてください!

</div>

全然、難しくないですよね。

余分に3行ほど書くだけなので、すぐにでも出来てしまう記事の書き方ですよね。

それでは、引き続きCSSファイルの設定を説明します。

base.css, rwd.css

〇base.css

/* 全体の枠(親要素) */
.main-body .image-text50 {
     position: relative;	/*相対配置*/
     padding:0;
}
 
/* 重ねる文字(子要素) */
.main-body .image-text50 > p {
     position: absolute;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%,-50%);
     -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
     margin:0;
     padding:0;
     /*以下装飾*/
     color: white;
     background: rgba(0, 0, 0, 0.8); /*背景色を黒,不透明度80%に*/
     line-height:1.5em;
     font-size: 1.5em;
     text-align:center;
     font-family: '丸フォーク M',sans-serif;
}

〇rwd.css

@media only screen and (max-width : 640px){
/* 全体の枠(親要素) */
.main-body .image-text50 {
     position: relative;	/*相対配置*/
     padding:0;
}
 
/* 重ねる文字(子要素) */
.main-body .image-text50 > p {
     position: absolute;
     top: 50%;
     left: 50%;
     -ms-transform: translate(-50%,-50%);
     -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
     margin:0;
     padding:0;
     /*以下装飾*/
     color: white;
     background: rgba(0, 0, 0, 0.8); /*背景色を黒,不透明度80%に*/
     /*background: #74c1f8;*/
     /*padding:0 2px;*/
     line-height:1.2em; /*<-1.5em*/
     font-size: 1.2em; /*<-1.5em*/
	 text-align:center;
     font-family: '丸フォーク M',sans-serif;
}
}

 

このcssは今回、サルワカさんのサイト記事を参考にしました。

HTMLやCSSについて、どの記事も非常にわかりやすく説明されていて、

いつも参考にさせて頂いております。

画像の上におしゃれに文字やボタンをのせる方法(CSS)

サルワカさん、ありがとうございました。

 

気を付けるべき点は、賢威として必要な、”.main-body ”を忘れないこと。

あとは、テキストを中央表示するための、”top”、”left”、”translate”などの設定が必要です。

それ以外は、”font-family:”でWebフォントを呼び出すだけ。

 

今回使用したフォントは、”丸フォーク M”。

記事のタイトルと同じフォントにしてみました。

 

以上の設定で実現出来たものが下記です。

 

テキストを入れてください!

 

同じフォントやサイズ、カラーを使う分には、

CSSの設定変更は不要です。

変えたい場合は、改めて別のCSS設定を作ってください。

その手間が大変では無ければ、記事毎の設定変更も容易です。

 

いかがでしたでしょうか?

 

『賢威7』のあなたは、ぜひ使ってみてください。

『賢威7』ではないあなたも、実現方法の考え方は同じです。

この記事を応用し実現してみてください。

 

今回は、このへんで。

 

Webフォントの使い方について、

改めて確認したいあなたは下記記事を確認ください。

↓↓↓

Webフォント!?レンタルサーバー契約者がすぐ使えるサービス!

 

最後まで読んで頂きありがとうございました。
ぜひ最後にぽちっとして頂けるとまたがんばれます。
↓↓↓

にほんブログ村 小遣いブログ サラリーマンのお小遣い稼ぎへ

応援、アドバイス、苦情、不明点、問い合わせなど、
いつでもメッセージをお待ちしています。

↓↓↓

お問い合わせ