wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

ワードプレスのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?

      2017/06/22

こんにちは、管理人@SS_mshpです。

今回は、このサイトとかでも使っているwebサイト作成ツール『wordpress(ワードプレス)』で、デザイン上気になった点を修正できたお話をいたします。
201608051
恐らく、各種ブログサービスに変わって、(web業界以外でも)主流になるかもしれないツールですが、デザイン変更の難易度はどうでしょうか?さっそく見ていきます。



■作業実施前の、管理人のワードプレスの問題点ってどこだったの?

大抵のワードプレステーマ(ブログでいう、テンプレート)って、サイドカラムに月ごとのアーカイブが標示されるんですが、
201608052
記事が増えてくるとこのように下に長くなり、見栄え的に微妙。これをどうにかして短くしたいと思います。(少し、CSSやPHPの知識が必要になる部分があります)

■ではアーカイブのデザインを短く調整!今回は『CSSオーバーフロー』&『PHPアーカイブ出力タグ』を使用するよ

この記事で、管理人が使った方法は、わりと簡単かもしれません。テーマは『スティンガー』ですけど、他のテーマでも『sidebar PHP』というファイルはあると思うので、できそうです。

■まずは、サイドバーウィジェットから、アーカイブをはずしておきます

201608053
なぜかというと、今回やる方法でやった場合、『CSSがサイドウィジェット全体に適応された』というのがあるからです。アーカイブだけ独立してやれるように、外してあとから出力します。

■アーカイブのレイアウトを制御するclassを指定して、CSSを書きます

201608054
縦の長さ(height)を決めて、はみ出る分はオーバーフロー(scroll またはauto)で。
archive-overflowクラスに、height:400px; background-color:#f0f8ff; overflow:auto;と書きました。

■sidebar PHPにさっき書いたCSS対応のclassを入れ、そこにアーカイブ出力タグを入れます

201608055
これで、サイドバーウィジェットから独立して、アーカイブにCSS適応できるようになります。
(<?php wp_get_archives(‘type=monthly’); ?>と書きました。これが月別アーカイブを出力するタグです。ちなみにかっこの部分は特殊文字になってます。)

結果は・・・
201608056
短くなりました。リストの横丸が必要ない場合は、これもCSSでエディットしてください。他にも効率のよいやり方があるかもしれませんが、これは結構簡単にできました。

他にもワードプレスカスタマイズねたがありましたら書いていきます。
(既存ブログサービスじゃ物足りなくてワードプレス使ってみたい方は、ぜひ管理人にご連絡ください。作業が多いと有償なりますが、たぶん安いです笑)



【カテゴリ】 - webメディア制作・運用 【タグ】 -

  関連記事

youtubeで動画を宣伝する方法~1日あたり予算や、ターゲットを指定しながら

今回は、コンテンツ発信関連・youtubeで動画を宣伝する方法についてお話したいと思います(画像はいらすとやさんからおかりしました)。 youtube上にはスパ …

このサイトでPVを15倍(月間1480pv→22500pv・1年半の間)にした、seo・スマホ・記事話題の対策

今回は、いろいろエディットやチューニングをしていたら、アクセスが増えてPVが上がってしまったこのサイトの状況についてお話いたします。 googleアナリティクス …

ワードプレスwebサイトの、記事カテゴリー調整方法~設定しかた、親・子カテゴリ使い分け

今回は、このサイトにも使われているweb制作ツール・ワードプレスでの、カテゴリーの調整方法についてです。 最初のうちは気にしなくてよいかもしれないけれど、記事が …

お知らせ:楽曲受付サイトをレスポンシブ・スマートフォン対応にしました。しなかった場合考えられるリスクは?効果は?

今回は音楽制作ではなく、管理人がお仕事サイト(アトリエss)をスマートフォン対応リニューアルしたときのお話をいたします。 提供するものの種類によっては(例:DT …

baserCMS(ベーサーシーエムエス)でサイト制作してみる1~インストールやSSL・テーマ設定

今回は、お試しで(いつもはワードプレス利用だけど)、別のwebサイト製作システム・ツールを試してみます。 使ってみるツールは、最近徐々に勢力があがっているbas …

【サイト表示速度】googleのスマホ向け速度チェックツールで、表示速度/秒数を計測

今回は、スマートフォンに特化した、サイトの表示速度チェックツールをご紹介します。 最近では競合もサイト持っていないということが少ないので、あまりにもページ表示速 …

ワードプレスホームページ制作『ブログ記事投稿ページ・固定ページ』使い分け

今回は、管理人がこのサイト・音楽スクールや一般企業のお取引先さまなどのサイトに使用したツールについて取り上げます。 ワードプレスでは『ブログ記事投稿ページ・固定 …

『レスポンシブレイアウトwp』がプラグインエラーで、スマートフォンで上手く表示しなかったときの対策

今回は、サイトなどを使ってコンテンツを発信するのに役立つかもしれない、wordpress&レスポンシブレイアウトねたを取り上げます。 画像はいつものおやじギャグ …

【悲報】アメブロがヤバい(特に無料プラン・スマホレイアウト)書いても書いても売れないのは何故?

今回は、管理人が相談をうけた、ビジネスサイトにブログからアクセス流すときの問題についてです。 Amebaといえば、かつては国内最大のブログサービスといわれたメデ …

Soundcloudの再生回数やいいねの数を、金で買えるというサービスがあるらしい

今回は、管理人がリミックス曲ネットに投下などの活動を通して遭遇した、新たなサービスについてお伝えします。 『金で買う』っていうと人聞きがあまりよくないですけど、 …