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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

【2018年春】有料? 無料? wordpressテーマ選び☆ベスト3

【2018年春】有料? 無料? wordpressテーマ選び☆ベスト3

wordpressのテーマ(テンプレート)は山ほどリリースされています。一長一短はありますし、最後は好みでしょうが、私なりの「オススメ有料&無料wordpressテーマ☆ベスト3」を紹介します。201 …

記事の目次を自動生成! 超便利! WordPressプラグイン「Table of Contents Plus」

記事の目次を自動生成! サイドバーにも設置可能! WordPressプラグイン「Table of Contents Plus」

目次1 目次があれば、濃いコンテンツほど有利になる2 「Table of Contents Plus」のインストール方法3 「Table of Contents Plus」の基本&上級者向けの設定方法 …

【2018年最強の商品リンク作成プラグイン爆誕】Rinker(リンカー)&もしものコンボがベスト!

【2018年最強の商品リンク作成プラグイン爆誕】Rinker(リンカー)&もしものコンボがベスト!

「個人ブログで月間100万PV超えするまでの旅」です。月間100万PV超えを目指してインターネットの旅に出ています。旅の費用を稼ぐためにアフィリエイトにも挑戦しつつも苦戦中です。 —&#8 …

【究極!超多機能のプラグイン】「Shortcodes Ultimate」で一級品のサイトに!

【究極!超多機能のプラグイン】「Shortcodes Ultimate」で一級品のサイトに!

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。みなさんは超多機能のプラグイン「Shortcodes Ultimate」を使っていますか? 私はインストールしていません。究極ともいえる便 …

【WassUp Plugin table has reached maximum size!】プラグイン「WassUp」対処法

【WassUp Plugin table has reached maximum size!】プラグイン「WassUp」対処法

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。いきなりwordpressプラグイン「WassUp」からアラート(警告)メールが届き、焦りました。原因と対応を書き残しておきます。 &nb …

関連コンテンツ

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

サイト内検索はこちら

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

「ブルボン最高党」結党! ルマンド、アルフォート、エリーゼ……国民的お菓子メーカー、ブルボン最高!

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


LINE友だち追加

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

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

>>>プロフィール詳細

>>>お問い合わせ

>>>What’s New

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

2019年3月
« 2月    
 123
45678910
11121314151617
18192021222324
25262728293031
スポンサーリンク