お久しぶりです！記事更新がかなり遠のいていました。
その間、私は寝ていたわけではありません。
その間に起こったことはたった2つです。
- サイトをめちゃくちゃ作ってHTMLとCSSの勉強をしてきた
- 私というのがちょっと恥ずかしい年齢になった
というわけでこれからは私ということでお願いします。
ってそんなことじゃねーわ！笑
（後日一人称変えました笑 「ブログで一人称を変えたい時-一からやり直さなくても大丈夫、Search Regexがあれば」）
そて今回は以前から当サイトに来たことがあるかたはおわかりの通り、トップページがサイト型に変貌しております。これが出来たのはひとえに私の努力の甲斐あってのことです。
というのは嘘でそれが大体2割位ですがあとの8割はCocoon作者わいひら様とCSSを公開してくださっているサイトの方のおかげです。
Co
coon
本
当
に
凄
す
ぎ
る
…
こんなレイアウトが出来るのもCocoonならではなんですよね。
シンプルでいてもっとも個性的、それがCocoon
Cocoonを止めて海外のテーマにしたほうがいいんじゃないか。
そう思ったこともあります。このサイトのテーマはマガジン風のテーマの方がいいような気もする。しかしですね。テーマを変えたところでまた変えたテーマの見た目に飽きが来るだけじゃないでしょうか。
それなら自由度の高いWordPressテーマであるCocoonでオリジナルに作ってしまったほうがいい。
そしてシンプルなCocoonこそがもっともオリジナルなテーマなのではないかと。つまり私がオリジナルだからです。
というわけでCocoonでサイト型のトップページを作って行きましょう。記事の内容が内容だけにちょっと大きな画像も使っていきます。
まず大きく分けてトップページ上部のかなり手をかけている部分と下のあまり手をかけていない部分に分かれます。
手をかけている部分はかなりCSSを使いこんでいるので説明は難しいです。
ただヒントはこの記事上部の番号付きリストがおしゃれになっているようにリストにCSSを掛けたということですね。CSS自体は公開されているものを借りているだけです。
ここはオリジナリティが出る部分でもあるので自分で探したり調べてカスタマイズしたほうがいです。実際の当サイトのその部分はかなり入り組んだCSSになっています。複雑です笑
そして重要なのは次の方です。
Cocoonのトップページカスタマイズのためのソースコードまとめ
このサイトのトップページは次のソースコードを利用しています。
- 新着記事を表示する
- 人気記事を表示する
- カスマイズされた記事のピックアップリストを作り表示する
そしてその出し方た次のとおりです。
詳細はCocoonのページに詳しいです。
- まとめ記事：記事作成時に利用できるショートコード集
- 新着記事の詳細は：新着記事一覧を表示するショートコードの利用方法
- 人気記事のショートコード：人気記事一覧を表示するショートコードの利用方法
そしてコードはエディターから直接出せるようにもなっています。
←ここですね。
ためしにこのコードを本文に貼ると次のようになります。
そしてショートコードの表示はこの様になっています。
[popular_list days=30 rank=1 pv=1 count=3 cats=3,5 type=large_thumb_on]［popular_list］がショートコードで後は因数ですね。エディターからだと勝手に指定されますが自分で変えることが出来ます。詳しくは上記の記事にて。
同様に新着記事も出せるようになっています。
[new_list count=3 cats=3,5 type=large_thumb_on children=1]次にメニューから自分が選んだ記事のリストを作って上にようにサムネイル付きで表示するカスタマイズです。
メニューからピックアップ記事のサムネイル付きリストを作る
当サイトでいうとトップページ下部のこの箇所です。
ここは実に労せず出来てます。
やり方は詳しくはこちら：意図した記事一覧を作成できる「ナビカード」ショートコードの使い方
簡単に説明すると外観＞メニューからグローバルメニューを作る時のようにメニューを作ります。そのメニューの名前を次のショートコードに入れるだけです。
[navi name="メニュー名"]
CocoonでトップページのSNSや日付を消す
CSSで消すことが出来ます。具体的には以下の記事が参考になります。
以上でトップページにリストで記事一覧を表示させる方法は終わりです。疲れたのでここまで！笑
あとでカラムを分けるやり方を書きますね。