Web関連

WordPressを使った簡単なオリジナル(っぽい)フォトブログ制作2

0

こんにちは。
育児に家事に大忙しのディレクター、望月です。
限られた時間の中で、どうやって効率的にデザインするか、いつも考えています。

前回に続き、フォトブログを作成するためのステップを、解説していこうと思います。

今回は、テンプレート導入後の細かい設定になります。
日頃からWordpressに触れている人は、自分のペースでどんどん進められると思いますが、わからない人のために、丁寧に解説していくつもりです。

レスポンシブデザインの快適さを体験!

今回、Wordpressのテンプレートとして『fullby』というパッケージを導入したのですが、狙ったとおり、レスポンシブデザインのレイアウトがとても快適で、スマートフォンでもPCでも、ストレスなく閲覧できることに感動しました。
自分で1からデザインしていた場合、ここまで簡単に、快適に出来たかというと、おそらく何倍もの時間がかかったと思います。

wp_blog02_15022001.png

fullby テーマの利用方法

ここからは、fullby テーマの具体的な利用方法を解説していこうと思います。
当然、Wordpressをベースにしていますので、基本的にはブログとして記事を1つずつ投稿していけば問題ありませんが、このテンプレートならではの機能がいくつかあります。それを解説していきます。

1.記事の関連画像登録
各記事に画像を登録することで、サイト全体がとても賑やかで楽しい雰囲気になります。逆に、デザインそのものはかなりシンプルなので、画像を正しく登録しなければ、全体のレイアウトがギクシャクして、物足りない感じになってしまいます。

wp_blog02_15022002.png

左記の赤枠内の画像は、全て、各記事に紐づくサムネイル画像です。言い換えれば、このサイトのビジュアルは、各記事の画像でもっているようなものです。

記事のサムネイル画像登録は、本文エリアではなく、右下の『アイキャッチ画像』で登録します。
個々に登録しなければ、仮に画像が記事内に表示されても、TOPページや最新記事一覧などに画像が表示されません。

wp_blog02_15022003.png

2.TOPページのメインビジュアル掲載方法
このテンプレートは、TOPページのメインビジュアルに、いくつかピックアップ記事を載せることが出来ます。
方法は以下のとおりです。

記事作成ページ、および記事一覧ページにおいて、ピックアップしたい記事の『タグ』に、”Featured”と記載します。

wp_blog02_15022004.png

これで、TOPページのメインビジュアルに記載されるようになります。

wp_blog02_15022005.png

※記載されるのは、投稿日程の新しいものから3つまでです。
※サムネイル画像を登録していなければ、真っ白なイメージになってしまいますので、注意しましょう。

3.SNSサービスへのリンク設定
サイドバーに、各SNSサービスへのアイコンが入っていますが、初期設定のままではリンクは貼っていません。
これを利用するには、テーマを編集する必要があります。
『外観』→『テーマ編集』の”sidebar-primary.php”を編集することで機能します。
以下、3行目以降のリンク設定をすることで、適用されます。

<a href=””><i class=”fa fa-facebook fa-2x”></i></a> ←facebook
<a href=””><i class=”fa fa-twitter fa-2x”></i></a> ←twitter
<a href=””><i class=”fa fa-pinterest fa-2x”></i></a> ←pinterest
<a href=””><i class=”fa fa-instagram fa-2x”></i></a> ←instagram
<a href=””><i class=”fa fa-linkedin fa-2x”></i></a> ←linkedin
<a href=””><i class=”fa fa-youtube fa-2x”></i></a> ←youtube

wp_blog02_15022006.png

いかがでしょうか?

このテンプレートは、もっとたくさんの機能、レイアウトパターンが数多く存在しますが、とりあえずはここまでに紹介したものだけで、形になると思います。

是非皆さんも、Wordpressを使ってフォトブログサイトを作ってみてください。

0

CMSの強い味方!? 高さを自動調節してくれるjQueryAutoHeight.js導入方法前のページ

【Web制作会社が教える】10分でわかる!?フラットデザイン実践のポイント次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. AIに求められているものは、実は意外な物だった
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. SNS関連

    Twitterを使った狙い撃ちマーケティング、Twitter広告活用法

    今や知らない人はいないであろうTwitter。Facebookと並…

  2. Web関連

    今、Web漫画がアツイッ!?

    みなさんは暇な時、どのようにお過ごしでしょうか。歩いているとき、電車…

  3. Web関連

    単語の覚え方から実際の利用シーンまで。個人的オススメ英語学習サイト3選

    こんにちは。学生時代、英文学科なのに人見知りすぎて留学生とコミュニケ…

  4. Web関連

    運営コスト削減!?CMSを使ったweb制作のススメ

    今回は"CMS"についてお話しようと思います。「CMSって何だろう…

  5. Web関連

    ショッピングカートシステムのまとめ

    ECサイト構築で必ずと言っていいほど使われるショッピングカートシステム…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    ホームページ制作の大きな失敗原因と解決方法はこれだ!
  2. Web関連

    Web制作会社が教える、スマホ広告を出す前に押さえておきたい3つのポイント
  3. AI関連

    AI(人工知能)は、結局のところ人間を超えることができるのか?
  4. SNS関連

    便利なSNSの陰には危険がいっぱい!?
  5. Web関連

    まるでおうちがアクアリウム?家から楽しめるオンライン水族館!
PAGE TOP