投稿者: nissy

nissyのプロフィール ホームゲレンデ：尾瀬戸倉スノーパーク 好きな食べ物：三度の飯より牡蠣が好き！ フリーランスwebクリエイターです。 冬期の週末はkid'sにスキーを教えています！ 夏はサーフィンとスノーケリング、平日の夜は週2回タヒチアンダンスを習っています！

bootstrapを実装

Posted on by nissy

まずは公式サイトからCDNをコピーしてhead内に記述します。

実際に張ったコードはこちらです。

<!– CSS only –>

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css” integrity=”sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk” crossorigin=”anonymous”>

<!– JS, Popper.js, and jQuery –>

<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>

<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”></script>

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js” integrity=”sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI” crossorigin=”anonymous”></script>

なぜかjsonを使っていたトップが何も表示されなくなってしまったのでjqueryだけ
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
以前のもののままにしました。
すべてのテンプレートのbody直下に
<div class=”container”>を追記し、トップにはグリッドシステムを採用した。

containerはbootstrapで用意されたラッパーclassです。

これを当てるとブラウザ幅によってbootstrapで用意されているcssでbreakポイントで勝手にレイアウトが変わります。

containerの中にrowを作ります。これは余白なども既に設定されたフレックスボックスです。

その中にcol-プレフィックスｰ12までの数字でカラム分けすることでレスポンシブレイアウトになります。

トップは年別アーカイブをサイドバーにした2カラムにするので12分割の割合は本文をcol-md-9　サイドバーを　col-md-3にしました。

bootstrap4からbreakポイントとプレフィックスが変わり、col-xsは無くなりました。

デバイスの幅極小
縦モバイルサイズ
<576px		小
横モバイルサイズ
≥576px		中
タブレットサイズ
≥768px		大
デスクトップサイズ
≥992px		特大
大画面サイズ
≥1200px
コンテナの max-widthなし（自動）540px720px960px1140px
クラス名.col-.col-sm-.col-md-.col-lg-.col-xl-
列の数12
ガター（列の間隔）の幅30px（それぞれの側に15pxずつ）
入れ子可能
順序変更可能

下記サイトを参考にしました。

https://cccabinet.jpn.org/bootstrap4/layout/grid

MTのカテゴリーをアイコン表示する

Posted on by nissy

記事一覧にカテゴリーアイコンを表示しようとしたのですが、管理画面を見ると記事の中にもカテゴリーがあり、そのほかにカテゴリーセットという大項目があるではないですか。はっきり言って混乱です。

カテゴリーセットに登録したが記事入力画面には選択できるところが出てきません！

どうやらコンテンツタイプのためのものっぽい。

プライマリカテゴリも含めて表示する場合

<mt:EntryCategories glue=" / ">
<a href="<$mt:CategoryArchiveLink$>"><$MTCategoryLabel$></a>
</mt:EntryCategories>

プライマリカテゴリは含めないで表示する場合

<mt:EntryAdditionalCategories glue=” / “>
<a href=”<$mt:CategoryArchiveLink$>”><$MTCategoryLabel$></a>
</mt:EntryAdditionalCategories>

jsonには下記を追記

  "categories": [
    <mt:EntryCategories glue=",">
      "<mt:CategoryLabel encode_json="1">"
    </mt:EntryCategories>
  ]

無事カテゴリーが表示されました。

次はカテゴリーアーカイブのリンクをつけたいな。

Sassを監視して変更があったらファイルを自動コンパイルする

Posted on by nissy

watch機能を使います。

gulpfile.jsの

gulp.taskに

return gulp.watch(“scssファイルのパス”, function() {});

で囲みます

// gulpプラグインの読み込み
const gulp = require(“gulp”);
// Sassをコンパイルするプラグインの読み込み
const sass = require(“gulp-sass”);

// style.scssの監視タスクを作成する
gulp.task(“default”, function() {
// ★ style.scssファイルを監視
return gulp.watch(“scss/style.scss”, function() {
// style.scssの更新があった場合の処理

// style.scssファイルを取得
return (
gulp
.src(“scss/style.scss”)
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: “expanded”
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on(“error”, sass.logError)
)
// cssフォルダー以下に保存
.pipe(gulp.dest(“css”))
);
});
});

記述したらコマンドから

npx gulp

と打ち込むと監視が開始されてscssの更新があると自動でコンパイルされるようになります。

でもこれずっとコマンドプロンプト起動していないとダメなんですね。
そりゃそうかー。

MTの記事更新をJsonでトップページに再構築無しで更新する

Posted on by nissy

記事の更新があったらjson形式で吐き出されるテンプレートを作成

[
<mt:Entries lastn="10">
{
"url" : "<mt:EntryPermalink encode_json="1">",
"title" : "<mt:EntryTitle encode_json="1">",
"date" : "<mt:EntryDate encode_json="1">",
"body" : "<mt:EntryBody encode_json="1">"
}<mt:If name="__last__"><mt:Else>,</mt:Else></mt:If>
</mt:Entries>
]

トップテンプレートにJSでjsonの読み込みを記述。

<dl id="wrap">
<script type="text/javascript">
$(function(){
$.getJSON("js/recent_entries.js", function(recent_list){
for(var i in recent_list){
var h = '<dt>'
+ '<a href="'
+ recent_list[i].url
+ '">'
+ recent_list[i].title
+ '</a>'
+ '</dt>'
+ '<dd>'
+ recent_list[i].date
+ '</dd>'
+ '<dd>'
+ recent_list[i].body
+ '</dd>';
$("dl#wrap").append(h);
}
});
});
</script>
</dl>

トップページを再構築しなくても記事一覧は自動更新される。

参考にしたサイト

https://designsupply-web.com/knowledgeside/1463/

Sass 開発環境を整えてみた

Posted on by nissy

Sassの開発環境を整えました。

まずPCにnode.jsをインストール。

続いて、Gulpもインストールしました。

コンパイルはコマンドプロンプトを開き、gulp.jsのディレクトリにいき

npx gulp

と打ち込み

エンター押すとcssフォルダにcssができている。

参考にしたサイト

https://ics.media/entry/3290/

アンドロイドスマホだけbackground:repeatが効かない時の対処法

Posted on by nissy

先日コーディングした案件でスマホ時にbackgroundイメージを縦にrepeatするデザインだったので普通に

@media screen and (max-width:768px) {
background: url(bg_sp.png) repeat-y top;
}

こんな感じでスマホの時は画像を縦にリピートさせる簡単なコードを書いていたのですよ。

chromeのdeveloperツールでスマホviewで確認してオッケーと思ってたら実機で確認したらiPhoneは表示されるのにアンドロイドスマホでは背景が表示されない！

repeatを外すと表示される ……

なんだこの現象は……

原因はショートハンドで書いていたことでした！

background-image: url(bg_sp.png);
background-repeat: repeat-y;
background-position: top;

書き直したら無事解決いたしましたー！

めでたしめでたし

画像にフィルターをかけてテキストをのせる方法

Posted on by nissy

メインビジュアルにキャンペーン終了のお知らせをcssで知らせたいということで、白いマスクの上に終了の文字をのせることになりました。

デザイン画像を修正するのがほどんどでしょうが、意外といろんなパターンに使えますのでmemoっておきます。

下記の写真にマスクをかけます。
今回は疑似要素のbeforeとafterを使います。

imgタグは空要素なのでimgタグにbeforeとafter を記述しても何も起こりません。

なのでimgタグの親要素にimg-wrapを作って :beforeと:after にすたいるをつけていきます。

詳細は実際のコードはこちらです。

WordPressとjetpack連携新しく作ったFacebookページが表示されない時の対処法

Posted on by nissy

新しく作ったフェイスブックページ”Creator’s memo”に記事を自動投稿の設定をしようとしているのですができなくてハマったのでメモっときます。

まずFacebook連携はいろんな方法がありますよね。
私はjetpackを利用しております。
プランは無料プランです。
ダッシュボードのプラグイン新規追加で追加できます。

統計以外にもSNSの自動投稿もできて便利機能盛りだくさんなので必須プラグインになっていますよね。

Facebookページに記事を自動連携しようとしたのですが、他にも個人アカウントと別の運営ページは表示されるのですが、表示されないから選べないという状況でした。

通常は下の写真のように選択できます。

jetpack＞設定＞共有＞パブリサイズの接続で本来なら個人アカウントと管理ページ全て表示されて自動投稿するページを選択できるはずなのですが、出てこない。。。

ブラウザのキャッシュをからにしたり、古いページを削除したりしましたがダメでした>_<

結局はFacebookページ側の操作で解決しました。

右上の三角から設定＞アプリとウェブサイト

その中にWordPressのアプリがあるので一旦削除します。

そしてまたjetpackから連携します。

今度は無事に新く作ったページも表示されました！

地味にハマった話でした！

WordPress自作テーマ　ログインしてもツールバーが表示されない

Posted on by nissy

今日は地味に困って調べるのに時間かかったツールバー表示についてメモっときます。

記事更新でもデザイン変更でもとりあえず表示を確認しますよね。

私は普段は管理画面とサイト表示とタブ二つ開いて確認しているので特に気にしていなかったのですが、ある日サイト表示画面から管理画面にすぐ戻るためのツールバーが表示されていない！

いつもログインしているなら出てくる一番上のこれね↓


と気づき管理画面の→ユーザー→あなたのプロフィール
サイトを見るときにツールバーを表示するにチェックが入っているのを確認しました。

チェックが入っている！のにも関わらず表示されていない・・・

ネットで検索しても上記のことしか出て来ないしcodexでも見つけられない。。。（検索の仕方が悪いのかw）

やっとそれらしき記事を見つけました！

http://wordpress.ser8.info/archives/1001

どうやらフッターテンプレートに

<?php wp_footer(); ?>

の記述がないことから表示されていらしいのでフッターテンプレートのテーマ名のすぐ下に追記してFTPでアップして表示を確認したら無事ツールバーが表示されるようになりました！