副業で稼ぐ

LION MEDIAで記事ページをバイラルメディア風にカスタマイズする方法

lion mediaカスタマイズ

「WordPressで同じテーマを使っていると、似たり寄ったりのデザインになってしまう・・・」

「自分だけのオリジナル感がほしい!」

そう思っている方へ。

WordPressテーマ「LION MEDIA」で、バイラルメディア風にカスタマイズする方法をご紹介します。

LION MEDIAについて、詳しくはこちらをどうぞ。

バイラルメディアってどんなもの?

viral

一時期の勢いは減ったものの、まだまだ様々なところで目にするバイラルメディア。

「バイラル(Viral)」という名前のとおり、SNSなどでウイルスのように拡散されるようなメディアのことです。

有名どころでいうと、TABI LABOMERYなどでしょうか。

特徴としては、

・コンテンツを重視

・人に伝えたくなる、へーっと言われるような話が多い

・記事トップにインパクトがある

・サイドバーがないorあっても目次くらいで要素が少ない

・関連記事が多いor少なくても的確に刺さるもの

・SNSボタンが充実

といった感じの構成。

メディアやライターのネームバリューではなく「だれもが気になる、あんなことやこんなこと」を揃えた記事コンテンツが多いです。

デザイン的には「記事を邪魔しないように、コンテンツを見てもらい各種SNSでシェアしてもらう」のに特化しているイメージ。

なによりもシンプルでかっこいい。

塩谷舞さん(通称しおたん)が運営しているサイトmilieuなんか、まさにバイラルメディアのお手本のようなデザイン。

背景のグラデーションが有機的に動くのなんか、センスありすぎですね。

WordPressテーマ「LION MEDIA」をバイラルメディア風にカスタマイズした完成系がこちら

バイラル風.mov

デフォルトのLION MEDIAよりも、記事トップの画像を大きくし、シングルカラムにしております。

どこを変えればいいか

それではLION MEDIA上で変えていく箇所をご説明していきます。

ヘッダーを固定する

バイラルメディアはサイドバーがないため、今なんのサイトを見ているかわからなくなりがち。

それを防ぐために、ヘッダーは固定します。

ヘッダー固定の方法は以前詳しくご紹介しましたので、こちらをご覧ください。

アイキャッチを大きく

LION MEDIAのアイキャッチは通常これくらい。

eye-before

これを、↓こうします。

eye-after

以下のCSSを子テーマのstyle.cssに追加すればOK。

*記事タイトルのキャッチ画像天地調整*/
.singleTitle {
    padding: 300px 0!important;}
@media only screen and (max-width: 767px){.singleTitle {
    padding: 100px 0!important;
    }}

@media only~以下はスマホ用です。

スマホはそのままの天地幅でいいよ!という方は、@media only~以下を全て削除してください。

タイトル下の情報を控えめに

タイトル下の投稿日・カテゴリ・タグなどが背景白地でやたら目立つのが気になっていたので、こちらを控えめに。

元はこう。

白のベタが敷いてあると、なんかちょっと目障りです。

そんなに見る人もいないでしょうし・・・。

sub_before

これを↓こうします。

sub_after

これでしっかりタイトルに目がいきますね。

以下のCSSを子テーマのstyle.cssに記述します。

/*記事タイトル下の背景削除*/
.dateList.dateList-singleTitle {
     background-color: inherit; 
}

ついでにアイキャッチ背景画像の濃さを調整

せっかく大きくしたので、もう少し大きいほうの画像(網点が敷かれたほう)を見えるようにしましょう。

元はこれくらいの暗さです。

light-before

これを↓こうします。

sub_after

うん。明るくなりました。

これも同じく、子テーマのstyle.cssに。

/*記事TOPアイキャッチの濃さ*/
.singleTitle::before{
        background-color: rgba(0,0,0,0.6)!important;
}

シングルカラムに

シングルカラムへの変更は、WordPressメニューの外観>カスタマイズから。

基本設定[LION用]>レイアウト設定から変更できます。

カラム調整

デフォルトでは2カラム(サイドメニューあり)になっています。

上から、

・アーカイブページ=記事一覧のページ

・投稿ページ

・固定ページ

を、それぞれ1カラムにするか2カラムにするか選べます。

しかも、1カラムのときのコンテンツ幅まで調整可能!

至れり尽くせりですな。

記事終わりにSNSなどのボタンを入れる

SNSのボタンも外観>カスタマイズ>SNS・OGP設定 [LION用]から可能。

僕の場合TwitterとFacebookは、プラグインの「VA Social Buzz」を入れています。

va social

このプラグインを入れるだけで、こんな感じのアイキャッチとシェアボタンができます。

導入後2週間くらいでフォロワー20人くらい増えました。

はてぶ・pocket・LINEのボタンに関しては、外観>カスタマイズ>投稿ページ設定 [LION用]>■シェアボタンの表示/非表示から設定できます。

LION MEDIAをバイラルメディア風のデザインに変えたことによる効果

このカスタマイズをして、上に挙げたバイラルメディアのように各種SNSで拡散されまくる!

といった希望を持ってはいけません。

僕の場合バズはおろか、シェアされることもありませんでした(悲)

そしてやっぱり2カラムのほうが回遊されるような気がして(ビビリ)、サイドバーも追加しました。

なので、このカスタマイズをして得られるものは、「ブログがなんか小洒落た感じになる!」です。

以上!それだけです(笑)

リンカイ、またはコンカイのまとめ

WordPressテーマ「LION MEDIA」をバイラルメディア風にカスタマイズする方法をご紹介しました。

ココに書かれている方法で、ぜひあなたのブログをオリジナリティあふれるものにしてください!

それではまた!

ヤマダ

この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます!

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。
ABOUT ME
ヤマダカイト
都内メーカーでweb・グラフィックデザイナーとして働きながら、リンカイ-デザインという屋号でデザインしたりブログ書いています。デザインを使って何ができるのか、を考えるのが得意です。 将来は複業家として東京×長崎の二拠点生活をします。 詳しいプロフィールはこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です