質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML

    11846questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    9121questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7761questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ワードプレスで、固定ページの編集から文章を投稿すると真ん中よりになってしまいます

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 239

yoshitake26

score 1

初心者ですみません

ワードプレスでブログを始めたばかりのものです。

メニューを作成し、固定ページの編集から文章を投稿しますと
文章が真ん中から投稿されてしまいます。

初めての方へ      B!0Like0 ツイートPocket
EDIT  

これで、初めての方への下から文章が始まればいいのですがB!0の下あたりから文章が始まってしまいます

普通に初めての方への下から文章を投稿したいのですがどうすればいいでしょうか?

HTMLの問題なのかどうか
初心者なのでちょっとわからなくて。

色々調べてみたのですが解決できず。
イメージ説明
どなたか助けていただけると嬉しいです。

ちなみにテーマは、
Twenty Seventeenです。 
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshitake26

    2019/02/06 19:15

    たびたびありがとうございます(^.^)

    プラグインは入れてるのですが、それは
    無効にしてみても、変わらなかったので
    関係なさそうでした。

    すみません。
    上記の画像は、投稿ページの画像ですね。
    自分のは、固定ページのやつなんですよね。

    固定ページのだと、文章があそこから
    始まってしまいます。
    Twenty Seventeenが元々そうなのかも
    しれませんね。
    もしかしたらあれが左寄せの状態なのかもしれません。

    CSSのタグも入れてみますね。

    キャンセル

  • yoshitake26

    2019/02/06 19:35

    CHERRYさんから、回答をいただきました。
    aconnectさんも、ご親切にありがとう
    ございました。mts10806さんも。
    助かりました(^.^)

    キャンセル

  • mts10806

    2019/02/06 19:55

    解決されたようで何よりです

    キャンセル

回答 2

checkベストアンサー

+3

自己解決されたよう(?)ですが...
テーマ名がわかったので、ちょっとだけ書いておきます。

この辺りは、基本的に HTML と CSS でのレイアウトの話なので、WordPress に限らず Web サイト制作の基本部分になります。


お使いのテーマは、twentyseventeen ということなので、Webブラウザで開発者ツールで HTML ソースをみると <article id="xxxx">〜</article> で、囲まれた部分なので、 twentyseventeen テーマの中で探してみると、固定ページを表示しているテンプレートの内容は、下記になっています。

wp-content/themes/twentyseventeen/template-parts/page/content-page.php に

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <header class="entry-header">
                <?php the_title( '<h1 class="/">', '</h1>' ); ?>
                <?php twentyseventeen_edit_link( get_the_ID() ); ?>
        </header><!-- .entry-header -->

        <div class="entry-content">
                <?php
                        the_content();

                        wp_link_pages(
                                array(
                                        'before' => '<div class="page-links">' . __( 'Pages:', 'twentysevent
een' ),
                                        'after'  => '</div>',
                                )
                        );
                        ?>
        </div><!-- .entry-content -->

</article><!-- #post-## -->


が見つかります。

HTMLの構造としては、

the_title() を実行してタイトルを表示している <header class="entry-header">〜</header> 部分
と 
the_content() を実行実行して本文を表示している <div class="entry-content">〜</div> 部分

の大きく2つに分かれています。

次に CSSファイル ( wp-content/themes/twentyseventeen/style.css )で、HTML のタグに設定されている class名を探してみると 3848 行目あたりに下記の定義があります。

    body:not(.has-sidebar):not(.page-one-column) .page-header,
    body.has-sidebar.error404 #primary .page-header,
    body.page-two-column:not(.archive) #primary .entry-header,
    body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
        float: left;
        width: 36%;
    }

    .blog:not(.has-sidebar) #primary article,
    .archive:not(.page-one-column):not(.has-sidebar) #primary article,
    .search:not(.has-sidebar) #primary article,
    .error404:not(.has-sidebar) #primary .page-content,
    .error404.has-sidebar #primary .page-content,
    body.page-two-column:not(.archive) #primary .entry-content,
    body.page-two-column #comments {
        float: right;
        width: 58%;
    }


CSSの定義は、

.entry-header は、左寄せの 36% 幅
.entry-content は、右寄せの 58% 幅

ということで、左右2カラムで、表示するようになっているようです。


上記の HTML と CSS で、タイトルを表示している .entry-header クラスは、左側に 本文を表示する .entry-content クラスは、右側に表示するように指示してレイアウトを決めていますので、CSS を好みに合わせて変更すれば、レイアウトは変更可能です。

たとえば、デザイン的に良いかは別にして...

float: left;
width: 36%;

を 

float: none;
width: 90%;


float: right;
width: 58%;

float: none;
width: 90%;


にするだけで、 フラットな1カラムになります。

イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/06 19:30 編集

    CHERRYさん、回答ありがとうございます。
    まさにこれが回答なのですね。
    初心者の自分には、難しい内容でしたが
    納得です。
    ここには、ほんと優秀な技術者の方が
    いるんだなあと、改めて思いました。
    ありがとうございました(^.^)

    キャンセル

  • 2019/02/06 19:39 編集

    正直な話、 WordPress の標準テンプレートの中でも twentyseventeen は、かなり複雑化していて、自由にカスタマイズしようとすると結構大変です。


    WordPress の場合、いろいろなテンプレートが配布されているので、デザインが好みで、構造が分かりやすそうなテンプレートを探して使ってみるのが良いと思います。


    もし、HTML や CSS で自在に Webサイトを作れる方 や HTML と CSS で作成された 既存のWeb サイトのデザインを真似て、 WordPress のテーマを作成するということであれば、 WordPress で必要な骨組みだけが用意されている「スターターテーマ」や「ブランクテーマ」と言われているテーマから 自作するのが良いかもしれません。

    キャンセル

  • 2019/02/06 19:58

    CHERRYさん
    度々のご回答ありがとうございます(^_^)
    なるほどですね。
    最初からあったので、初心者向けなのかと
    思いきやそうではないのですね。
    もっと、使いやすいテーマを探してみたい
    と思います。
    自分としては、HTMLやCSSは、ハードルが
    高いので、SEO対策がよく、使いやすい無料のテーマをまずは捜してみようかと思います。
    すぐに回答できるあたりがすごいですね。
    ご親切にありがとうございます。
    助かりました(^_^)

    キャンセル

+2

CHERRY様が詳しく書いてくださっているので、必要ないかもですが、、、、

このテーマはデフォルトが2カラムなので、アップした固定ページの状態で上カスタマイズを押すと「テーマオプション」が出てきます。
(固定ページからカスタマイズを押さないと、出てこないみたいなので注意です)

そこで1カラムか2カラム選ぶことができます。

SNSのプラグイン「WP Social Bookmarking Light」だと思うのですが、これも設定で場所変えられますし、cssも細かく指定できるので気になれば編集してみてください。

ただプラグインの更新で2カラムに戻ることもある様なので、CHERRY様の様にcssをそもそも変えてあげた方がいいかもです汗

頑張ってくださいね!
では

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/06 19:42

    aconnectさん
    ご回答ありがとうございます(^.^)
    なるほどですね。
    1カラムになりますね。
    これで、解決になりますね。
    自分からしたら、aconnectさんは
    初心者じゃないですねw
    ご親切にありがとうございます。
    助かりました(^_^)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    11846questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • WordPress

    9121questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7761questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • トップ
  • HTMLに関する質問
  • ワードプレスで、固定ページの編集から文章を投稿すると真ん中よりになってしまいます