WordPressでPatagoniaテーマを使用して本文の位置を移動する方法

前へ 次へ
このQ&Aのポイント
  • WordPressでPatagoniaテーマを使用して本文の位置を移動する方法を教えてください。
  • 現在WordPressでPatagoniaテーマを使用しているのですが、本文の位置を少し右に移動したいです。
  • CSSをいじると、タイトルなどのメインエリアに含まれているもの全てが右に移動してしまいます。改行時の列の感覚もうまく調整できません。どうすれば改善できるでしょうか？
回答を見る
  • ベストアンサー

WordPress　本文の位置を・・

こんにちは。 現在WordPressで、Patagoniaというテーマを使っています。 テーマURL：　http://wordpress.org/extend/themes/patagonia このテーマで、本文の位置を少し右に移動したいのですが、CSSをいじると、タイトルなどのメインエリアに含まれているもの全てが、右に移動されてしまいます。 あと、通常通り改行したときと、長文を打って自動的に改行されたときで、列の感覚が違います。これも、marginやpaddingをいじって見てもうまくいきません。。 どうすれば、よくなるでしょうか！？ お願いします＞＜教えてください。。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

これはCSSではどうにもなりませんので、テーマを直接編集する必要があります。 記事本文を表示しているテンプレートファイル（index.php、single.php、page.phpなど）で <div id="post-<?php the_ID()?>" class="post"> <div class="date">[省略]</div> <div class="entry"><h2><? the_title() ?></h2> <div class="postmetadata">[省略]</div> </div> <?php the_content(); ?> </div> こんなような記述があると思いますので、 このthe_content()の部分を次のようにクラス分けして <div class="post-content"><?php the_content(); ?></div> スタイリングすれば .post-content { margin-left:15px; } 右に移動させることが出来ると思います。 ＞通常通り改行したときと、長文を打って自動的に改行されたときで、列の感覚が違います。これも、marginやpaddingをいじって見てもうまくいきません 段落内の行間はline-heightをいじってみてください。

durath
質問者

お礼

おお！CSSとPHPをちょこっといじってみたら、できました！！ ありがとうございます。 とても良い勉強になりました！！！

  1. カテゴリ
  2. インターネット・Webサービス
  3. SNS・掲示板・ブログ
  4. ブログ

関連するQ&A

  • gooブログ　本文と背景の間に余白を入れたいのですが、できません。

    gooのブログを使用しています。 スキンはシンプルなものを使用してCSSで編集しています。 ブログのスタイルは、全体の背景色は白ですが、 さらに文章の後ろに読みやすいようにベージュの背景色つけています。 しかし、その背景と本文（左側）がきちきちで、もう少し右にずらして 余白を作りたいと思っています。 CSSの編集画面で、このようにしていますが、全く反映されません。 paddingとmarginどちらかよく分からないのですが、どちらでやってみても無理でした。私のやり方が間違っているのでしょうか。 よろしくお願いします。 /* エントリー本文 */ .etBody { font-size: 10pt; line-height:130%; word-break:break-all; padding: 0px 0px 0px 50px; } /* エントリー本文背景 */ .entryBg{ padding: 10px; background-color:#EEE5DE; margin: 0px 20px 30px 0px; }

  • Wordpressのテーマの使い方が分かりません

    このページ（http://www.ygoy.com/demo/）のようなTOPページが ギャラリー風のテーマを選びました。 このページ（http://weblogtoolscollection.com/archives/category/wordpress-templates-wordpress-skins-wordpress-themes/）からダウンロードして、テーマを設置して、本文に画像とテキストを入力してテスト投稿しましたが、TOPページに画像は表示されず、個々の投稿ページ（http://www.XXXXX.com/?P= のようなURL)に画像とテキストが表示されます。 このページ（http://www.ygoy.com/demo/）のように、TOPページにも画像とテキストを表示するにはどうすればよいのか教えて欲しいです。 どうぞ宜しくお願いします。

  • ＷordPress　バグなのかな？

    ＷordPressのバグですか？ 外観 / テーマ編集 / スタイルシートで繰り返しスタイルを変更していました。 すると、ブラウザ（IE8）にCSSが適用されなくなりました。 Firefoxでは適用されています。 /*-- 効かなくなったスタイルは以下になっています。 --*/ div#container { margin: 0 auto; } 以上、よろしくお願いします。

    • ベストアンサー
    • CSS
  • wordpressで「サブ」カテゴリを設定したい

    wordpressを最近つかいはじめたのですが、 デフォルトでは、カテゴリ階層は１つだけですよね？ でも http://wordpress.org/extend/themes/commercial/ をみると、 カテゴリ階層は、 ブログトップ＞第１階層＞第２階層＞第３階層 となっています。 これを実現するにはどうすればいいのでしょうか？ なお、できれば、 ツリー表示でなく、「ブログトップ＞第１階層＞第２階層＞第３階層」というようないわゆるパンクズ表示をさせたいと思っています。 どなたかご存じのかた、よろしくお願いします。 なお、プラグインをもちいてもかまいません。 また、多少PHPプログラムをいじってもかまいません。 どうぞよろしくお願いします。

  • wordpressのタグについて

    ワードプレスの教科書の本に沿って勉強しているのですが、さっそく躓いてしまいました。。 よろしくお願いいたします。 テーマ作成で、プライムストラテジーのサイトからpacificという練習用テーマをダウンロードし、 xamppでローカル開発環境を準備した中に入れ、ソースをｗｐテンプレートタグに置き換えを行っているのですが、ｃｓｓファイルの置き換えは問題ないのですが、テーマファイルディレクトリの置き換えがうまくできません。。 たとえば、ｃｓｓは、 <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> 　　　↓↓↓ <link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/wp-content/themes/pacific/style.css" /> で、ちゃんと表示されている。 テーマファイルディレクトリは、 href="<?php bloginfo('templete_url'); ?>/images/touch-icon.png" 　　　↓↓↓ href="wp/images/touch-icon.png" ソースの一部↓ ----------------------------------------------------------- <!DOCTYPE HTML> <html dir="ltr" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>title</title> <link rel="apple-touch-icon" href="wp/images/touch-icon.png" /> <link rel="shortcut icon" href="wp/images/favicon.ico" /> <link rel="stylesheet" type="text/css" media="all" href="http://localhost/wordpress/wp-content/themes/pacific/style.css" /> ・・・ ----------------------------------------------------------- <?php bloginfo('templete_url'); ?>の部分は、wp　とだけ表示されてしまうのですが、 http://localhost/wordpress/wp-content/themes/pacific　と表示させたいのですが、 この部分はどこを参照しているのでしょうか。 （どこを修正したら、ちゃんと出るようになりますでしょうか。） 不足している情報があれば追加しますので、わかる方がいらっしゃいましたらご教示いただけますと幸いです。 どうぞよろしくお願いいたします。

  • Wordpress スタイルシートが反映されない

    Wordpress 初心者です。 「Wordpress レッスンブック」という本を見ながら学習中なのですが、サンプルテーマのスタイルシートで設定した内容が全く反映されません。ネットでいろいろ調べたのですが解決方法が見当たりません。 どのような原因が考えられますでしょうか？よろしくおねがいします。 Sample Theme: メインインデックスのテンプレート (index.php) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" /> </head> <body> <!-- ヘッダー --> <div id="header"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p> </div> </body> </html> Sample Theme: スタイルシート (style.css） /* Theme Name: Sample Theme Theme URI: http://makoto.pcnoah.com/wp/ Dscription: This is my sample theme. */ /* ヘッダー */ div#header h1 {font-size: 1.875em; margin: 0; float: left; margin-bottom: 4px} div#header h1 a {text-decoration: none; color: #000000} div#header p#desc {font-size: 0.75em; color: #444444; margin: 0; float: right; margin-top: 18px} div#header {border-bottom: #a3d2f2; padding-bottom: 10; margin-bottom: 20px}

  • jQuery、JSONの結合方法

    いつもお世話になります。 jQuery.fn.hoge = function(options) { var defaults = { 'val1':'1', 'val2':'2', 'Css':{ 'padding':'3px', 'margin':'2px', 'background-color':'red' } } などとして、 hoge( 'val2':'222', Css':{ 'padding':'10px' } ) var setting = $.extend(defaults,options); とすると、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px' } となります。 ここで、 settingが 'val1':'1', 'val2':'222', Css':{ 'padding':'10px', 'margin':'2px', 'background-color':'red' } となるようにするにはどうしたらよいのでしょうか。 つまり、 'val2':'2',　－＞　'val2':'222', 'padding':'3px'　－＞　'padding':'10px'　 と書き換えられるのは良いのですが、, Css':{ 'padding':'10px' } となってしまい 次の２つが削除されてしまうのは困るということです。 'margin':'2px', 'background-color':'red' よろしくお願いいたします。

  • wordpressで余計な余白を削りたい

    WorpdressでTwenty Seventeenというテンプレートの子テーマを使っています。 静的HTMLページで作ったサイトをWordPressに持ってきたのですが、 静的ページより全体的に余白ができてしまって困っています。 画像と画像の間やヘッダーの上部です。 style.cssで追加したmarginやpaddingをいじっているのですが、静的ページと同じになりません。 余白を削る良い方法はありますでしょうか。 img { vertical-align:bottom; } で画像間の隙間を無くしてみました。 vertical-align:bottom; を追加する前とした後では隙間の出来が違うのですが、それでも静的ページと同じになりません。 「ヘッダー」もfunctions.phpに add_filter( ‘show_admin_bar’, ‘__return_false’ ); を追加したら追加する前よりは余白が減りましたがそれでも静的ページより余白ができてしまいます。 atyle.css以外の場所で余白を削るのかもしれません。

  • wordpressヘッダー下の余白の削除方法

    はじめまして。 wordpress初心者で、ネットで用語や作成の仕方を検索しながら、現在ＨＰを作成しています。 添付のヘッダー下にある余白とHOMEというテキストを消したいのですが方法が解りません、、、 購入先のデモサイト（http://www.nicdarkthemes.com/themes/wedding/wp/demo/wedding-planner/） にはこの余白とHOMEテキストは無いのですが、私がインストールしたデモには、この余白とHOMEテキストがあります。 余白の下のRevolution sliderを上へ移動させてみたのですが、これ以上、上には移動できず、自分で調べてみたところ外観＞カスタマイズ＞追加CSSで編集できそうなのですが、CSSコードも全く解らず何を入れて良いのか、、行き詰っています。。。 ↓これを入れてみましたが、変化はありませんでした、、、 例：#header { margin-bottom: 0; style.cssでheaderを検索したところ、↓が関係してそうなのですが、 .nicdark_datepicker .ui-datepicker-header .ui-datepicker-title { background-color: #F9F9F9; padding: 20px; font-size: 20px; font-weight: bolder; border-bottom: 1px solid #f1f1f1; } このどれが空白部分を示しているのか・・(padding: 20px; ?) もしかして、Headerの調整ではないのでしょうか・・・？ 詳しく解る方教えて頂けますと幸いです。

    • ベストアンサー
    • CSS
  • WordPressを複数インストールしたい

    質問させていただきます。 すでにWordPressをインストールしておりますが もう一つ、インストールしようと思ったのですが うまくいきません。 (1)WordPressのサイトから3.1.1をダウンロードしました。 http://ja.wordpress.org/ (2)フォルダ名を変えて(フォルダ名：wp2)サーバーにアップロードしました。 (3)フォルダのアクセス権を755に設定しました。 (4)アップロードしたところにアクセスしたら <?php /** * Front to the WordPress application. This file doesn't do anything, but loads * wp-blog-header.php which does and tells WordPress to load the theme. * * @package WordPress */ /** * Tells WordPress to load the WordPress theme and output it. * * @var bool */ define('WP_USE_THEMES', true); /** Loads the WordPress Environment and Template */ require('./wp-blog-header.php'); ?> とでてきます。 どうすれば良いでしょうか。 よろしければ、アドバイスお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する