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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

HTML

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

CSS

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

Q&A

解決済

2回答

165閲覧

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

yoshitake26

総合スコア13

WordPress

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/01/28 04:12

編集2019/02/06 10:16

初心者ですみません

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

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

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

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/01/28 04:31

「WordPress」をタグに追加してください。html知識だけで対応できることの方が少なかったりします。
m.ts10806

2019/01/28 04:32

あと使っているテーマとか実際の表示の画面キャプチャとか
CHERRY

2019/01/29 03:39 編集

画面の表示は、お使いのテーマのテンプレートファイルで指定されたレイアウトに依存しますので、お使いのテーマを記載していただけないでしょうか?
yoshitake26

2019/02/01 06:38

遅くなりすみません。 テーマに関しては、初期のまま何も変えていないので 1番最初のままのやつですよ。 テーマを変えると解決するんでしょうか?
退会済みユーザー

退会済みユーザー

2019/02/05 12:28 編集

初めまして! 私も初心者なので、何が問題なのかもわからないですよね。 まず先の方も述べているように、使用しているテーマは明確にわかりますか? 管理画面 >外観 >テーマ に行くと”有効”となっているものがあるはずです。(Twenty Seventeenなど) Wordpresはテーマによって仕様が全く異なってくるので最低限分かると解決しやすいと思います。 また可能であればソースを見れた方が、皆さんすぐわかるかと思いますので問題のURLや 右クリックで出る「要素検証」などキャプチャするとよりいいかと思います。 頑張ってください。
yoshitake26

2019/02/06 09:29

aconnectさん ありがとうございます。 テーマはTwenty Seventeenでした。 まだ回答は得られていないのですが 色々な方の追記を拝見させていただいて テーマのカスタマイズをすればいいのかな というのが、なんとなく見えてきました。 それか、思いきってテーマを変えてみるとか。CSSの問題かとも思ったのですが なんとなく原因が見えてきたのも自分に とっては大きな一歩でした。 ありがとうございます(^.^)
退会済みユーザー

退会済みユーザー

2019/02/06 09:59 編集

http://aconnect.org/wp-content/themes/newcnt/images/SnapCrab_NoName_2019-2-6_18-47-16_No-00.png 大きな一歩よかったですね:) あとできるだけ詳しく書いた方が回答もらえると思うので、タグにcssも追加して SNSのプラグインがあれば名前を記載、テーマのverの分かるといいかもです。 上記がtwenty seventeenのデフォルトの設定で投稿した場合の画像なのですが、 ぷらぐいんでjetpackか何か入れられていますか? SNSのボタンがあるので何か入れてるかと思ったのですが、、、 私も詳しくはないので、ソース見れると多少は分かるのですが、、、 プラグインであれば設定、他でもcssで行けるかとは思うのですが 自分もWordpresなのである程度同じ環境に持っていけるので、私がわかる範囲であればご協力いたします;) 他の方であれば見ただけでわかるかも汗 すみません
yoshitake26

2019/02/06 10:15

たびたびありがとうございます(^.^) プラグインは入れてるのですが、それは 無効にしてみても、変わらなかったので 関係なさそうでした。 すみません。 上記の画像は、投稿ページの画像ですね。 自分のは、固定ページのやつなんですよね。 固定ページのだと、文章があそこから 始まってしまいます。 Twenty Seventeenが元々そうなのかも しれませんね。 もしかしたらあれが左寄せの状態なのかもしれません。 CSSのタグも入れてみますね。
yoshitake26

2019/02/06 10:35

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

2019/02/06 10:55

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

回答2

0

ベストアンサー

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

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


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

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

PHP

1<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 2 3 <header class="entry-header"> 4 <?php the_title( '<h1 class="/">', '</h1>' ); ?> 5 <?php twentyseventeen_edit_link( get_the_ID() ); ?> 6 </header><!-- .entry-header --> 7 8 <div class="entry-content"> 9 <?php 10 the_content(); 11 12 wp_link_pages( 13 array( 14 'before' => '<div class="page-links">' . __( 'Pages:', 'twentysevent 15een' ), 16 'after' => '</div>', 17 ) 18 ); 19 ?> 20 </div><!-- .entry-content --> 21 22</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 行目あたりに下記の定義があります。

CSS

1 body:not(.has-sidebar):not(.page-one-column) .page-header, 2 body.has-sidebar.error404 #primary .page-header, 3 body.page-two-column:not(.archive) #primary .entry-header, 4 body.page-two-column.archive:not(.has-sidebar) #primary .page-header { 5 float: left; 6 width: 36%; 7 } 8 9 .blog:not(.has-sidebar) #primary article, 10 .archive:not(.page-one-column):not(.has-sidebar) #primary article, 11 .search:not(.has-sidebar) #primary article, 12 .error404:not(.has-sidebar) #primary .page-content, 13 .error404.has-sidebar #primary .page-content, 14 body.page-two-column:not(.archive) #primary .entry-content, 15 body.page-two-column #comments { 16 float: right; 17 width: 58%; 18 } 19

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 10:14

編集2019/02/06 10:18
CHERRY

総合スコア25171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshitake26

2019/02/06 10:45 編集

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

2019/02/06 10:40 編集

正直な話、 WordPress の標準テンプレートの中でも twentyseventeen は、かなり複雑化していて、自由にカスタマイズしようとすると結構大変です。 WordPress の場合、いろいろなテンプレートが配布されているので、デザインが好みで、構造が分かりやすそうなテンプレートを探して使ってみるのが良いと思います。 もし、HTML や CSS で自在に Webサイトを作れる方 や HTML と CSS で作成された 既存のWeb サイトのデザインを真似て、 WordPress のテーマを作成するということであれば、 WordPress で必要な骨組みだけが用意されている「スターターテーマ」や「ブランクテーマ」と言われているテーマから 自作するのが良いかもしれません。
yoshitake26

2019/02/06 10:58

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

0

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

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

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

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

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

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

投稿2019/02/06 10:31

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshitake26

2019/02/06 10:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問