記事の表示方法について教えて下さい

このトピックには9件の返信、1人の参加者があり、最後にヒロにより9年、 7ヶ月前に更新されました。

9件の返信スレッドを表示中

投稿者

投稿
- 2017年2月3日 7:56 AM #49936
  
  ヒロ
  ゲスト
  
  #49847の記事に割り込みさせて頂いたものですがsimplicityとは思えないほどのカスタマ＆デザインに驚きました。
  http://www.yuu-diaryblog.com/
  そこでどうしても教えて頂きたいと思いトピ立たせて頂きました。
  カテゴリ別で表示している方法なのですがCSSだけでそのように左側に大きなサムネイルで右側に小さいサムネイルを順番に並べる事が出来るのでしょうか！？
  凄く興味がアリアリでヒントでも教えて下さいませ。
  どうかよろしくお願いします。
- 2017年2月3日 8:25 AM #49937
  
  Hidekichi
  ゲスト
  
  Slider Proじゃないですかね？
  
  なんか以前にこれについて質問もらって答えたような記憶があってcodepenのようなサンプルを作りました。
  この元になった質問は過去ログにあるかと思いますが、質問者がゆうさんだったかは定かではないので、本人のレスを待ってください。
  
  質問されている箇所が別の箇所の場合は、またそこらを詳しく書いてください。
- 2017年2月3日 3:47 PM #49939
  
  ヒロ
  ゲスト
  
  Hidekichiさんありがとございます。
  説明不足で申し訳ありません。
  Slider Proらしいものは上の方で表示されてるものですよね。
  それとは別に記事のページャーの下に
  「website design」と「blog＆web」の箇所の事です。
  もしかするとこれも「Slider Pro」を改造したものだったのかな。
  
  なんせSlider Proと言うものも初めて知ったのでそこから勉強していきます。
  後,
  
  ＞codepenのようなサンプルを作りました。
  
  Hidekichiさんの作られたスクリプトは使わさせて頂いても良い物なんでしょうか？
  よろしくお願いします。
- 2017年2月3日 4:44 PM #49941
  Hidekichi
  ゲスト
  > 「website design」と「blog＆web」の箇所の事です。
  
  その部分をゆいさんがどのようにされているかはわかりませんが、やり方は色々あります。
  
  bodyタグにはカテゴリの情報として、ゆいさんのサイトで引用するなら、
  
  <body class="archive category category-computer category-15">
  
  というのが入ります。これは、例えばcssで
```
.category-computer 何かしらのセレクタ {
  background-image: url(画像のパス);
}
```
  このようにして指定できます。この何かしらのセレクタをどのようにして入れるかにphpファイルを直接いじって例えば、
  
  <div class="cat-head"></div>
  このようなものを入れたとすれば、先程のcssは、
```
.category-computer .cat-head {
  background-image: url(画像のパス);
}
```
  こんな風に書けます。
  breadcrumb.phpなどの下に上記htmlを書けばいけます(※)し、jQueryで入れてもよいかとおもいます。
  ※phpをいじる場合はアップデート等でそれらカスタマイズがなくなるので毎回入れ直しをする必要があります。
  
  これらをいくつかそのカテゴリ別に用意しておけばcssで画像を変更することができます。
  
  サンプル: カテゴリごとに検索結果にヘッダ画像表示 | codepen
  ※cssはscssで書いてます。css欄下向き三角からview compiledを選ぶとcssに変換されます。
  
  こんな感じです。
  
  #49937のcodepenのサンプルは、このままでは使えません。
  
  wordpressのfunctions.phpにwp_enqueue_script等でslider proのスクリプト本体とcssをcdnから読み込んで色々設定しないといけません。
  
  htmlは質問者のサイトから引用していますし、ここの出力をどのようにして書き出すか等(スクリプトはスライダーの機能だけかと思うのでhtmlを出力するのは別で何かしらする必要があります)をクリアしないといけません。
  
  おそらく別の問題があってそれを解決するための質問を僕がcodepen上で修正したように記憶しているのであくまでも表示サンプルです。
- 2017年2月3日 4:48 PM #49942
  
  Hidekichi
  ゲスト
  
  ☓ ゆいさん
  ○ ゆうさん
  
  でした。
- 2017年2月3日 5:40 PM #49944
  ゆう
  ゲスト
  昔書いた所なのであんまり覚えてないんですが、
  たしか左側と右側を分けて作ったような気がします。
  
  query_posts() 関数で記事をカテゴリ別に表示して、左側だけサムネイルのサイズを大きなサイズで呼び出して、右側は小さなサイズで呼び出していたと思います。
  それぞれの位置に関しては全部CSSで調整してます。
  
  でも全部CSSでやるならHidekichiさんに説明して頂いた方法の方が、良いかと思います。
  
  一応下がコードです。
  昔書いた奴なんで、すごい直すところがあると思うので、恥ずかしいんですけど、参考になれば幸いです(^^)/
```
<div class="topmain-newcate1 clearfix544">
<h3>html・css</h3>
<div class="topmain-newcate-left">

<?php query_posts("category_name=html-css&showposts=1"); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
	
    <div class="newcate-leftthum-of">
    <a class="newcate-leftthumb" href="<?php the_permalink() ?>">
      <?php the_post_thumbnail( 'medium' ); ?>
    </a>
    </div>
  
<h4><a class="newcate-left-title" href="<?php the_permalink(); ?>">
      <?php echo get_the_custom_excerpt( get_the_title(), 50 ); ?>
      </a></h4>

<p class="newcate-excerpt1"><?php echo get_the_custom_excerpt( get_the_content(), 40 ) ?></p>
<p class="newcate-time-time"><?php the_time('Y/m/d'); ?></p>

<?php endwhile;endif;?>
<?php wp_reset_query(); ?>
</div>

<div class="topmain-newcate-right">
<ul>
<?php query_posts("category_name=html-css&showposts=4&offset=1"); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
	
   <li>
    <a class="newcate-r-leftthumb" href="<?php the_permalink() ?>">
      <?php the_post_thumbnail( array( 100, 100 ) ); ?>
      </a>
   <div class="newcate-r-right-text">
    <a class="newcate-right-title clearfix544" href="<?php the_permalink(); ?>">
      <?php echo get_the_custom_excerpt( get_the_title(), 50 ); ?>
      </a>
    <p class="newcate-r-right-time"><?php the_time('Y/m/d'); ?></p>
   </div>
   </li>
<?php endwhile;endif;?>
<?php wp_reset_query(); ?>
</ul>
</div>

<div class="newcate-viewmore">
<a href="<?php echo get_category_link( 140 ); ?>">view more</a>
</div>
</div>
```
- 2017年2月3日 6:07 PM #49945
  
  ヒロ
  ゲスト
  
  Hidekichiさん
  ゆうさん　本当に超感謝です。
  まだ時間取れないので試す事出来ないけど胸がワクワクしてきます。
  これから少しずつ実装に向けて挑戦していきます。
  
  その前に一つ初めて見るタグ（ソース）を見かけたのですがこれはどう言うものなのでしょうか。
  お時間のある時に出も触り程度で結構ですので教えてて頂けたらと思います。（すみません）
  これです。
  <h3>html・css</h3>
- 2017年2月3日 7:37 PM #49946
  
  ゆう
  ゲスト
  
  すいません。
  それ今使用してる部分から途中を除いてコピペしただけなので、クラス名、タイトルとか変えて下さい。
  
  <h3>html・css</h3>はwebsite designの部分のタイトルです。
  私のサイトの部分でいう「website design」の文字は<h3>html・css</h3>に疑似要素を使って表示しているので、その部分になります。
- 2017年2月3日 9:01 PM #49947
  
  ヒロ
  ゲスト
  
  ゆうさん　勉強不足で申し訳ございませんでした。
  新しい書き方なのかなぁと思いいろいろ調べても分からなかったものですから。
  スッキリしました。
  でも
  何度も言いたくなるくらい本当に素敵なデザイン構成です。
  ありがとございました。
- 2017年2月3日 10:41 PM #49950
  
  ヒロ
  ゲスト
  
  ゆうさん素敵なプレゼントありがとございました！
  早速やってみたら希望通り表示出来るようになりました。
  他にもまだまだカッコ良い表示方法をされてますがまたどうしても伝授して欲しい時はトピ立たせてもらうかも知れません。
  その時は何卒宜しくお願いします。
  
  Hidekichiさんどうもありがとございました。
  今回はゆうさんの方法でやらせてもらいましたが
  これから時間をかけながらHidekichiさんのCSSで表示させる方法も勉強して行きたいと思います。
  またつまづいた時は後押しホローの程よろしくお願いします。
  それではこのトピは無事解決出来ました。
  管理者のわいひらさんにもこの場と素敵なテーマの提供に大変感謝しています。
  ほんとうにありがとございました。
投稿者

投稿