「CSS」カテゴリーアーカイブ

WordPressで記事タイトル名が大文字になってしまいます

記事タイトルのちょいとしたカスタマイズをお伝えします。

WordPressでテンプレートとかを使うと、記事タイトル名が大文字になってしまうことがあります。

509

私もTwenty Fourteenという既存のテーマを使っていますが、英字が大文字になっています。

WORDPRESSって。

502

 

しかし、「投稿の編集」で確認してみると、

WordPressって書いてるのに・・・

 

503

 

そう、これは、CSSのtext-transformプロパティが原因なのです。

初期設定では

text-transformプロパティがuppercaseと設定されているはずです。

uppercase

uppercaseは、半角文字をすべて大文字で表示する、という意味になります。

例えば、「WordPress」と書いても

「WORDPRESS」となります。

 

他には、

lowercase

lowercaseは、半角文字をすべて小文字で表示します。

「WordPress」と書いても、「wordpress」と表示されます。

capitalize

capitalizeは、半角文字の1文字目を大文字で表示します。

「WordPress」と書いても、「Wordpress」と表示されます。

none

noneは、テキストを元の状態のまま表示します。

「WordPress」と書いたら、そのまま「WordPress」と表示されます。

 

ですので、元のWordPressと表示させたいので、

text-transform:none;

と変更します。

 

まずは、「外観」-「テーマの編集」をクリックします。

501

 

そして、

.entry-header{

内の

txet-transform

を見つけます。

504

※Google Chromeの場合は、右上の三本線マーク([Google Chromeの設定]ボタン)-[検索]で、text-transformを検索するとよいでしょう。

508

そして、

text-transform:uppercase;

text-transform:none;

に変更します。

505

変更したら、下の方にある「ファイルを更新」をクリックして、更新します。
(更新をする前に、メモ帳などにCSSソースをコピーしておくことをオススメいたします。)

506

 

ブログを見てみると、(F5キーを押して最新の状態に更新します。)

元々書いていたWordPressという表示になります!!

 

507

 

 

記事タイトルが気になっている方は、どうぞこのように修正してみるといいかな、と思います。

 

background-imageで背景画像が表示されない

背景画像を background-image で表示させようとする時、画像がうまく表示されないことがあります。

その時は、以下のいずれかだと思います。

・画像のファイル名が間違っている
・画像の入っているフォルダ名が間違っている
・画像の相対ファイルパスが間違っている
・画像の絶対ファイルパスが間違っている
・cssファイルを読み込めてない

/home  ホーム(ここからcssと画像を読み込みます)

/images  画像が入っているフォルダ
/css   cssファイルがあるフォルダ

上記のような構造の場合ですが、
(ここで問題は、CSSフォルダを作って、その中にCSSファイルを置いた場合、ということです)

例えば、index.html から /css フォルダに置いてある
style.css ファイルをリンクする時、
(<link rel=”stylesheet” href=”css/style.css”>といった感じで)

× background-image: url(“images/sky.jpg”);

といった、 index.html をベースにファイルパスを書くと間違いです。

○ background-image: url(“../images/sky.jpg”);

style.css ファイルから、画像の相対パスを書かなくてはいけません。

 

リンクではなく、
<head>内の<style></style>で記述する場合は、

background-image: url(“images/sky.jpg”);

で、OKですので。