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

関連記事

  1. Web関連

    ニュースを読んで快適なビジネスライフを

    こんにちは!元野球部デザイナーの栄です!みなさんは朝のニュース…

  2. Web関連

    必ず売り上げが上がるWebサイトの王道があります!

    クロージングには自信があります!という営業マンのお話し2015年…

  3. AI関連

    WEB接客と親和性の高そうなサービスを考えてみた

    2015年は"WEB接客"サービス元年と呼ばれていますが、WEB接客と…

  4. Web関連

    ECサイト制作を行う前に知っておくべきヒント

    年々市場拡大を続けているECサイト市場。物販を行う企業のほとんどが楽天…

  5. Web関連

    オンライン学習のメリットとデメリット

    昨今、インターネットを通じて学習する方が増えており、受講者も年齢や職業…

  6. Web関連

    SiriとOK Googleはどっちが優秀か、Web制作会社がやってみた。(Siri編)

    体験レポートとは?ティファナのスタッフが巷で話題になっていることや…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    ホームページ制作会社が紹介するHTML5の動画のメリット
  2. Web関連

    ツイッター活用は今がチャンス
  3. Web関連

    Webならではの地方紹介
  4. AI関連

    AIによる顧客サポート|「転ばぬ先の杖」になる
  5. Web関連

    ホームページ制作会社が紹介するグローバルナビゲーションの情報分類4パターン
PAGE TOP