• 解決済 MKnov02

    (@mknov02)


    Twenty Twelveのテンプレートを使っています。

    初歩的な質問で申し訳ないのですが、アイキャッチ画像を、中央揃えにするにはどうすればよろしいのでしょうか?

    2時間ほどネットで調べていますが、答えが見つかりません。
    分かるかたがいらっしゃいましたら、どうぞ宜しくお願いいたします。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • gblsm

    (@gblsm)

    Twenty Twelve テーマの設定メニューには中央揃えする項目がないので、子テーマを作成して中央揃えする為のスタイル指定を追加するのがよいと思います。

    1. 子テーマを作成する
    2. アイキャッチ画像のHTMLタグに付けられているクラスを確かめる
    3. そのクラスに対して中央揃えするスタイル指定を選ぶ
    4. 子テーマのスタイルシートに、そのスタイル指定を追加する

    途中は省略しますが追加するスタイルは例えば次のように。

    #content .entry-header .attachment-post-thumbnail
    {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    トピック投稿者 MKnov02

    (@mknov02)

    gblsm様

    ご丁寧な返信ありがとうございます。
    初心者なもので、「子テーマの作成」に四苦八苦しています。

    解決できるかは、もう少し時間がかかりそうです。。

    取り急ぎ、御礼まで。

    gblsm

    (@gblsm)

    こちらのWebサイトが参考になると思います。
    Twenty Twelveの子テーマを作る

    トピック投稿者 MKnov02

    (@mknov02)

    gblsm様

    ご丁寧にありがとうございます。
    早速、確認いたしまして、またお返事させてください。

    ありがとうございます。

    トピック投稿者 MKnov02

    (@mknov02)

    gblsm様

    お世話になっています。
    試行錯誤して、やっと子テーマ作成できました。。涙

    一つ質問なのですが、子テーマを有効化すると、親テーマで編集したものが消えてしまうのでしょうか?

    全部ではないのですが、カテゴリーや、トップ画像などが引き継がれていないようです。。
    もしご存知でしたら、ご教授いただけると幸いです。

    gblsm

    (@gblsm)

    子テーマの作り方を間違えていなければ、カテゴリーやトップ画像などは親テーマを有効にしてある時と同じように表示されるはずです。

    子テーマが正しく作られているか確かめてください。例えば、親テーマとまったく同じに表示する子テーマの場合は、style.cssファイル一つだけが子テーマのフォルダ内にあり、そのstyle.cssの中身はTwenty Twelveの子テーマを作る(リンク先)に示されているサンプルのstyle.cssそのままです。

    トピック投稿者 MKnov02

    (@mknov02)

    gblsm様

    ありがとうございます!やっとできました!!
    やはりどうやら、トップ画像とメニューは再設定が必要と言う事でした。。

    http://algorhythnn.jp/blg/2014/03/10/wordpress-child-thema/

    次ですが、

    2.アイキャッチ画像のHTMLタグに付けられているクラスを確かめる
    これはいろいろ調べてみたのですが、「content.php」をいじっている方がいたり、「functions.php」だったり、どちらのクラスを選べばよいか、どうやって確かめればよいのでしょうか?!

    3.そのクラスに対して中央揃えするスタイル指定を選ぶ
    これは、指定した上記の場所を、教えていただいたタグの「content .entry-header .attachment-post-thumbnail」の部分に入れるということですよね?!

    恥ずかしいほど当たり前のような質問だったらすいません(>_<)
    お時間ある時に宜しくお願いいたします。

    gblsm

    (@gblsm)

    「2.アイキャッチ画像のHTMLタグに付けられているクラスを確かめる」というのは、投稿ページを表示させて(管理画面ではありません)HTMLソースを見て確かめるという方法が簡単ですよ。もちろん content.php や functions.php 等のテンプレートを読む方法でも確かめられますが。

    例えば <img> タグに class="何々" という形でクラスが付けられている筈です。スタイル指定するときにクラスを限定して指定しないと、アイキャッチ画像だけでなくimgタグ全部が中央揃えされてしまうので、アイキャッチ画像のクラスを確かめておこうという訳です。

    トピック投稿者 MKnov02

    (@mknov02)

    gblsm様

    ありがとうございます。
    やっと「ソースの表示」というが分かり、ソースの表示が出来たのですが、恥ずかしながら、コードが一切読めません(>_<)

    投稿画面にアイキャッチ画像のみ表示させ、「ソースの表示」と言うのをやってみたのですが、例えば、「img」で検索をかけると、いろいろ出てきますし、「thumbnail」で検索をかけても数個出てきて、「class」というワードが見当たりません。。(T_T)

    どれが、アイキャッチ画像のタグかということは、どうやって調べるのでしょうか?

    本当にすいません。。。(>_<)

    gblsm

    (@gblsm)

    管理画面ではなくて(←これがポイント)、ご自身のWordPressサイトの投稿ページ(アイキャッチ画像が設定されている投稿)をWebブラウザで表示します。そしてWebブラウザのメニューを使ってHTMLソースを見ます。するとソースの中に、アイキャッチ画像のファイル名が出てくる筈です。例えば eye-catch.png という画像ファイルをアップロードしてアイキャッチ画像に指定した場合、次のようなHTMLタグがソースに出てきます。

    <img width="幅" height="高さ" src="http://サイト名/wordpress/wp-content/uploads/eye-catch.png" class="attachment-post-thumbnail wp-post-image" alt="eye-catch">

    トピック投稿者 MKnov02

    (@mknov02)

    gblsm様

    ありがとうございます。

    実際にテストで投稿してみて、ツールバーの表示から、「ソースの表示」をして見ることができました!

    上記の部分と同じような部分を発見したのですが、クラスを指定するとは、「#content .entry-header .attachment-post-thumbnail」の部分を、「attachment-post-thumbnail wp-post-image」にするということでよろしいでしょうか?!

    本当にすいません(>_<)

    gblsm

    (@gblsm)

    MKnov02さん

    これまでコメントさせて頂いた文章を、最初から落ち着いて読み返して下さいませんか。
    クラスを指定する、ではなく「クラスに対してスタイルを指定する」です。

    「どのクラスに対して指定するか」と「どんなスタイルを指定するか」を決めたら、その内容を、子テーマの style.css ファイルに書き足します。
    (答えを言ってしまうと)最初のコメントに示したものをそのまま、子テーマの style.css に書き足して、どのように表示が変わるか確かめてみるとよいでしょう。

    なお、「スタイルシートの書き方」は WordPress に特有の話ではないので、一般的にどのように書くものなのかはご自身で調べてくださいね。

    トピック投稿者 MKnov02

    (@mknov02)

    はい!調べてみます。
    いろいろとご丁寧にありがとうございました。

    本当に何も分からない初心者に最後までお付き合いいただき、心から感謝いたします。

    gblsm

    (@gblsm)

    MKnov02さん、スタイルシートの基礎知識は例えば下記Webサイトが参考になると思います。「セレクタ」が、どのクラスに対して…に相当します。
    とほほのスタイルシート入門(基礎知識)

    トピック投稿者 MKnov02

    (@mknov02)

    gblsm様

    お返事遅くなり申し訳ございません。
    上記のサイト情報ありがとうございます。

    早速やってみようと思います!
    ありがとうございました。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「アイキャッチ画像について」には新たに返信することはできません。