wordpressプラグイン活用法

【WordPressの画像キャプションの配置と文字色を変える】style.cssファイルの編集は意外と簡単!

投稿日:

Pocket

【WordPressの画像キャプションの配置と文字色を変える】style.cssファイルの編集は意外と簡単!

初心者でもできる! WordPressのcss編集でカスタマイズ

Googleさんの未来予測をした結果、画像にキャプションを付けることにしました。

関連記事:Google未来予想→今後は「キャプション」の価値が高まっていくかも?

画像キャプションを付けたのはいいんですが、基本の画像キャプションのスタイルが気に入りません。

なんとか変更するのは、css編集でカスタマイズするしかありません。

いままではここで思考停止していました。

 

しかし!

 

ここで挑戦していかないと新しい扉は開かれません。

やってみるとcss編集でカスタマイズするって、意外と簡単でした。

ここでは備忘録としてその手順を残しておきます。

 

 



 

 

 

css編集で画像キャプションをカスタマイズする手順

まず私は「STINGER8」を親テーマで使っています。

画像カスタマイズに関しては、多分、「STINGER8」以外でも共通だと思います。

ポイントとなる画像を順を追って載せていますので、その手順でやれば変更できるはずです。

終わってみれば、「こんなに簡単にできちゃうんだ!」って感じです。

では、スタートです。

 

(1)外観→テーマの編集へ進む

まずは外観→テーマの編集へと進み、「css編集画面」へ行きます。

【WordPressの画像キャプションの配置と文字色を変える】style.cssファイルの編集は意外と簡単!

いきなり「css編集画面」でテーマを編集するのは絶対に避けてください。後述していますが、事前にコピペするなりして作業をしてください。プログラミングが狂うと、最悪、復活できなくなります

 

 

(2)編集するテーマを選ぶ

編集するテーマを選びます。私の場合、普段は「STINGER8 Child」ですが、親テーマの「STINGER8」を選択します。

そうすると、直下に「style.css」が現れます。

この「style.css」を編集します。

【WordPressの画像キャプションの配置と文字色を変える】style.cssファイルの編集は意外と簡単!

基本、wordpressをカスタマイズする場合は、この「style.css」を編集することになります。cssは“cascating style sheets” の頭文字をとったもので、サイトの見栄えを整える役割をになっています

 

 

 

(3)キャプションを中央揃えから左寄せに変更する

まず「/*画像 */」で括られた部分にある「text-align: center;」を探します。見つけたら、「centerをleft」に置き換えます。これで左寄せに変更となります。

 

【WordPressの画像キャプションの配置と文字色を変える】style.cssファイルの編集は意外と簡単!

「STINGER8」では1108行目に登場します。「align」というのはコンテンツの位置を指示するプロパティです。※プロパティとは属性を示す用語のことです

 

 

 

(4)キャプションの色を黒に変更する

キャプション色が指示されている「color: #ccc;」を探します。見つけたら、「#cccを#000000」に置き換えます。これで文字が黒に変更となります。

 

【WordPressの画像キャプションの配置と文字色を変える】style.cssファイルの編集は意外と簡単!

「STINGER8」では400行目に登場します。#cccは灰色、#000000は黒です。#000000は#000の指示でもオッケーのようです。昔からそうだったでしょうか。私もあらためて#000に修正しておきました

 

 

 

(5)「ファイルの更新」ボタンを押して完了

(3)(4)を変更したら、「ファイルの更新」ボタンを押して完了です。あとはちゃんと動作しているか確認してください。

 

【WordPressの画像キャプションの配置と文字色を変える】style.cssファイルの編集は意外と簡単!

ファイルに問題点がなければ、更新のボタンを押すと「ファイルの編集に成功しました。」が表示されます。あとは実際にアクセスして確かめて完了となります

 

ちなみに作業中での表示は、キャプションは中央揃えのままです。公開した時点で、修正部分(左寄せなど)が反映されます。下書きの時点のエディターを見て不安にならないでください。

 

 

 

(作業上の注意点)必ずファイルの内容はコピペしておく

作業上、失敗する可能性もあります。失敗しても元に戻せるように編集前のcssはコピペして保存しておいてください。

そうすれば元に戻すことができます。失敗も怖くありません。

どうですか?

私的には思った以上に簡単でした。

cssを触るのはちょっと怖いと思いますが、やってみるのも悪くありません。ちょっと成長した気分になります。

では、みなさんもよかったら画像キャプションをやってみてください。

今回にも画像キャプション付けてます。なかなかキャプション付けってハードル高いですが、記事にメリハリもつくのでオススメです。

じゃ!

 

 

<最強のアクセスアップ支援ツール紹介>
SEOツールラボの「検索順位チェックツールGRC」は、アクセスアップ支援の強力ツールです。ネットで稼ごうとしている人は利用必須といわれています。さまざまなキーワードのランキングを自動チェックしてくれます。無料から利用可能です。まずは使ってみてください(無料版は項目数に制限アリ)。気に入ったらライセンス購入すればいいだけです。料金もかなり安いです。本気でアフィリエイトするつもりならば「スタンダードプラン」がオススメです。詳しくは下記からサイトへアクセスしてください。

<最強のアクセスアップ支援ツール>SEOツールラボの「検索順位チェックツールGRC」
http://seopro.jp/

の 記 事 を 書 い た 人

つなワタリ

つなワタリプロフ画像

宮城県仙台市出身。夢を持って上京後、さまざまな活動を経て編集者へ。人が好きで、好奇心が強く、誰かに何かを伝えるのが好きなキャラを活かす形で仕事漬けの日々を過ごし、締切に追われながら、気がつけば四半世紀以上もの時間が経過してしまったロートル。仕事と並行しながらアートイベントを立ち上げ、多様な表現関連の企画にも携わる。同時に杉並エリア中心に地域活動も続けて20年ほどとなる。一旦はバーンアウトし、心身共に低空飛行が続いているが、フリーでエディトリアル・アーティスト「プロ無謀家@つなワタリ」として自分の生き様を模索中。詳しいプロフィールや仕事キャリアなどはこちら


LINEで気軽に問い合わせする
メールで問い合わせする
会社サイトはこちら



-wordpressプラグイン活用法
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

掲示板を作るプラグイン「bbpress」設置に挑戦

掲示板を作るプラグイン「bbpress」設置に挑戦

「個人ブログで月間100万PV超えするまでの旅(004)」です。 発信は大事だとお題目を唱えても、実践が伴っていないのでは説得力がない。だから「個人ブログで月間100万PV超え」を目指してインターネッ …

WordPressのカテゴリーの位置(順番)を変更する便利プラグイン「Category Order」

WordPressのカテゴリーの位置(順番)を変更する便利プラグイン「Category Order」

目次1 サイトマップを見たら、優先順位がグチャグチャだった2 「Category Order and Taxonomy Terms Order」で簡単カテゴリー移動2.1 「Category Orde …

一瞬で記事を複製する! WordPressプラグイン「Duplicate Post」

一瞬で記事を複製する! WordPressプラグイン「Duplicate Post」

目次1 記事ページと固定ページが複製可能! 作業が一気に効率化する2 複製の方法 記事ページと固定ページが複製可能! 作業が一気に効率化する WordPressプラグイン「Duplicate Post …

【リンク切れは定期チェックが必要】ツール、プラグインなど3つの確認方法

【リンク切れは定期チェックが必要】ツール、プラグインなど3つの確認方法

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。サイトのリンク切れはチェックしていますでしょうか? Googleさんは「リンク切れは検索順位に影響はない」とアナウンスしていますが、やはり …

リアルタイムプレビューが可能! WordPressプラグイン「Inline Preview」

リアルタイムプレビューが可能! 超便利なWordPressプラグイン「Inline Preview」

記事の編集・プレビューが同時進行で可能! あまりにも便利すぎて感動的! WordPressプラグイン「Inline Preview」は記事の編集・プレビューが同時進行で可能にするプラグインです。 これ …

関連コンテンツ

サイト内検索はこちらから↓

サイト内検索はこちら

80%オフも! 日替わり! 売り切れ次第終了! 掘り出し物ザクザク! 最新Amazonセール情報 ↓

つなワタリです。どうぞよろしくお願いいたします。 


LINE友だち追加

肩書きは「エディトリアル・アーティスト」&捨て身の高熱量「プロ無謀家」。集めて、編んで、外に発信することが生業。文章、映像、写真、イベント、コミュニケーションなどを活用しながら編み、考えていることを掘り下げて伝えていきたいと思っています。また、自分に負荷を与えるのが好きな性質を利用して、「プロ無謀家」として獣道を切り開きたいと思っています。

サイトタイトルの『インテリジェンス・ライフ』は「intelligence for good life」の略。生きた情報(インフォメーションではなくインテリジェンス)を大切にしたいという願望からつけました。

>>>プロフィール詳細

>>>お問い合わせ

>>>What’s New

>>>ウィッシュ☆ネットワーク|相談・共有・情報交換掲示板

2019年1月
« 12月    
 123456
78910111213
14151617181920
21222324252627
28293031  
スポンサーリンク