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/

wordpressやるなら
エックスサーバーがオススメ!

このサイトはスタート時より「wordpress × エックスサーバー」によって運営しております。他のサーバーとも契約をして別サイトを構築しておりますが、エックスサーバーの使い勝手がイチバンです。セキュリティ、サポートに満足しております。しかも低コストです。利用者が多いので情報がネットに多いことも助かります。

詳細は下記ボタンより

 

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

執筆者:


comment

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

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

関連記事

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

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

【目次】本記事の内容1 目次があれば、濃いコンテンツほど有利になる2 「Table of Contents Plus」のインストール方法3 「Table of Contents Plus」の基本&上級 …

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

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

つなワタリ@捨て身の「プロ無謀家」(@27watari)です。久しぶりにwordpressプラグイン「WassUp」からアラート(警告)メールが届きました。前回から5ヶ月ぶりとなります。 あらためて原 …

WordPressトップページを固定ページ表示に変更して見やすいサイトにする

WordPressトップページを固定ページ表示に変更して見やすいサイトにする

【目次】本記事の内容1 サイトの顔(トップページ)で内容をしっかり説明する必要性2 簡単! ワンクリックで投稿ページをトップに固定できる3 固定ページをトップページ表示させる方法4 ネット情報! エッ …

めざせファン獲得! WordPressプラグイン「FeedBurner FeedSmith Extend」導入

めざせファン獲得! WordPressプラグイン「FeedBurner FeedSmith Extend」導入

【目次】本記事の内容1 導入方法は簡単! 2つの登録&設定だけで完結1.1 まず最初にGoogleのFeedBurnerに登録する1.2 「You must select at least one F …

【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

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

70代のLINEスタンプおじいちゃん auブックパス goodkeyword Google トレンド IT用語辞典 e-Words IT用語辞典バイナリ LINEスタンプを作る SEOチェキ TIME&SPACE デジタル情報マガジン WWEのシナリオ Yahoo!知恵袋 “ サツマイモのコリアンダーソースがけ ” “ シュリンプの焼き串 ” “ ズッキーニとチキンのケバブ ” “ バラエティに富んだオリジナルソース ” 「つなワタリ×LINEスタンプ」宣言 「リラックまん(チョコレート味)」 「リラックマ」をモチーフにした和菓子 お酒が飲めない、飲まない日本の有名人 アクセスSEO対策ツールズ エックスサーバー(XSERVER)を装った詐欺メール オススメ有料&無料wordpressテーマ コピー防止は、さほど防止できない サタン サブドメインとサブディレクトリ ネットショップ/セール情報 パワーランクチェックツール ビジネスホテル「ドーミーイン」 ポンポコラーメン マヌカハニー好きな有名人 ルッソ兄弟 七ヶ宿ダム湖カレー 大仏三姉妹 岩本三千代 愛知県西三河地方 撮影機材 有料wordpressテーマ 格安予約サイト『一休.com』 楽天市場ダイヤモンドジュエリー「Ladia(ラディア)」 源流ポッチョン 無料wordpressテーマ 無料漫画サービス 超お得なティファニー風ダイヤモンドジュエリー 道の駅七ヶ宿 電脳マヴォ
2020年9月
« 8月    
 123456
78910111213
14151617181920
21222324252627
282930  
スポンサーリンク