ワードプレス初心者!構築の備忘録② ❝カスタマイズ❞ まとめ by Cocoon

ワークスタイル

私が運営している2つのサイト「illustration web site」と「Sunny Day Life !!」は、ともにワードプレスでつくっています。

テーマは両方ともCocoonです。

構築していくと、ここをこうしたい!という欲求が次々に出てきます。
そのイメージに近づけるため四苦八苦のしっぱなし…!

今回は、私が「こうしたい!」と思ってカスタマイズしたことをばばばーっとメモしていきます。

スポンサーリンク

おしゃれなギャラリーをつくりたい

私はイラストレーターなので、作りたいのはもちろんギャラリーサイトです♪
ワードプレスには標準でギャラリー機能が使えますが、もうちょっとおしゃれ感を出したかったので「FooGallery」というプラグインを使いました。

↓詳しくはこちらの記事をご覧ください!↓

スポンサーリンク

固定ページの日付を非表示にしたい

ブログサイトでは日付の表記が必須ですが、ギャラリーサイトでは日付が邪魔になってしまいます。
出来れば触りたくないCSSの追記が必要ですが、下記のサイトを参考に進めると非表示にすることができます。

スポンサーリンク

固定ページ(フロントページ)に最新記事リストを追加したい

ギャラリーサイトのフロントページは、固定ページでイラストギャラリーをメインにつくっています。
ですが、ギャラリーだけでなく動的に新着記事を表示したかったのでショートコードというものを使って追加してみました。

最新記事リストを横並びにしたい

フロントページに最新記事リストを表示させてみましたが、Cocoonの標準設定だと縦一列になるようで、イマイチ外観がしっくりこない。。

そこで横並びに表示できる方法はないかと検索しまくり…。
そしてやっと見つかった横で表示できる方法!
下記のサイトを参考にさせていただき横3列で設置することができました♪

フロントページや固定ページでのサイドバーを非表示にしたい

ブログタイプのカテゴリーにはサイドバー が便利ですが、ギャラリーサイトでのフロントページではサイドバーがない方がすっきりするので、非表示にしてみました。

↓こちらのサイトが参考になりました↓

コンタクトフォームをつくりたい

サイトを作ったならコンタクトフォームは必須!
Contact Form7」というプラグインを使って設置しました。

ツイッターのタイムラインを入れたい

ツイッターもしているので、せっかくならブログにタイムラインを入れたい!
ということでブログからツイートを見れるようにしました。

ツイッターのタイムラインを表示させる方法は検索するとたくさん出てきます。
まずは、下記のサイトから自分のアカウントのコードを取得し、ワードプレスのウィジェットに追加するという方法です。

Twitter Publish

しかし、私の場合なぜか保存で固まるという現象が。。

色々他の方法はないかと検索して試してみた結果、下記のサイトを参考に進めていったら成功しました!(感謝✨)

インスタを表示させたい

自分のアカウントのインスタもワードプレス上で表示してフィードを見れるようにしてみました。

インスタグラムと連携することで、フィードを自動的に更新表示してくれる「Smash Balloon Social Photo Feed」というプラグインを使うことにしました。

当初はサイドバー に表示させたかったんですが、なぜかうまくいかず、、あきらめてフッターに設置してみたら成功しました。

SNSシェアボタンが存在感ありすぎなので丸くしたい

コクーンの標準でついているSNSシェアボタンの存在感がありすぎて、違和感。。
スッキリとさせたくてカスタマイズしてみました。

調べてみるとSNSシェアボタンの変更はCSSを追加しなければいけなかったので、初心者はちょっとハードル高く半ばあきらめてしまっていたのですが、下記のサイトを参考に手順通りに進めると丸くなりました♪感激!

サイドバーの見出しをカスタマイズしたい

デザインテーマにもよりますが、サイドバー の見出しが色設定によっては違和感。。
できるだけサイトデザインに馴染むようにカスタマイズしてみました。

このカスタマイズもCSSの追記が必要となりました。
できるだけCSSは触りたくないんですが、見栄えの為にはしょうがない!チャレンジ!

下記のサイトを参考に、サイドバーの見出しを「中央揃えにする」「背景の色を変更」「下線をいれる」ようにCSSを追加してみたところ、見事成功しました♪

フロントページのタイトルを消したい

フロントページのタイトルが不要だったので、タイトルを非表示にできないものか試行錯誤。

下記を参考にタイトルを非表示にすることが出来ました!
こちらも苦手意識のあるCSSの追記が必要でしたが、なんとか成功しました♪


こんな感じでカスタマイズをいろいろと試みています。
これからも気に入らない箇所がちまちま出てくると思いますが、その都度カスタマイズしていこうと思います。

先は長いね!

タイトルとURLをコピーしました