Yosocamブログテーマ変更

雑記

【雑記】ブログのテーマ・レイアウトを変更しました!

投稿日:

全くもってキャンプ・アウトドアの話ではございませんが、お付き合い下さい m(_ _)m

12月に入ってネタも尽きてきたので、ブログのテーマおよびレイアウトを変更しました(笑)ほんと、どうでもいい話ですが…

スポンサーリンク

ブログテーマ、レイアウトの変更

つい11月末日まで、ブログテーマは無料で利用のできるSimplicityという、WordPressを利用されている方なら一度は聞いたことのあるWordPressのテーマを使用していました。

名前の通り、本当にシンプルで様々なブロガーの方がそのまま使用したり、カスタマイズして使用されているかと思います。

私も少々カスタマイズして使用していました。

そのままレイアウトだけを変更して使用する方法もありましたが、別のブログで以前使用していたStingerというテーマを久々に閲覧したところ、有料ですがAffingerというテーマの最新子テーマ「JET」のレイアウトに惹かれ、Affingerを購入してみました…が、JETっておまけで付いてくるもんだと勝手に思っていたところ、別売とのこと…(^^;)

説明書きはきちんと読まないといけませんね。ほんと…

そういう訳で、別途子テーマを購入するのも何なので、それっぽく自分でカスタマイズしました。一応一通りパソコンとスマホ(iPhone6S)でチェックはしましたが、もしかしたらレイアウト崩れがあったりするかもしれませんけど…

パソコンで見るとこうなります

トップページのPick Up 記事

Yosocamブログテーマ変更

コンテツ枠一杯に、今までの記事全ての中からランダムにPick Up記事を表示するようにしました。ものによっては、何で今さらこんな昔の記事が…ということもあるかもしれませんが、その場合は更新ボタンで更新していただけると記事の内容が変わります。

トップページ、カテゴリーページのレイアウト

下へスクロールすると、

Yosocamブログテーマ変更2

カードタイプで記事が新しい順に、左から右へ更に下へと続く使用にしています。以前に表示していた♡マーク(SNSの合計数)は今回から外しています。

トップページとカテゴリーページの検索

Yosocamブログテーマ変更5

トップページと、カテゴリーページはサイドバーをなくして、1カラムの仕様にしています。また、検索は各ページ一番下部、フッター手前に設置してあります。

検索やアーカイブ、タグページのレイアウト

Yosocamブログテーマ変更4

これは今まで通りの2カラムなのですが、こちらもカードタイプで2記事ずつ表示されるようにしています。この際の検索は、サイドバーに設置してあります。

投稿記事ページのレイアウト

Yosocamブログテーマ変更3

最初トップページなどと同じく1カラムにしようかなと思ったのですが、コンテンツ幅を広くすると記事が読みにくくなるのと、画像がキツイかなと思い、今まで通りの2カラムのレイアウトにしてみました。

個人的に文章はある程度の横幅以内の方が、読みやすいかなと思いこちらにしました。

スマホで見るとこうなるはず(iPhoneの場合)

スマホは色々ありすぎるため、一番閲覧の多いiPhoneで確認しています。ただiPhone6Sでの確認の為、iPhoneXはどうなのか心配です。

このAffingerのテーマがレスポンシブデザインのため、以前のSimplicityのようなモバイルシュミレーターで確認ができなくなっているので、実機で確認しているため、結構難儀です(汗)

トップページのPick Up 記事

Yosocamブログテーマ変更スマホ

パソコンと同じように、トップページの一番に今までの記事全ての中からランダムにPick Up記事を表示するようにしています。パソコンと同様に更新ボタンで更新していただけると記事の内容が変わります。

トップ・カテゴリー・アーカイブ等のレイアウト

Yosocamブログテーマ変更スマホ2

スマホは基本2カラム表示をさせていませんので、どのページも1カラムになります。トップやカテゴリー等のページの投稿記事は、以前の左側にサムネイル右に記事タイトルではなく、上部にサムネイル、下部に記事タイトルと抜粋としています。

スマホでの検索

Yosocamブログテーマ変更スマホ3

基本追尾で右上にメニューを表示させるようにしています。下スクロール時に隠れ、上スクロール時に表示される様になっています。

また、検索以外のメニューもこちらになります。

上から順に、検索、ホーム、カテゴリーとなっているため、こちらから別の記事にアクセスができます。

あとがき

今後やろうと思っていることが、記事のAMP化。

Simplicity の際は、現在のパーマネントリンク「任意の文字.html」でもAMP化できたので楽ちんだったのですが、今回のテーマは「/任意の文字/」で終わらないとAMP化できないため、現在のところAMPは利用していません。

どっちがいいのかと言われるとわかりませんが、何で語尾に.htmlの拡張子を付けたのかも思い出せないため、当分はこのまま使用しようと思います。

Affingerを使用してAMP化するには、パーマネントリンクを変更する必用があり、その場合はリダイレクトする必用があるので、結構面倒なことになるため、どうしようか検討中しているところです…(^^;)

そんなこんなで、一度はfuntion.phpをいじって一度は真っ白にしてしまったブログも、無事にほぼカスタマイズ終了しました。(スマホ横は微妙だけど…)

ちょこちょこ更新していいこうと思いますので、今後ともよろしくお願いします m(_ _)m

p.s. 画像に文字を入れると、Pick Up記事のタイトルと被って見辛いとうことがあるのは内緒です…(^^;)
  • 登山・キャンプ用品買取専門店 マウンテンシティ にて、今だけ買取金額が20%UPする買取キャンペーン実施中!
    • スノーピーク、モンベルなど買取強化ブランドが今だけ買取金額20%UP
    • テント、登山ウェアなど買取強化アイテムが今だけ買取金額20%UP
    期間:2018年8月末まで

スポンサーリンク

いいね!をクリックすると
Yosocam 最新情報を
お届けします!

是非お試し下さい

Twitterでフォローしてみませんか?

関連コンテンツ

おすすめの記事

takibi-tarp-tc-wing 1

今年もかなり魅力的な新製品のタープやテントなどを発表した、tent-Mark DESGINSのTCタープ・コットンタープを中心に、現在発売されているものから今年発売されるものまでを、素材別に一覧にまとめてみました。

YETI2 2

最近かなり気になっている、YETIを代表する頑丈系クーラーボックスを比較してみました。

買ってよかったキャンプ用品 3

買ってよかったと思うキャンプ用品・道具をまとめてみました。

モノポールテント12選 4

人気のモノポールテント(ワンポールテント)を、ソロ向きサイズとファミリー向きサイズに分けてご紹介します!

トンネル型テント 5

快適な空間を演出するトンネル型テントの中から、少人数向けとファミリー向けのサイズ別に、14種類のテントをご紹介します。

カーミットチェア、ウッドフレームチェア比較 6

見た目のフォルムが似ていれど、価格や仕様が結構違うカーミットチェアとハイランダーのウッドフレームチェアを、勝手に比較してみました。

-雑記

Copyright© Yosocam - キャンプ用品を中心に紹介するブログ , 2018 All Rights Reserved.