Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript![ ? ]

帰って来きたなんでトリビューン-Cocoonのトップページサイト化カスタマイズ・ショートコードまとめ

変な顔のうさぎ Cocoonカスタマイズ

お久しぶりです!記事更新がかなり遠のいていました。

その間だ、私は寝ていたわけではありません。

JUZO
JUZO

その間に起こったことはたった2つです。

  1. サイトをめちゃくちゃ作ってHTMLとCSSの勉強をしてきた
  2. 僕というのがちょっと恥ずかしい年齢になった

というこれからは私ということでお願いします。

JUZO
JUZO

ってそんなことじゃねーわ!笑

そて今回は以前から当サイトに来たことがあるかたはおわかりの通り、トップページがサイト型に変貌しております。これが出来たのはひとえに私の努力の甲斐あってのことです。

というのは嘘でそれが大体2割位ですがあとの8割はCocoon作者わいひら様とCSSを公開してくださっているサイトの方のおかげです。

JUZO
JUZO

Co
coon

JUZO
JUZO



JUZO
JUZO




とぼけた猿

JUZO
JUZO

こんなレイアウトが出来るのもCocoonならではなんですよね。

シンプルでいてもっとも個性的、それがCocoon

Cocoonを止めて海外のテーマにしたほうがいいんじゃないか。

かつておれもそう考えていた時期がありました。’(刃牙)

 

 

 

 

そう思ったこともあります。このサイトのテーマはマガジン風のテーマの方がいいような気もする。しかしですね。テーマを変えたところでまた変えたテーマの見た目に飽きが来るだけじゃないでしょうか。

それなら自由度の高いWordPressテーマであるCocoonでオリジナルに作ってしまったほうがいい。

そしてシンプルなCocoonこがもっともオリジナルなテーマなのではないかと。つまり私がオリジナルだからです。

というわけでCocoonでサイト型のトップページを作って行きましょう。記事の内容が内容だけにちょっと大きな画像も使っていきます。

まず大きく分けてトップページ上部のかなり手をかけている部分と下のあまり手をかけていない部分に分かれます。

なんでトリビューン(テーマ:Cocoon)サイト上部のスクショ

手をかけている部分はかなりCSSを使いこんでいるので説明は難しいです。

ただヒントはこの記事上部の番号付きリストがおしゃれになっているようにリストにCSSを掛けたということですね。CSS自体は公開されているものを借りているだけです。

私がサイトに使ったのは2つ目のサイトさんのCSSです。こんなかんじで借りてくればデザインが出来てしまうので詳しくなくても出来ないわけじゃありません。

ここはオリジナリティが出る部分でもあるので自分で探したり調べてカスタマイズしたほうがいです。実際の当サイトのその部分はかなり入り組んだCSSになっています。複雑です笑

そして重要なのは次の方です。

Cocoonのトップページカスタマイズのためのソースコードまとめ

このサイトのトップページは次のソースコードを利用しています。

  •  新着記事を表示する
  • 人気記事を表示する
  • カスマイズされた記事のピックアップリストを作り表示する

そしてその出し方た次のとおりです。

詳細は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で消すことが出来ます。具体的には以下の記事が参考になります。

 

JUZO
JUZO

以上でトップページにリストで記事一覧を表示させる方法は終わりです。疲れたのでここまで!笑

あとでカラムを分けるやり方を書きますね。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

コメント