wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

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

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

      2018/05/16

こんにちは、管理人@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リニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

  関連記事

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

今回は、管理人がリミックス曲ネットに投下などの活動を通して遭遇した、新た …

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

今回は、管理人がこのサイト・音楽スクールや一般企業のお取引先さまなどのサ …

googleアドセンス広告で、競合他社の広告を自社サイトに表示させない方法

今回は自社でwebサイトメディア・ブログなどを行い、『広告で収益化』する …

【wordpress webサイト制作・新プランご案内】初期構築費用無料の、月額顧問契約プラン(変更・更新・記事追加など無制限で対応

今回は、管理人が行っているお仕事(ワードプレスサイト制作サービス)で、よ …

ランキングサイト:ブログ村で、複数のブログをひとつのアカウントで管理する方法

今回は、有名でユーザー数の多い(上位だとアクセスが流れてきやすい)ブログ …

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

今回は、お試しで(いつもはワードプレス利用だけど)、別のwebサイト製作 …

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

今回は、コンテンツ発信関連・youtubeで動画を宣伝する方法についてお …

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

今回は、管理人が相談をうけた、ビジネスサイトにブログからアクセス流すとき …