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記事のタイトルと被って見辛いとうことがあるのは内緒です…(^^;)
  • 好日山荘にて、冬のウェア・クリアランス ザ・ファイナル開催中!
    最大50%OFFの商品もあるのでお見逃しなく!
  • eSPORTS にて、在庫限りのスペシャルプライス OUTLET SALE!開催中
  • ナチュラムにて、ogawaの人気定番アイテムが数量限定で販売中!
    ピルツ19 】通常価格¥124,200が、廃盤特価の¥99,800(税込)に!
     是非このチャンスに!
  • キャンプには行きたいけど、キャンプ用品を揃えるまではという方へ…
    キャンプスマイル」で、お得なファミリーセットを一度レンタルしてみてはいかがでしょうか?

スポンサーリンク

この記事も読まれています

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

是非お試し下さい

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

-雑記

Copyright© Yosocam , 2019 All Rights Reserved.